Such an excellent video! Your explanations are so clear. This is the first time where I don't feel burned out in a 40min+ video tutorial. Thank you so much!
This is waaaaaaaay more useful than the documentation. I kid. I understand that this is much more Cookbook but I honestly wouldn't have figured things out without this.
Dude, it's an excellent video. Soothing voice, extensive and crystal clear explanations, troubleshooting common issues... You do it and you do it well. Keep up the good work & congratulations :-) Subscribed without the slightest hesitation
Keep in mind that loginWith() for oauth2 strategies is changing window.location, so page is totally refreshed at that point and code execution aborts right after loginWith
it was an awesome video thanks. but it would be more awesome if you also have explained how are the requests to endpoints are handled in the backend too
Something very important that will help many users: If you dont need the USER endpoint for your api, just set the value to false. e.g. endpoints: { user: false, login: {...}, ... }
Good tutorial -- Thanks for your excellent video... One question, In this video, do you have API server, right? I see you put '/sessions/ in nuxt.js.conf .. Could you share your API server what does it do?
autoFetchUser isnt setting user as logged in. What response is expected? My api is returning status 200 with JSON formatted username / email. Is autoFetchUser looking for specific params to set user loggedin state?
Links to other relevant videos: Answering the most common question, about how the API endpoints work: ua-cam.com/video/S7Tunk-lXE0/v-deo.html How to create the UserAuthForm: ua-cam.com/video/5kVThw0GQv4/v-deo.html This comment will be updated if I record videos about social login, custom strategies, or refresh tokens. Be sure to check out my site for even more videos and courses: www.vuescreencasts.com/
Very good video. but I would have liked to know how you use the backend, I still don't understand much about how nuxt works. the backend can be integrated within nuxt and not independently? or it is completely necessary that the backend and the frontend (nuxt) are deployed separately de estar integrado estaría en la carpeta .nuxt? Thanks
Hi, I implemented a local strategy with @nuxt/auth and laravel sanctum as backend using the cookie instead of the token. Everything seems to work great, but after I log in i am correctly redirected to the home / but if i reload the page the middleware: 'auth' redirects me to the login even if the $auth storage state: isLogged and user are correctly populated. It seems then that the redirects applies before the state is re-initialized after the page reload. Is this possible?
the user endpoint always causes a CORS error, but if i set it to 0, it does not. No other axios call causes an error other than the user endpoint. why?
Hi ! Excellent tutorial. However I have an issue with the 'user' endpoint. I'm using, for the backend, Django Rest Framework with JWT authentication, and the problem is to fetch user data, the API endpoint needs the username like this : "/profiles/". Is there a solution to set a custom name in nuxt auth endpoints ? hope someone can resolve this I'm stuck 😕thanks !
Great tutorial, I spent almost a month dealing with auth issues where refreshing would make me lose the login session. Thanks. I wonder can we use the $auth with a magic link request?
I am wondering why in one of your video for multiple API call at the same time you used a third-party library name RSVP whilst axios was able to do it?
Hey! nice tutorials. best in all over the internet. Can you tell me after registration method you straight away put loginWith method to sign the user in but after clicking the register button, for a second the login page appears before signing the user in. can you please tell me why is it happening? thanks in advance
To add auth and Axios in Nuxt app where are we supposed to execute the yarn/npm command? In VS code command line or general command prompt in laptop ? And to use yarn command in cmd, do I need to install something ?
Those are responses from your backend. For example, /api/user/login - when success, may return an object with a « token » key and its value. This is the « propertyName » that Nuxt needs in its « strategies »
The user endpoint user: { url: '/api/auth/user', method: 'get', propertyName: 'user' } Note: propertyName: 'user' should match the response your user endpoint sends Final note: In the video his response must have provided res.json({ data: 'SOMETHING ASSIGNED' } making it why he used user: { url: '/api/auth/user', method: 'get', propertyName: 'data.attributes' } like the video at (19:45 )
The API for the next version of nuxt/auth is still in flux: auth.nuxtjs.org/status/ I'll want to at least wait until it's stabilized before making a followup
Hello, thank you so much for your videos. i just have a question, where can i find the good video or the components that you import "validation" form @/utils/validations. please. i followed all your video but i can't work in my computer because i don't have this element. thank you for your answer. i am sorry for my english, i do my best ^^.
Hi! Thank you so much for this video! It is very helpful! However, in this example you are using the same API base url as your Nuxt app. In my case, I used external API then Nuxt auth returned CORS error.
Nice video, i have a question. In your nuxt.config.js, you have /sessions in your login endpoint, where is this sessions defined. I could not see them in your repo. Thx
Hello. I love this tutorial but I would like to ask if there is a way to export all the user auth data to firebase authentication instead of the vuex store.
Oh no the debugger is a feature from the browser itself. So this works with any framework. FYI: If you ever use node, you can attach node to the browser so you can use the same debugger tools which is pretty cool
Any idea whats the structure of the json returned by the "user" endpoint on the backend? I use a path like so: base_url/users/id. So im guessing the backend from the video expects the token as the id parameter? Or is it something else im doing wrong?
I see you are using local storage on local development. But what will happen once we upload to Github pages or netlify? Where do the data gets saved? Can we do CRUD operations different for each users? Please help.
hey Such a great tutorial but what is wrong with my project . when log in it doesn't show up the user information at nav bar , it shows only after i reload the page. Please help.
Great video. Do we need to use a middleware if using a subdomain approach? like amazon.com(for users) , sellers.amazon.com(for sellers), admin.amazon.com(for admins). Here users,sellers and admin have different fields and auth tokens and won't share anything except the fact that they are subdomains of amazon.com. What's the best approach here? I think it's better to use 3 different nuxt apps & point each to a particular subdomain somehow. Or is it better to create a single nuxt app and namespace each? It will be great if a video can be made on these topics if possible
If the only thing subdomains share is a domain name, then they're essentially different apps already. I don't see any benefit to doing them in one Nuxt app instead of multiple Nuxt apps.
Thanks for the great tutorial. I am actually implementing auth in my nuxt project but I came across with a problem. As I have all the information at the login end point I set the userfetch to false and I set the user manually at the time of login using ‘this.$auth.setuser’, everything is working fine but when I refresh the page user automatically set to null and the session logged out itself can u help me please…and I am not clear about the requirement of user endpoint..
For my project I'm using jwt and mongodb for auth. i access the token via req.authorization I.E (const token = req.headers.authorization), NOte that authorization header is added to the request by nuxt-auth which is provided by the "api/auth/user" request and use that to fetch the user data after Verifying the jwt token (const verifiedToken = jwt.verify(token, 'JWT_SECRET_YOU_USED_TO_SIGN')), I then use the id stored in the token to find a user in my db matching that id if so I.E (const checkUser = await User.findOne({ _id: verifiedToken.userId })) . Then i pass the res.status(201).json({ user: checkUser }) The user endpoint user: { url: '/api/auth/user', method: 'get', propertyName: 'user' } Note: propertyName: 'user' should match the response your user endpoint sends Final note: In the video his response must have provided res.json({ data: 'SOMETHING ASSIGNED' } making it why he used user: { url: '/api/auth/user', method: 'get', propertyName: 'data.attributes' } like the video at (19:45 ) Hope i was able to help provide some value and insight.
Great tutorial. But after implementing it I came accros CORS preflight issues when server and client are on different domains :( Is there anyway to make nuxt/auth to NOT use "Authorization" in header and keep the token in body instead? Otrherwise it sends preflights and fails
Thanks for the great lesson! How would you provide more details in the error handling for the user? I have an express backend and when I return res.status(402).send("error details") in the catch i get a generic 402 error message. However the "error details" do show up in the network response. I tried using the $auth.onError(handler) but I doubt I did it correctly. Anyway, i've been trying for a while, I thought I'd ask.
Hey I had a similar problem getting the error response. Found a line in the nuxt auth demos which shows using error.response.data in a regular .catch(). github.com/nuxt-community/auth-module/blob/61fb4dcb22e277aa6872607f7d17b584011f430d/demo/pages/login.vue#L178
That's a great question! From what I've read, solutions without tools like Nuxt Auth are pretty complex. I imagine Nuxt Auth improves the process, but I'm not sure how much. Once the site is launched and I have time to fine-tune stuff, I'll look into it.
Excellent video! To support "sliding" token expiration our api returns a new token on every api request - how can I update the one stored by nuxt auth?
I spent all evening doing Nuxt registration. I wish I had've spotted this video sooner. 🤦🏻♂️. Excellent and clear tutorial. Thank you!
Glad to help!
If you enjoyed this one, check out all the other courses at the site: www.vuescreencasts.com/
I know, right?
Such an excellent video! Your explanations are so clear. This is the first time where I don't feel burned out in a 40min+ video tutorial. Thank you so much!
Thanks so much! That's great to hear.
There's even more tutorials on my site, if you're interested in more like this: www.vuescreencasts.com/courses
Authentication with Nuxt is one of the challenging works in the world.
it's designed to be mysterious.
Спасибо за урок. Никак не мог решить проблему с milddleware, но теперь все встало на свои места.
Thank you! I'm glad I could help.
Да, крутой канал похоже
I just discovered you channel, this is really the best nuxt auth tutorial I have seen on UA-cam!
This is waaaaaaaay more useful than the documentation. I kid. I understand that this is much more Cookbook but I honestly wouldn't have figured things out without this.
Best Nuxt tutorial I've seen so far!
Dude, it's an excellent video. Soothing voice, extensive and crystal clear explanations, troubleshooting common issues... You do it and you do it well. Keep up the good work & congratulations :-) Subscribed without the slightest hesitation
Thank you!
wonderful man , you are the most fantastic one who explain nuxt in easily way
Keep in mind that loginWith() for oauth2 strategies is changing window.location, so page is totally refreshed at that point and code execution aborts right after loginWith
Best Nuxt Auth video on UA-cam
what a perfect tutorial , saved me days ! thanks
Bravo! What ACL I use with nuxt Auth? Do You recommend som?
this video is AWESOME! my god, I understand ALL!!
Thx i will watch for the second time now, because is too good.
it was an awesome video thanks.
but it would be more awesome if you also have explained how are the requests to endpoints are handled in the backend too
Something very important that will help many users: If you dont need the USER endpoint for your api, just set the value to false.
e.g.
endpoints: { user: false, login: {...}, ... }
Hello, by the way... Did you made the backend server, with the /sessions, before in some video?
It does seem a bit mixed
Thanks for the tutorial. So far it is the best that I found many many thanks
Awesome explanetion and plugin
I wish this tutorial created a brand new Nuxt project and backend from scratch.
Without the backend to see exactly how it ties in it makes very little sense...
I love the way you speak
hah gaeee
hi, can you continue the auth nuxt tutorial with social login (facebook, gmail) from the backend? . Thanks
Agreed! Please do!
Excellent video, it help me a lot, I was working with just Vue but with Nuxt is better. Thank you so much for this great explanation.
Nice video, would have been nice to see what your backend code looks like
Good tutorial -- Thanks for your excellent video... One question, In this video, do you have API server, right? I see you put '/sessions/ in nuxt.js.conf .. Could you share your API server what does it do?
autoFetchUser isnt setting user as logged in. What response is expected? My api is returning status 200 with JSON formatted username / email. Is autoFetchUser looking for specific params to set user loggedin state?
awesome tut. Please keep going on making them!
It is helpful video for learner. Thank you so much
Links to other relevant videos:
Answering the most common question, about how the API endpoints work: ua-cam.com/video/S7Tunk-lXE0/v-deo.html
How to create the UserAuthForm: ua-cam.com/video/5kVThw0GQv4/v-deo.html
This comment will be updated if I record videos about social login, custom strategies, or refresh tokens.
Be sure to check out my site for even more videos and courses: www.vuescreencasts.com/
Very good video.
but I would have liked to know how you use the backend, I still don't understand much about how nuxt works.
the backend can be integrated within nuxt and not independently? or it is completely necessary that the backend and the frontend (nuxt) are deployed separately
de estar integrado estaría en la carpeta .nuxt?
Thanks
Excellent introduction
Thank you!
very valuable lesson thank you for taking the time to teach something :)
excellent tutorial and wonderful voice
This was great. Thank you.
Thanks for this. Amazing walkthrough
Thanks for the video, I learnt alot, is there a way to include 2 factor auth flow
Amazing ! Keep working !
Thank you!
What a great tutorial video!
never seen such a clear tutorial , hope they will add your video in their documentation.Please make something similar with firebase
#VueScreencasts
do you have the server side example?
Hi sir
How do I redirect users to another page after they log in?
Do you have any videos on this?
Thanks
Hi, I implemented a local strategy with @nuxt/auth and laravel sanctum as backend using the cookie instead of the token.
Everything seems to work great, but after I log in i am correctly redirected to the home / but if i reload the page the middleware: 'auth' redirects me to the login even if the $auth storage state: isLogged and user are correctly populated. It seems then that the redirects applies before the state is re-initialized after the page reload. Is this possible?
the user endpoint always causes a CORS error, but if i set it to 0, it does not. No other axios call causes an error other than the user endpoint. why?
Hi ! Excellent tutorial. However I have an issue with the 'user' endpoint. I'm using, for the backend, Django Rest Framework with JWT authentication, and the problem is to fetch user data, the API endpoint needs the username like this : "/profiles/". Is there a solution to set a custom name in nuxt auth endpoints ? hope someone can resolve this I'm stuck 😕thanks !
Excellent video! Great work.
Subscribed
Thanks!
Where in the video is the auth server with the /sessions endpoint explained?
Great video, thanks!
this is great! many thanks
Great tutorial, I spent almost a month dealing with auth issues where refreshing would make me lose the login session. Thanks. I wonder can we use the $auth with a magic link request?
Thank you for wonderful content! :)
I am wondering why in one of your video for multiple API call at the same time you used a third-party library name RSVP whilst axios was able to do it?
Hey! nice tutorials. best in all over the internet. Can you tell me after registration method you straight away put loginWith method to sign the user in but after clicking the register button, for a second the login page appears before signing the user in. can you please tell me why is it happening? thanks in advance
How do I set up the endpoints for this? Is there a good tool or video for a local setup? I am new to vue
To add auth and Axios in Nuxt app where are we supposed to execute the yarn/npm command? In VS code command line or general command prompt in laptop ? And to use yarn command in cmd, do I need to install something ?
Thanks for the tutorial. Subscribed!!!! :)
Thanks for the subscribe!
i don't understand why i haven't token and what is propertyName: 'data.attributes' in a user endpoint
(try step by step)
Those are responses from your backend. For example, /api/user/login - when success, may return an object with a « token » key and its value. This is the « propertyName » that Nuxt needs in its « strategies »
The user endpoint
user: { url: '/api/auth/user', method: 'get', propertyName: 'user' }
Note: propertyName: 'user' should match the response your user endpoint sends
Final note: In the video his response must have provided res.json({ data: 'SOMETHING ASSIGNED' } making it why he used user: { url: '/api/auth/user', method: 'get', propertyName: 'data.attributes' } like the video at (19:45 )
do you have a version for Nuxt 3?
The API for the next version of nuxt/auth is still in flux: auth.nuxtjs.org/status/
I'll want to at least wait until it's stabilized before making a followup
Its not yet compatible with nuxt 3. Should wait for now. It would be a nice content.
@@jeffrey_codes Not stable enough yet?
You save my day! Thanks!
Glad to help!
If you enjoyed this one, check out all the other courses at the site: www.vuescreencasts.com/
Hello, thank you so much for your videos. i just have a question, where can i find the good video or the components that you import "validation" form @/utils/validations. please. i followed all your video but i can't work in my computer because i don't have this element. thank you for your answer. i am sorry for my english, i do my best ^^.
Hi! Thank you so much for this video! It is very helpful!
However, in this example you are using the same API base url as your Nuxt app. In my case, I used external API then Nuxt auth returned CORS error.
probably resolved at this point in time, but the CORS error is most likely with your back end
Nice video, i have a question. In your nuxt.config.js, you have /sessions in your login endpoint, where is this sessions defined. I could not see them in your repo. Thx
/sessions is an API endpoint, so it will be defined by the backend, not the frontend
Hello. I love this tutorial but I would like to ask if there is a way to export all the user auth data to firebase authentication instead of the vuex store.
Wonderful! Super helpful. Thank you.
Is debugger a native function in Nuxt? Really good video, thank you.
Oh, it's, really really cool
Oh no the debugger is a feature from the browser itself. So this works with any framework. FYI: If you ever use node, you can attach node to the browser so you can use the same debugger tools which is pretty cool
Is auth module include backend-part or i must add other servermiddleware?
how to get auth token in axios? 🤔🤔
Please make video with social login also using Google auth !! Thanks for this video
how can I add params to the user enpoint im not even get token there how do I fetch user from user endpoint
do we called the logout function from backend?
any tutorial how create one?
Any idea whats the structure of the json returned by the "user" endpoint on the backend? I use a path like so: base_url/users/id. So im guessing the backend from the video expects the token as the id parameter? Or is it something else im doing wrong?
Very good tutorial, thanks.
I see you are using local storage on local development. But what will happen once we upload to Github pages or netlify? Where do the data gets saved?
Can we do CRUD operations different for each users? Please help.
hey Such a great tutorial but what is wrong with my project .
when log in it doesn't show up the user information at nav bar , it shows only after i reload the page.
Please help.
Has anyone told you that you look like Ben Solo from Star Wars? Nice tutorial too!
I am using django for my backend and I am getting a CORS error so idk if I made and error in the frontend or have to change something on the backend
This works with Nuxt 3?
auth nuxt tutorial with social login (facebook, gmail) from the backend? needed
Try firebase it will be much easier
my api returning token and user from login route there is no separate route for authenticated user how can i assign user
Thanks a lot, It helped me a lot.
great tutorial, thanks.
what if I want to redirect a user out of a page after something has happened, like a state change?
Hello, thanks for the video! I have a question: how can I add params to the user enpoint? I need the user url to be /users/:userId
how can I add params to the user enpoint
Send a data object like so =>
await this.$auth.loginWith("local", {
data: { "data you want to send")});
hopefully that makes sense
Great video. Do we need to use a middleware if using a subdomain approach? like amazon.com(for users) , sellers.amazon.com(for sellers), admin.amazon.com(for admins). Here users,sellers and admin have different fields and auth tokens and won't share anything except the fact that they are subdomains of amazon.com. What's the best approach here? I think it's better to use 3 different nuxt apps & point each to a particular subdomain somehow. Or is it better to create a single nuxt app and namespace each? It will be great if a video can be made on these topics if possible
If the only thing subdomains share is a domain name, then they're essentially different apps already. I don't see any benefit to doing them in one Nuxt app instead of multiple Nuxt apps.
@@jeffrey_codes Thank you for the clarification.
how can I add params to the user enpoint
Thanks for the great tutorial. I am actually implementing auth in my nuxt project but I came across with a problem. As I have all the information at the login end point I set the userfetch to false and I set the user manually at the time of login using ‘this.$auth.setuser’, everything is working fine but when I refresh the page user automatically set to null and the session logged out itself can u help me please…and I am not clear about the requirement of user endpoint..
For my project I'm using jwt and mongodb for auth.
i access the token via req.authorization
I.E (const token = req.headers.authorization),
NOte that authorization header is added to the request by nuxt-auth which is provided by the "api/auth/user" request and use that to fetch the user data after
Verifying the jwt token (const verifiedToken = jwt.verify(token, 'JWT_SECRET_YOU_USED_TO_SIGN')),
I then use the id stored in the token to find a user in my db matching that id if so
I.E (const checkUser = await User.findOne({ _id: verifiedToken.userId })) .
Then i pass the res.status(201).json({ user: checkUser })
The user endpoint
user: { url: '/api/auth/user', method: 'get', propertyName: 'user' }
Note: propertyName: 'user' should match the response your user endpoint sends
Final note: In the video his response must have provided res.json({ data: 'SOMETHING ASSIGNED' } making it why he used user: { url: '/api/auth/user', method: 'get', propertyName: 'data.attributes' } like the video at (19:45 )
Hope i was able to help provide some value and insight.
If you don't control your backend checkout his explanation here: ua-cam.com/video/S7Tunk-lXE0/v-deo.html
in which folder is the admin panel created? in client project or inside laravel project?
Thank you very much
Hi, can u auth without cookie in http header? I'm trying to SSR login state without cookie based sending data to server to figure out user.
Go to Settings> Play back speed> 2x
That's how I watch videos too! And if you go to my site, there's a 3x option as well. www.vuescreencasts.com/courses
@@jeffrey_codes Thank You, will keep that in mind.... 😂
best viewed in playback 1.5
Great tutorial. But after implementing it I came accros CORS preflight issues when server and client are on different domains :(
Is there anyway to make nuxt/auth to NOT use "Authorization" in header and keep the token in body instead? Otrherwise it sends preflights and fails
I think it would be good to have videos about testing in Nuxt.js.
How can we do multi-auth with laravel's guards as a SPA/API architecture???
It works with GraphQL (Urql) ?
Can I combine this with Nuxt apollo?
Thanks for the great lesson! How would you provide more details in the error handling for the user? I have an express backend and when I return res.status(402).send("error details") in the catch i get a generic 402 error message. However the "error details" do show up in the network response. I tried using the $auth.onError(handler) but I doubt I did it correctly. Anyway, i've been trying for a while, I thought I'd ask.
Hey I had a similar problem getting the error response. Found a line in the nuxt auth demos which shows using error.response.data in a regular .catch().
github.com/nuxt-community/auth-module/blob/61fb4dcb22e277aa6872607f7d17b584011f430d/demo/pages/login.vue#L178
how to use with nuxt 3 please create video
Great video. Actually how can we handle refresh token ?
That's a great question!
From what I've read, solutions without tools like Nuxt Auth are pretty complex. I imagine Nuxt Auth improves the process, but I'm not sure how much. Once the site is launched and I have time to fine-tune stuff, I'll look into it.
relevant github.com/nuxt-community/auth-module/pull/361
Excellent video! To support "sliding" token expiration our api returns a new token on every api request - how can I update the one stored by nuxt auth?