[Authentication] Updated how persistent data is stored

Author: Jovert Lota Palonpon

app/Http/Controllers/Api/Auth/SessionsController.php

@@ -35,7 +35,7 @@ public function identify(Request $request) : JsonResponse
     }
 
     /**
-     * Authenticate the user and then give it's userId.
+     * Authenticate the user and give the token data.
      *
      * @param Illuminate\Http\Request
      *
@@ -49,7 +49,7 @@ public function signin(Request $request) : JsonResponse
         ]);
 
         if ($token = $this->attempt($request)) {
-            return $this->respondWithUserId($token);
+            return $this->respondWithToken($token);
         }
 
         throw ValidationException::withMessages([
@@ -59,20 +59,6 @@ public function signin(Request $request) : JsonResponse
         return response()->json(['error' => 'Unauthorized'], 401);
     }
 
-    /**
-     * Get the auth token.
-     *
-     * @param Illuminate\Http\Request
-     *
-     * @return \Illuminate\Http\JsonResponse
-     */
-    public function token(Request $request) : JsonResponse
-    {
-        return response()->json(
-            optional(User::find($request->input('uid')))->auth_token
-        );
-    }
-
     /**
      * Try to authenticate the user.
      *
@@ -105,17 +91,21 @@ protected function identifier(Request $request) : string
     /**
      * Get the authenticated user's Id.
      *
-     * @param  string $token
+     * @param  string $authToken
      *
      * @return Illuminate\Http\JsonResponse
      */
-    protected function respondWithUserId($token) : JsonResponse
+    protected function respondWithToken($authToken) : JsonResponse
     {
-        $user = JWTAuth::setToken($token)->toUser();
+        $user = JWTAuth::setToken($authToken)->toUser();
 
-        $this->saveAuthToken($token, $user);
+        $this->saveAuthToken($authToken, $user);
 
-        return response()->json($user->id);
+        return response()->json([
+            'auth_token' => $authToken,
+            'token_type' => 'bearer',
+            'expires_in' => $this->guard()->factory()->getTTL() * 60
+        ]);
     }
 
     /**
@@ -151,7 +141,7 @@ public function user() : JsonResponse
      */
     public function refresh()
     {
-        return $this->respondWithUserId($this->guard()->refresh());
+        return $this->respondWithToken($this->guard()->refresh());
     }
 
     /**
@@ -171,7 +161,7 @@ public function signout() : JsonResponse
      *
      * @return \Illuminate\Contracts\Auth\Guard
      */
-    public function guard() : Guard
+    protected function guard() : Guard
     {
         return Auth::guard('api');
     }

public/assets.json

@@ -1,4 +1,4 @@
 {
-  "js/backoffice.js": "js/backoffice.bundle.d1d987f51245810acc04.js",
-  "js/vendor.js": "js/vendor.bundle.60bab7ed0c4b898e6cd4.js"
+  "js/backoffice.js": "js/backoffice.bundle.55554000828c6880bf25.js",
+  "js/vendor.js": "js/vendor.bundle.86f41802dd6246f92186.js"
 }

public/js/backoffice.bundle.55554000828c6880bf25.js

@@ -10,10 +10,33 @@ import { Loading } from './views';
 class Backoffice extends Component {
     state = {
         loading: true,
-        authToken: null,
         authenticated: false,
-        username: '',
+        auth: {},
         user: {},
+        username: '',
+    };
+
+    /**
+     * Authenticate the user.
+     *
+     * @param {string} tokenString
+     *
+     * @return {undefined}
+     */
+    authenticate = async (tokenString = null) => {
+        const auth = JSON.parse(tokenString);
+
+        // We will set a default Authorization header, this will
+        // eliminate the need to include the Authorization header
+        // for almost every AJAX requests.
+        window.axios.defaults.headers.common['Authorization'] = `Bearer ${
+            auth.auth_token
+        }`;
+
+        // Store it locally for the authentication data to persist.
+        window.localStorage.setItem('auth', tokenString);
+
+        await this.fetchAuthUser();
     };
 
     /**
@@ -28,8 +51,8 @@ class Backoffice extends Component {
             const response = await axios.post('/api/auth/signout');
 
             if (response.status === 200) {
-                // remove uid stored in localStorage.
-                await localStorage.removeItem('uid');
+                // remove auth data stored in localStorage.
+                await localStorage.removeItem('auth');
 
                 this.setState({
                     loading: false,
@@ -65,27 +88,21 @@ class Backoffice extends Component {
     };
 
     /**
-     * Fetch the Authentication Token.
+     * Get the Authentication Data from the persistent storage.
      *
-     * @return {undefined}
+     * @return {object}
      */
-    fetchAuthToken = async () => {
-        try {
-            const response = await axios.post('/api/auth/token', {
-                uid: window.localStorage.getItem('uid'),
-            });
+    getAuthData = async () => {
+        const authString = await window.localStorage.getItem('auth');
+        const auth = JSON.parse(authString);
 
-            if (response.status === 200) {
-                // We will set a default Authorization header, this will
-                // eliminate the need to include the Authorization header
-                // for almost every AJAX requests.
-                window.axios.defaults.headers.common[
-                    'Authorization'
-                ] = `Bearer ${response.data}`;
-
-                this.setState({ authToken: response.data });
-            }
-        } catch (error) {}
+        if (!authString) {
+            return {};
+        }
+
+        this.setState({ auth });
+
+        return auth;
     };
 
     /**
@@ -107,15 +124,17 @@ class Backoffice extends Component {
     };
 
     async componentDidMount() {
-        await this.fetchAuthToken();
+        const auth = await this.getAuthData();
 
-        await this.fetchAuthUser();
+        if (auth) {
+            await this.authenticate(JSON.stringify(auth));
+        }
 
         this.setState({ loading: false });
     }
 
     render() {
-        const { classes, width } = this.props;
+        const { width } = this.props;
         const { loading } = this.state;
 
         return (
@@ -132,6 +151,7 @@ class Backoffice extends Component {
                                 width,
                                 environment: 'backoffice',
                                 routes: ROUTES,
+                                authenticate: this.authenticate,
                                 handleLock: this.handleLock,
                                 handleSignout: this.handleSignout,
                             }}

public/js/backoffice.bundle.d1d987f51245810acc04.js

@@ -116,6 +116,7 @@ class SignIn extends Component {
         this.setState({ loading: true });
 
         try {
+            const { pageProps } = this.props;
             const { username } = this.state;
             const { password } = values;
 
@@ -124,13 +125,13 @@ class SignIn extends Component {
                 password,
             });
 
-            if (response.status === 200) {
-                window.localStorage.setItem('uid', response.data);
+            if (response.status !== 200) {
+                return;
+            }
 
-                this.setState({ loading: false });
+            pageProps.authenticate(JSON.stringify(response.data));
 
-                window.location.reload();
-            }
+            this.setState({ loading: false });
         } catch (error) {
             if (!error.response) {
                 throw new Error('Unknown error');

public/js/vendor.bundle.60bab7ed0c4b898e6cd4.js

@@ -15,7 +15,6 @@
     Route::namespace('Auth')->name('auth.')->prefix('auth')->group(function () {
         Route::post('identify', 'SessionsController@identify')->name('identify');
         Route::post('signin', 'SessionsController@signin')->name('signin');
-        Route::post('token', 'SessionsController@token')->name('token');
 
         Route::middleware('auth:api')->group(function () {
             Route::post('signout', 'SessionsController@signout')->name('signout');