I am trying to understand how an auth in a spa context with a jwt token should be implemented based on a Register / Login / Logout process. I have been searching on the web and have implemented at laravel side tymon jwt but I am confused about next step regarding register form and login form.
Do I understand well that when my user register for the first time on my website, this is at this time that the JWT token should be generated and recorded in a cookie ? If yes, is it Vue or Laravel which should record the JWT token in a cookie ? I suppose Vue ?! If yes, in which manner?
Other question: what happen if the user clear the browser cache and eliminate the cookie containing the JWT form his computer ? Does he need to register again to get a a new token ?? I am totally confused about the process.
Getting a more detailed and step by step process would help.
Thanks
The rough sketch for a JWT authentication works like this:
Registration - (optional | If the user is not registered) User fills the registration form which is posted to the register route, User account is created and the api responds with 201 ( content created)
Login - User uses his credentials to login to the app. The credentials are verified and a JWT token is issued and sent back to the user.
Vue handles the JWT Token and stores the provided token into cookies ( you can use js-cookie to handle this, usually in Vuex state )
The token is used with every request sent forth to the server, server verifies the Token and then the request proceeds.
Logging out requests the server to invalidate the token and then removes the token from the cookies.
You can use laravel passport, Laravel Sanctum or tymon/Jwt for token management.
Related
I setup a PKCE authentication system for an API using Laravel Passport.
At the moment this API is used by a SPA.
The authentication flow is the following :
User clicks on "login" on the SPA
User is redirected to the API /oauth/authorize endpoint (with all the pkce required parameters)
Now, that API endpoint requires the user to be authenticated. So the login page is shown (its a php Laravel served view)
The user logs in, clicks on authorize, and is redirected to the callback url of the SPA, which will then send a request to obtain the JWT token.
From this point all communication from the SPA and the API will use the JWT token only.
Everything works. Except I now have a few doubts.
Is it correct for the login on step 3 to be session based ? To set that up I simply used Laravel UI, which provides an already setup login functionality, which is session based.
If I visit the API login page again, by its own url, I am actually session logged in (which is normal). Of couse if I logout from that page (it has also a logout button), I can still use the SPA normally, as I still have my JWT token which is used by Passport.
To solve the logout problem I had to implement a 'double' logout, one that clears the JWT from local storage for the SPA, and one to logout the user from the session login of the Laravel api (in case that was still active at the time).
All this seems a little off, should I refactor the login function of Laravel UI to not start a session (if that is even possible) ? Or maybe log the user out in some way(how ?) after the redirect to the SPA callback url ?
Thanks
I have been created PWA with NuxtJS,
then I'm going to use sanctum package, but I don't want to request to the typical Laravel /login route, because I have a customized api /login route which authenticates users with OTP, not by password!
So I'm wonder how can I use sanctum in this situation??
You can use Sanctum's token based authentication to achieve this. All you have to do is add the HasApiTokens trait to your authenticable model and issue new tokens for it on a successful login. So you would have a route which will accept phone number or email and perform a login action. This would trigger the application to send OTP to the user. You have to store the OTP somewhere on the system. Then create another endpoint where user's can send back the OTP they received. This route will then check if the provided OTP matches the one on the system and issue a token to the user.
$token = $user->createToken(<provide-a-token-name>);
Make sure to send back the plaintext token to the user using the plainTextToken function on the token instance. User's will need to add this token to requests as a bearer token in the Authorization header.
I use Laravel for a project. It is not a vue SPA, so no route used at all. The register, login and some other form inputs and outputs are made with modals using vue. For posting the form vars axios is used. For server side authentication laravels standard auth is used. But here is no other authentication like jwt. Should I use other auth types or would csrf be enough? Are there other suggestions?
Usually for web routes csrf token is enough secure or it has been so far. And it does:
Check if the request is a reading request (HEAD, GET, OPTIONS).
If so, skip the check. Match the token from the _token input or from the headers.
Add a cookie with the token to each request.
If you are using api routes then you can chose from Laravel passport which you can setup oAuth2 or you could build your own custom auth middleware using jwt tokens.
I'm trying to build a laravel app that uses an api to get and update info. Some API routes should only be accessible to logged in users.
I have implemented JWT so on login a token is generated for user and passed to javascipt. Also I removed expiring from the tokens to avoid a situation where user can see admin panel but token is expired and he can't do anything.
So now I have a problem when if a user logs out and logs back in, he gets a new token, but the old token is still usable. How can I delete JWT token for a given user?
Some background:
I am writing a small SPA that will use a back end that I have also written. The JS and the back end API are on the same server.
i.e. SPA will load from foo.com, back end is at foo.com/api
In the past I have always used Spring Security with simple form based login. After logging in the user will get a session cookie. Pretty standard stuff.
For this app I looked into OAuth2 implicit flow. My understanding is the User would load my page, then from the SPA I would direct the user to the authorization endpoint so my app could get a token. The user would be redirected from the authorization endpoint to a login form. After the user authenticated with the form.. they would be redirected back to the authorization endpoint to get the token and possibly grant access to the JS client. After that the user would be redirected to a URL specified by the client, with the new access token as a URL fragment.
I have this working and its all great. The part I don't quite get is this:
When the user is redirected to the login form and they authenticate a session is created on the server that has to at least last long enough for the user to be redirected to the authorization endpoint to get the token. At that point they already have an authenticated session on my server, why not just stop there and use traditional cookie and session based logins?