How to retain on client end when getting access token using REST API using Laravel Passport

Question

I stucked in a logic & unable to find till yet that how to resolve it. Please find the below details for the same:

I am developing an application in Laravel 7. In this laravel section i have developed:

1. Admin section using the Laravel's AUTH module with bootstrap 4.
2. Developed REST API using Passport package. (The point to be noted in the API's, that these API's will be consumed via cross-domain by our external users or clients) .

Access Token is generated perfectly on the basis of Unique Client Id & Secret Key which we are providing to each clients specifically.

Now comes to the part where external users trying consuming our API's built under the LARAVEL 7 using Passport authentication. Please find the steps:

• Client is using pure jQuery (3.x) & JavaScript to achieve it.
• Client hits the login API by using Client Id & Secret Key via jQuery Ajax.
• After validating the keys we return the token value to the client.

Post getting the Bearer Token, client able to access the other secured data via API's by setting that Bearer token at header in AJAX. Client consuming our API's via jQuery AJAX only.

The problem arises when client refreshes the web page. As client refreshes the web page the client won't be able to retain the received token. As client is already authenticated and received the token in the 2&3 step, but as client refreshes the web page client won't be able to find that generated access token.

So, is there any way we maintain the same token, instead of generating the new token each time without revoking the last generated access token, when client refreshes the web page. Shall we maintain that token using session cookies i.e.; it retains the token value until client closes the browser.

Answer 1

Yes, you can store the token in the browser using Cookies, sesisonStorage or localStorage

Cookies

using cookie

document.cookie = "access_token=my_access_token";

browsers cookies are not very easy to handle directly, there is already a question with many answers here on how to set, update and delete cookies

Session Storage

Using sessionStorage (easier to handle compared to cookie) keeps the token till session ends (or close browser)

sessionStorage.setItem('access_token', 'my_access_token');
let access_token = sessionStorage.getItem('access_token');

Local Storage

Using localstorage, you can persist the token, it would be available even after browser is closed and reopened

localStorage.setItem('access_token', 'my_access_token');
let access_token = localStorage.getItem('access_token');

Just note that you would need to delete the token from localStorage, it won't auto expire. You should also revoke tokens on the server when user logs out