0

I am trying to understand the basic flow of laravel sanctum in a SPA(vuejs) application. So far what I understood is:

#It creates a middleware for API authentication

#When a user attempts login, it generates the access_tokens and returns to the frontend. frontend then remembers this token number using it's frontend storages like localStorage(), sessionStorage() etc.

#When a user attempts logout, we simply delete the access_tokens from both frontend storage and the database table

Please correct me if I have missed something or made a mistake.

K.S. Azim
  • 127
  • 1
  • 12
  • 1
    Basically yes, are there any issues you are facing? – Bernard Wiesner May 07 '22 at 06:00
  • In that case, I have a question, we can easily create an authentication system using localStorage, why do we need tokens then since once our localStorage is dead, there is no relevance of token exists – K.S. Azim May 07 '22 at 09:25
  • 1
    I am not sure what you mean with "once our localStorage is dead". Basically the token is sent on every request and validated on the backend. A token can be revoked or expired, so even if it exists in localStorage it doesn't mean it's valid. – Bernard Wiesner May 07 '22 at 10:00
  • Ok, I got it, bro, the token is validating each time I am sending a request. but would you please tell me how it validates while I am not sending any token from my form? – K.S. Azim May 07 '22 at 10:08

1 Answers1

5

Sanctum does not only authenticate with tokens but also does regular session authentication. The authentication method is automatically determined based on the request, if it comes from the same domain, authentication is done with cookie/session, if the request comes from a different domain or no session cookie is found tokens authentication is attempted.

Usually for an SPA app that is on your same domain there is no need of using tokens. Sanctum will simply use the standard authentication using cookies.

https://laravel.com/docs/9.x/sanctum#how-it-works-spa-authentication

For this feature, Sanctum does not use tokens of any kind. Instead, Sanctum uses Laravel's built-in cookie based session authentication services.

In the case your frontend is on a different domain or on a mobile device, sanctum will check for the token in the headers of the request.

For using token authentication you need to issue tokens manually as explained here: https://laravel.com/docs/9.x/sanctum#issuing-mobile-api-tokens

Typically, you will make a request to the token endpoint from your mobile application's "login" screen. The endpoint will return the plain-text API token which may then be stored on the mobile device and used to make additional API requests

return $user->createToken($request->device_name)->plainTextToken

After you login, you store the token in the localStorage or local session, you need to include this token in the Authorization headers for mobile or 3rd party fronteds.

When the mobile application uses the token to make an API request to your application, it should pass the token in the Authorization header as a Bearer token.

Basically you don't need to care about tokens if your SPA is on your same domain. You just can keep using cookies and session.

If your frontend is mobile or on a different domain the preferred way is to use tokens and you need to call the login API manually and store the token response on localStorage or local session.

Note though that you actually don't even need to use tokens for 3rd party apps if you don't want. You could use cookies and session as well, however this could cause scaling issues because Laravel gives out a session cookie to everyone, guest or authenticated so your backend session such as redis will grow very fast for 3rd party apps/APIs. However with tokens it only generates them on login so the scale is much smaller.

Bernard Wiesner
  • 961
  • 6
  • 14
  • Thanks for your detailed answer, It helps a lot. Can you tell me another thing: let me explain what I am doing here first, my SPA application is in the same domain. Now while I am logging in I am storing the returned token in localStorage and mutating the state `authenticated` from `false` to `true`. Now while I am reloading the page, the state resets to false and makes me log out. Do I need any additional thing to do so I can stay logged in while the page is reloaded? – K.S. Azim May 08 '22 at 13:48
  • And how can I include this token in the Authorization headers – K.S. Azim May 08 '22 at 13:51
  • Is there a reason you need to use tokens if you are on the same domain? Why don't you use cookies and session (default authentication)? – Bernard Wiesner May 08 '22 at 14:11
  • For authentication headers you can check this https://stackoverflow.com/a/51445755/8485567 – Bernard Wiesner May 08 '22 at 14:17
  • I am trying to understand the flow so I can perform in future if it's required – K.S. Azim May 08 '22 at 14:17
  • 1
    Regarding the state and localStorage, I am not sure what you mean. Basically you need to check your local storage if user is authenticated or not, if yes you let them access restricted areas if not, only public areas of your site are accessible. Same with API calls, you would have some API calls only for authenticated parts. If unauthenticated user calls the authenticated API would get 401. – Bernard Wiesner May 08 '22 at 14:27
  • I think the main purpose of using the access token is to authorize accessing of a resource not authentication. I'm wondering about this scenario if we use the access token for authentication, when this token will be invalid? This is because we expect the token(or session) must be invalidated at a specific time. To explain more, whenever I send the token in the Authorization header, I can retrieve the authenticated user regardless of the time the token is created. This means that a user is logged in infinitely! So, When we should invalidate the old and revoke a new token? – Babaktrad Jun 03 '23 at 14:53
  • 1
    @Babaktrad There are two types of access tokens, short-lived and long-lived. Short lived are used usually in oauth in combination with refresh tokens. Sanctum doesn't use refresh tokens, hence access tokens are long lived. By default they never expire, but I would recommend you configure an expiration time: https://laravel.com/docs/10.x/sanctum#token-expiration. You would revoke the token on logout as well as on your configured expiration time. Regarding authentication vs authorization, sanctum is used for both. – Bernard Wiesner Jun 04 '23 at 18:15
  • 1
    Thank you for your great answer. Additional to the link mentioned in your comment, I found another useful article in https://doeken.org/blog/custom-access-tokens-laravel-sanctum. – Babaktrad Jun 06 '23 at 08:39