Laravel Sanctum/Airlock with Vue for SPA Auth
HTML-код
- Опубликовано: 1 окт 2024
- usefullaravelpa...
Airlock has been renamed to Sanctum: blog.laravel.c...
We take a look at using Laravel Airlock to authenticate our Single Page Application in Vue. Airlock provides a lightweight authentication system relying on Laravel's built-in cookie-based session authentication services. We use a Vue CLI application to scaffold out the front-end and a Laravel 7 application for the backend. We also make use of Tailwind UI components, look at navigation guards in Vue and do some basic validation.
GitHub Repo for Laravel: github.com/dre...
GitHub Repo for Vue: github.com/dre...
If you want to do Mobile Auth, I did a video on that too: • Laravel Sanctum/Airloc...
This article helped me out a lot: serversideup.n...
This doesn't seem to work in Safari. Did some digging and it looks like Safari does NOT send the cookies when making a request to /login, resulting in errors. The cookies do exist though. Will update description if I find a solution. Here is a thread where someone has the same issues: stackoverflow..... If you figure out a solution, please let me know :).
LINKS
My courses: codewithdre.com
Sign up for my newsletter: andremadarang.c...
My website: andremadarang.com
Twitter: / drehimself
GitHub: github.com/dreh...
CodePen: codepen.io/dreh...
![From Laravel Blade to Vue.js + API [Live-coding Example]](http://i.ytimg.com/vi/4uVNz9sQn18/mqdefault.jpg)
Please note that this doesn't work in Safari. Works perfectly in Chrome and Firefox, but Safari doesn't send the Cookies back to the server
You're right, just tried in Safari and it doesn't work. Did some digging and it looks like Safari does NOT send the cookies when making a request to /login, resulting in errors. The cookies do exist though. Will update description if I find a solution. Here is a thread where someone has the same issues: stackoverflow.com/questions/53082080/safari-does-not-set-cookie-but-chrome-and-firefox-do. Also: laracasts.com/discuss/channels/code-review/airlock-safari
Andre Madarang That’s what I found as well. I think it has something to do with Safari’s strict 3rd party cookie policy.
@@renedekat3519 That Sucks! If anybody reading this has a solution, please let us know!
Andre Madarang Could you add “That” before “sucks”? Now it reads as if I suck 😂
@@drehimself Is this still an issue? So there's no way to use the app with safari unless the user changes browser settings? Wouldn't that make this package completely unusable for production apps? I'm confused.
Hope to hear from you.
Update: I just needed to add the port like this in the .env file SANCTUM_STATEFUL_DOMAINS=localhost:8080
I have tried so many tutorials and keep running into the same thing each time. I can get the tokens and login, but all consecutive requests, including the '/api/user', return 401. Any ideas that I haven't seen on Google or SO already? Thanks!
replace this code in Providers\RouteServicesProviders
protected function mapApiRoutes()
{
Route::prefix('api')
->middleware('web')
->namespace($this->namespace)
->group(base_path('routes/api.php'));
}
too fine, but what is happen if sactum expired session, you not create function?
This is not secure. You can just set authstate in your browser and are logged in
I got error 401 (Unauthorized) when access /api/user
hi sir, why are you using a separate vue project, not using laravel / ui vue?
and if i use laravel / ui vue (one project with laravel) do i have to use laravel sanctum?
What if someone put in localStorage isLoggedIn to true, he can directly access to dashboard ?!!
no
I'm using react, but the code in here works the exact same way in the tutorial. So you don't necessarily have to be using vue for the front-end before you follow this tutorial, it can be react, angular, svelt or any other SPA framework or library it going to work perfectly fine.
Andre, when doing SPAs, when would you reach for Sanctum versus InertiaJs? I have experience with InteriaJs and think it's great - can't believe it's not more popular - it also seems to have all the benefits of Sanctum.
Andre - the use of localStorage ignores the fact that cookies expire, so it's very possible that any actual implementation of what you've shown would end with the front end thinking its logged in (localStorage) while the backend does not (cookie expired, etc).
Can you provide guidance as to the proper solution to this?
If the cookie is expired, when you try to use it, it will return an HTTP error code (401 or 403, not entirely sure, I haven't tried). I would catch that error and automatically log the user out and redirect them to the login page. I believe you can use interceptors in axios to make a global error handler. See: github.com/axios/axios/issues/1600#issuecomment-454013644
Very good, thanks. Please make a video of Nuxt JS Authentication with Laravel Sanctum
Hey Andre, I have a question, are your very sure about cookies doesn't work in the localhost url like localhost:8000, I implemented this and everything is good cookies are also generating but it still says unauthenticated.
I'm trying to authenticate my api route with sanctum while using vue.js but I'm getting a headers error
bootstarp.js
axios.interceptors.request.use(function (config) {
config.headers.common = {
'Authorization': `Bearer ${localStorage.getItem('token')}`,
'Content-Type': 'application/json',
'Accept': 'application/json'
}
return config
})
Getting this error
DOMException: Failed to execute 'setRequestHeader' on 'XMLHttpRequest': 'Bearer 100|paUaKhln1hiQUGWUyRshAC5fL8qS9qMhsR5n6CHd' is not a valid HTTP header field value.
Hello, anybody know how to get rid of 422(unprocessable entity) from console?
Is it good choice if I want to make MPA with some API end points for async requests? How auth would look like in app like this? Is the same session cookie for web and api-airlock guards used for auth request? Have you made any tutorial covering this topic or you know where to find some? If not maybe you could consider to make one? Thx.
Yes, they share the same cookie. I just tried logging in to the backend Laravel app and once I refresh my frontend, I'm logged in since the cookie should exist across that domain.
Thank you Sir Andre, this is the package and tutorial that I've been wishing to have when I started to implement Vue.js front-end in my laravel app (SPA using traditional session-based authentication).
Awesome, bro I need to create Laravel Vue SPA only with /admin part in SPA the others pages are simple app. Do you have videos how to create it? Or don't you know where I can find tutorials or projects to check it?
You would have to setup roles/permissions on the backend (I use spatie's laravel permission package). You would also have to check those permissions on the frontend to check if user's are admins. An alternative is to use an existing admin package like Voyager, Backpack or Nova. I have videos on my channel on Voyager and Nova.
@@drehimself I know about roles. But I want to know how to login and make routes in such half-SPA
I think there is also another way to authenticate API which is using the Laravel Session cookies and like simple Web authentications.
My question is which one is better or I should use?
thanks in advance
why not using laravel built-in vue as front end ? it can setup for spa , and use api route to handle the backend at the same time
You can do that too. Pros and cons to both approaches.
@@drehimself thanks for the reply
I am losing my hair over the fact that i follow this video 1:1 and the cookie is not set in the browser after i request the csrf-cookie endpoint.
Looks like so much configuration.. IT would be better if we have any scaffolding.
Respect from Pakistan. 🙏
Thanks for watching!
in which folder is the admin panel created? in client project or inside laravel project?
Thanks, Andre; it was beneficial.
I've faced the same problem at 21:40 and ensured that only one CSRF gathering request is being sent before sending other requests. No CORS issue, not guard manipulation, same middleware setup, no cache/session issue. I have no idea what should I look anymore. 🤦♂️
Thanks, Andre. This video touched shared state topic that wasn't on your Laracasts video. Super useful information here. Stupid question, but here it goes: when keeping the state manually like this, how do you keep your front-end app and back-end app in sync? I see you used local storage, but is there any way that this can get out of sync during normal user interaction (i.e that it can somehow be deleted accidentally and that the user appears to be signed out when they look at their front-end app)? And the other way around: "malicious" user can manually add this in their local storage and appear to be logged in (of course, your back end will prevent them from fetching any sensitive data, but still...). So, when checking the state in the front end app, i.e when protecting the routes, isn't it better to check your back-end app for this (e.g. fetch the user instance thru 'api/user' route) instead of checking the local storage? I hope you get my question: I'm thinking in a way that your back-end should probably be the single source of truth and by using the local storage you kind of break it. Is "your" approach prone to this break down once things get a bit more complicated? Of course, this is just a question from a novice in SPA field (I do have some intermediate Laravel knowledge, though, but this concept is still pretty new to me).
What is the name of this theme that you use in visual studio ?
@Andre Madarang: Is the Safari issue still persisting? I asked Taylor and he is VERY confident it works in Safari.
can you make a tutorial for nuxt js please?
Nice! I was just reading the docs about this today! I'd be interested to know if you implemented this, then in 6 months time decided to change to Passport, what that would look like?
Passport uses token-based auth so the client has to store that token somewhere locally and send it as a Bearer token with each request. Check out a video I did in the past: ruclips.net/video/GRhkhSzyApc/видео.html
Hi Andre, awesome tutorial! The question is: How to register a user directly from Vue instead of Laravel?
Could you combine it with nuxt ssr instead of jwt? thank you very much
Should be able to. Check out the article I linked in the description.
Just wondering, why is the front end on a sub domain? Just because you are using vue cli for it and you want to keep the code separate?
hello sir...I am using laravel 5.8 and auth but my app was working fine since last year but all of sudden the user gets automatically logged in another systems and logs out automatically.please tell me the solution
Andre awesome ...i request to u please conduct one online session for laravelmumbai conference #laraconindia #laravellivemumbai.i waiting for ur reply .ur teaching skills we love .thanks for laravel airlock
Maybe! Thanks for watching!
@@drehimself we interested for online session if u also?our laravel community member contact u soon.sharing is caring laravel lover ❤ 🔥
What is the name of the vscode theme Andre? I'm loving it
Material Theme (legacy/community version). Fira code font. I've tried others but keep coming back to this!
Excelent video, i recently end the "Vue.s Todo App" series and learn a lot thanks for this excelents videos, i have a question of this video, all the initial setup It is for Laravel can return the necessary cookies to be able to make authorized requests from another subdomain right?, if that is the case, the subdomain setupt is excellent for development (i work exactly like you, using the Vue-cli in vsc and the backend setup in other domain), but for production, where i put the vue code in the same server (the public
folder of laravel), the subdomain setup wont be necessary right?, i can directly send my request to '/airlock/csrf-cookie'?, and if I think about it, if that is correct, Laravel automaticly send the XSRF-TOKEN when you enter in the site, so i can directly send a request to the login route if the vue code is in the same server?, sorry for the long question, I've studied the auth methods with some depth, but I'm really not an expert and they're just guessing, again thanks a lot for so wonderful videos!.
You have to setup your server (and dns) to map separate projects for each domain. For example:
Front End: app.example.com folder maps to app.example.com (can pull from the frontend git repo project)
Backend: example.com folder maps to example.com (can pull from the backend git repo project)
I personally use Forge to set all of this up.
Hi.
I will set the same CSS style on my test project, so I have gon to the Github and I see that, in App.vue, you set this "" and that file only contains that:
@tailwind base;
@tailwind components;
@tailwind utilities;
So, from where dou you set all the Tailwind CSS to apply to the project???
Thanks. Nice video like always. Best regards.
Well, watching the Tailwind documentation(tailwindcss.com/docs/installation), I realize how to install and compile it, I think ... Bye
Hey, Andre, do u know how to solve issue with Error 429 (To Many Requests) ? Using SPA & sanctum auth.
Seems like with appropriate CORS config, the domains of front & backend shouldn't matter
What's the theme you're using for vscode
What would you use to setup an api where users connect to it fully using a script? Could a user do that with this setup?
What if you need to post data between 2 different domains?? What to use then??
Hi Andre,
First of all, great work man!
If i may, there's a bit of an issue with your approach on storing the state on local storage, the appropriate solution in my opinion would be using the same cookie flow...
On a different note: as a was looking around the web for Airlock approaches, i found this guy literally copying all your work on the subject:
ruclips.net/video/LELn-3ZpH9I/видео.html
I guess that should work too. All good, Bitfumes has some good content. I don't think he "copied" it, but was maybe "inspired" from it. It's the same topic so a lot of the stuff will be very similar.
Man! I really appreciate this!
I worked very hard to config this correctly while nobody is elaborating which domain to add here and which to add there! (they all are just running on localhost)
Thanks for this great elaboration!
This guy makes the best tutorials for developers on the entire RUclips. 100% recommended.
Could a user bypass the router auth by manually setting the localStorage variable isLoggedIn=true?
Yes. It's a SPA so everything lives on the client. Protected views are never going to be entirely protected in this type of architecture. The data coming from the backend is secure though as it requires the correct cookie to be sent through.
Still getting CORS policy error after doing the same process. Any help please??
Same here :/
Can you make a tutorial on how to create an external authentication server with "this user can access these servers permissions" ?
For example you have a few stand-alone servers, a user has access to one or more, and the authentication takes place on a seperate server.
I am willing to pay you for it!
Wow you were fast on that topic. :)
I was thinking of doing a video on this.
Do it! L7 stuff is a hot topic... Gotta get them viewsss
Andre Madarang your setup with laravel API server being at the top domain and consumer being at a subdomain does not actually need airlock. You can still use auth:web for that setup. In fact passport also designed to support this kind of setup using CreateFreshApiToken middleware. In all three cases, endpoints are protected against CSRF but axios needs to be configured correctly. In all cases you'll need to send a get request to receive xsrf cookie. I always send that request to api/auth/user endpoint which serves the purpose.
Airlock is useful for other use cases but the one in the video with that setup is not the main use case of airlock I think. But thanks for the great video 👍🏽
Orkhan Alikhanov my thought exactly watching this video. The only difference here is storing the token
Cool video Andre! Is there a way to replicate this subdomain "trick" using NUXTJS as well?
I wouldn't know from the top of my head. The article I linked in the description has some info.
Laravel moving fast hope it's for the good
Definitely! All good changes IMO, they are not breaking changes so if you don't like the new features, don't use them.
@@drehimself Thanks I still on 6 some are still on 5.8 Vue 3 is coming too
Isn't airlock free?
whats the font / theme in vscode?
P.S. Cool vid bro :)
When your front-end is not a subdomain of your Laravel domain it DOES NOT work.
Add the frontend url to the allows origins in the cors config.
How can I do this for multi auth?
Hi Andre, I'm still getting the "Unauthenticated" response even when I test the app in private mode. Have you gotten to the bottom of why this might be happening?
In the video, I was sending cookies twice so it didn't know which one to use.
Thanks for powerful useful lesson, helps.
Awesome. I’ll try this on NuxtJS
Check out the article in the description. The author uses Airlock with Nuxt
Is it possible that the front-end is in different domain?
Works like a charm 👍👍👍
Backend and frontend app must be under same domain ?
Can laravel airlock be implemented in a multi-tenant setup?
I'm not sure how I feel about you starting a video without "What's up guys..."?!
Haha! It's because it's part of my premium course where I don't say that. Here's a WHAT'S UP NATHAN to make up for it.
Why would someone choose Airlock over Passport?
If you don't need OAuth, choose Airlock
is it compatible with laravel lumen?
This is exciting! I wanna see the integration in flutter or Ionic....
I might try it with React Native + Expo. Stay tuned!
@@drehimself awesome!!
Very good, thanks
Hi Sir, why is it I'm getting CSRF token mismatch when logging in? I followed your tutorial, and even if I install your repos I've got the same problem.
add csrf token on your form, generate by laravel helper, if not use laravel form.helper to generate helper
@@ihsanoeddin4733 did you do this when trying to replicate this tutorial on your end?
Hi, this happens in Safari I presume? Same for me, and it works in Chrome and Firefox. If you've solved it for Safari, I'd be curious to know how.
Mahn your videos are good. But your voice sounds very sleepy and the video is long. Please do something about it because your videos have good content.
LOL that's my voice! I assure you I'm awake but there's not much else I can do to change the sound of my voice!
@@drehimself ahahaa. Ikr
Great video 👍
how to implement refresh token mechanism ?
I don't think there's an implementation for that. You should just create a new token if one is expired. See: github.com/laravel/airlock/issues/83
Thanks for your video! Any chance to make a more advanced tutorial (extending this one), using Vuex and Permissions (spatie permissions in backend for example)?
Will consider! I could learn a lot myself as I prefer the monolithic approach (or use Inertia) to building apps if I don't need an API.
I've already tried using the spatie permission with Laravel+Vue and it works really good but since I've tried it for myself then I cannot say that my approach is the best practice generally :/
Any idea why I am facing this issue? I was having the same issue as you but the incognito thing didn't solve it. github.com/laravel/airlock/issues/80
I was stuck on that issue for a while, even after clearing cookies out multiple times I still couldn't get it working. I had no issues when I was playing around with the original project. Luckily incognito worked (like you saw in video). If you have a repo I can look at, I can try it out with my front end code. We can also communicate there in the issues tab.
@@drehimself Thanks for the quick reply mate but I've just managed to fix my issue. I returned the airlock config to debug it and had figured out my SPA stateful domain value in the .env wasn't set correctly. Your video was very helpful in getting it all working thank you
@@matthewgriffin8289 Awesome! Glad you got it working.
Thanks for this Andre! Really appreciate it.
Thanks for watching!
The topic I have been waiting for....
Thanks for watching!
Hi @andre, do you have any idea on how to run on a custom domain with nuxt on a local machine?
I do not, sorry. The article I linked in the description has some details, but sort of just skips over it and says someone did it for him using docker.
@@drehimself Thanks Sir!
ok, cool
My filler words
what do you use as password manager ?
Lastpass. Always gets in the way in my videos 😂
Another very good tutorial!
Thanks for watching!
tailwindUI hehe
So good!