Tymon JWT Laravel Vue refresh token stored in localstorage

Question

So I started using Tymon JWT package for Laravel for my SPA. Its all going good ( adding user, signing in, getting Auth user) but when I make an API request it only works for an hour. I understand that the token I stored on on login expires so when I make a request to the API after 60 minutes it doesnt work. My question is how do I refresh the token and restore it in my local storage? On a new request? Every 59 minutes?

AuthController.php

    public function authenticate(Request $request)
    {
        // grab credentials from the request
        $credentials = $request->only('email', 'password');

        try {
            // attempt to verify the credentials and create a token for the user
            if (! $token = JWTAuth::attempt($credentials)) {
                return response()->json(['error' => 'Sorry, we cant find you.']);
            }
        } catch (JWTException $e) {
            // something went wrong whilst attempting to encode the token
            return response()->json(['error' => 'could_not_create_token'], 500);
        }

        // all good so return the token
        $user = JWTAuth::toUser($token);

        //Fire off the login event
        event( new LoginSuccessful($user) );

        return response()->json( compact('token', 'user') );
    }

Login.vue

            axios.post('/api/authenticate',{
                email: this.email,
                password: this.password
            })
            .then(response => {

                if(response.data.error){

                    //Show the error
                    this.error = response.data.error
                    this.loading = false;

                } else {

                    this.loading = false;

                    //Store the items in storage
                    localStorage.setItem('jwt_token', response.data.token);
                    localStorage.setItem('user', JSON.stringify(response.data.user));

                    //Mutate the state
                    this.$store.commit('login');

                    //Now go to the dashboard
                    this.$router.push('dashboard');
                }

            })
            .catch(error => {

            });

in my head tag

<script>

    window.hopbak = {
        'jwt_token': localStorage.getItem('jwt_token'),
        'csrfToken': {!! json_encode( csrf_token() ) !!},
    };

</script>

in my bootstrap.js

let token = window.hopbak.jwt_token;

if (token) {

    window.axios.defaults.headers.common['Authorization'] = 'Bearer ' + token;

} else {
    console.log('no token');
}

This is high level without any code to help, but when you receive the API token back, I would store this as well as the refresh token in local storage. Then when you are making an API call, add a catch to check if the error relates to the API token being expired and if it does then use the refresh token to get a new API token and then automatically retry the original request. — James

Camilo Camilo · Accepted Answer · 2017-10-20T02:51:44

I think you need to register the RefreshToken middleware in app/Http/Kernel.php:

protected $routeMiddleware = [
    'jwt.refresh' => 'Tymon\JWTAuth\Middleware\RefreshToken'
];

And then assign it to the routes you want to refresh the token.

Looking at the source code, I can tell that this middleware will handle the refreshing of your token in every request by adding a new token to the response header.

Tymon JWT Laravel Vue refresh token stored in localstorage

2 Answers