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!
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
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
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?
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: {...}, ... }
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 !
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?
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
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?
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.
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?
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 )
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
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?
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 ?
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.
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 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
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
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
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?
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.
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.
Hi, can you show me the links where i can learn to make a login form like component? at the 12 minute in this video, i see it use and i would like to learn to make it. Thanks.
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?
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
I can't get the token while login. I can only see the loading icon from the network from localhost:3000/sessions ! My nuxt.config.js same as yours and other methods are same as well. :(
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.
Hi, my every thing work fine. when I login it redirect home page fine but my home page js do not working properly. if I read load home page than work properly.
You can check out my video on validations, where we build out that file (the '@' symbol is a shortcut for the src folder). Or, you could check out the GitHub link in the description and copy the finished file.
I had to do `@@/utils/validations` which is like `../utils/validations` I have no idea how his code works because it should be searching for 'utils' folder within the 'components' folder, like mine was...(I had to fix by turning @ to @@)
hello bro can you make a video to we learn that how can we create server that you created in this project can you make a video for this we need this bro I'm searched every where I'm can not find the full process make that video please bro we need to learn this in vue-js and others also
Thanks for the tutorial!! They are super helpful. I'm using a graphql endpoint and my login method is working fine and creates a token in cookie and local storage. However, I'm not able to get $auth.user. I'm guessing that the user endpoint in the local strategy gets called automatically after the login call. Is that true? Any suggestions on how I can the rest of the login flow to work properly? I scoured the interwebs for a solutions but no luck so far. Just confusion.
Thanks! The first place I'd check is if your auth data is storing correctly in cookies or localstorage. Then I'd check that the /users endpoint is returning the data you want. If neither of those fix it, I'd look for more data that could provide clues as to what's happening.
@@jeffrey_codes None of those seem to be the issue. Everything is being stored correctly. It's working fine if I navigate to a page with the nuxt router.
I have this problem too. I searched the internet a lot but couldn't find anything about it. atuh module runs when page load is finished so fetch user (in auth settings in nuxt.config.js) operation is not done when reloading page ..... and middleware can't help
You can make sure that your token and your store remains after reloading, I used to have this issue till I discovered that, now I use vuex-persist to persist state in my app.
$auth.loggedIn = true. But still it is redirecting to /login page. Why ? I am using local login strategy. and it is returning the bearer token. How can i solve this ?
There's nothing wrong with you! The code, on the other hand... clearly something wrong. Check that you've got everything installed correctly, and that your console.log is in a place where this.$auth should be accessible.
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
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?
Authentication with Nuxt is one of the challenging works in the world.
it's designed to be mysterious.
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 tutorial I've seen so far!
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.
I just discovered you channel, this is really the best nuxt auth tutorial I have seen on UA-cam!
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!
Спасибо за урок. Никак не мог решить проблему с milddleware, но теперь все встало на свои места.
Thank you! I'm glad I could help.
Да, крутой канал похоже
wonderful man , you are the most fantastic one who explain nuxt in easily way
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?
hi, can you continue the auth nuxt tutorial with social login (facebook, gmail) from the backend? . Thanks
Agreed! Please do!
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: {...}, ... }
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 !
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?
Hello, by the way... Did you made the backend server, with the /sessions, before in some video?
It does seem a bit mixed
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?
Best Nuxt Auth video on UA-cam
what a perfect tutorial , saved me days ! thanks
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
Where in the video is the auth server with the /sessions endpoint explained?
this video is AWESOME! my god, I understand ALL!!
how can I add params to the user enpoint im not even get token there how do I fetch user from user endpoint
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
do you have the server side example?
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?
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.
Hi sir
How do I redirect users to another page after they log in?
Do you have any videos on this?
Thanks
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...
very valuable lesson thank you for taking the time to teach something :)
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?
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 )
Thx i will watch for the second time now, because is too good.
Bravo! What ACL I use with nuxt Auth? Do You recommend som?
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
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?
Thanks for the tutorial. So far it is the best that I found many many thanks
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 ?
Excellent video! Great work.
Subscribed
Thanks!
auth nuxt tutorial with social login (facebook, gmail) from the backend? needed
Try firebase it will be much easier
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 ^^.
awesome tut. Please keep going on making them!
Thanks for this. Amazing walkthrough
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
It is helpful video for learner. Thank you so much
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.
how can I add params to the user enpoint
Awesome explanetion and plugin
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 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
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
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
Is auth module include backend-part or i must add other servermiddleware?
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
do we called the logout function from backend?
any tutorial how create one?
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?
Thanks for the tutorial. Subscribed!!!! :)
Thanks for the subscribe!
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.
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
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.
Hi, can you show me the links where i can learn to make a login form like component? at the 12 minute in this video, i see it use and i would like to learn to make it. Thanks.
from where are you gettig loginInfo and registerInfo
in which folder is the admin panel created? in client project or inside laravel project?
please can you tell me how can we create custom strategies? I wan to add two endpoints one for admin login and second one for client login
Check out the Schemes feature and see if it does what you're looking for: auth.nuxtjs.org/guide/scheme.html
How can we do multi-auth with laravel's guards as a SPA/API architecture???
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?
excellent tutorial and wonderful voice
what if I want to redirect a user out of a page after something has happened, like a state change?
Thanks for the video, I learnt alot, is there a way to include 2 factor auth flow
my api returning token and user from login route there is no separate route for authenticated user how can i assign user
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
18:12
I am getting error:
Uncaught (in promise) TypeError: Cannot use 'in' operator to search for 'token' in
...
at getProp (utilities.js?a459:100)
at eval (auth.js?facc:278)
...
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
I can't get the token while login. I can only see the loading icon from the network from localhost:3000/sessions ! My nuxt.config.js same as yours and other methods are same as well. :(
Thank you for wonderful content! :)
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.
Hi, my every thing work fine. when I login it redirect home page fine but my home page js do not working properly. if I read load home page than work properly.
Where do I install utils/validations for import validations from "@/utils/validations"; in the UserAuthForm component ?
You can check out my video on validations, where we build out that file (the '@' symbol is a shortcut for the src folder).
Or, you could check out the GitHub link in the description and copy the finished file.
I had to do
`@@/utils/validations`
which is like
`../utils/validations`
I have no idea how his code works because it should be searching for 'utils' folder within the 'components' folder, like mine was...(I had to fix by turning @ to @@)
Thanks. Can you make for passport laravel. There is not any info about it. Thanks a lot
never seen such a clear tutorial , hope they will add your video in their documentation.Please make something similar with firebase
#VueScreencasts
hello bro can you make a video to we learn that how can we create server that you created in this project
can you make a video for this we need this bro I'm searched every where I'm can not find the full process
make that video please bro we need to learn this in vue-js and others also
Thanks for the tutorial!! They are super helpful. I'm using a graphql endpoint and my login method is working fine and creates a token in cookie and local storage. However, I'm not able to get $auth.user. I'm guessing that the user endpoint in the local strategy gets called automatically after the login call. Is that true? Any suggestions on how I can the rest of the login flow to work properly? I scoured the interwebs for a solutions but no luck so far. Just confusion.
Nice video, would have been nice to see what your backend code looks like
I love the way you speak
hah gaeee
how to get auth token in axios? 🤔🤔
This was great. Thank you.
Great tutorial! Can you explain why I when I refresh the page on a guarded page I am redirected to the login page even when I'm logged in?
Thanks!
The first place I'd check is if your auth data is storing correctly in cookies or localstorage. Then I'd check that the /users endpoint is returning the data you want.
If neither of those fix it, I'd look for more data that could provide clues as to what's happening.
@@jeffrey_codes None of those seem to be the issue. Everything is being stored correctly. It's working fine if I navigate to a page with the nuxt router.
@@jackmaison4209 As I said, my next move would be to look for more clues. "It doesn't work" is not nearly enough information to go on.
I have this problem too. I searched the internet a lot but couldn't find anything about it.
atuh module runs when page load is finished so fetch user (in auth settings in nuxt.config.js) operation is not done when reloading page ..... and middleware can't help
You can make sure that your token and your store remains after reloading, I used to have this issue till I discovered that, now I use vuex-persist to persist state in my app.
$auth.loggedIn = true. But still it is redirecting to /login page. Why ? I am using local login strategy. and it is returning the bearer token. How can i solve this ?
how to use with nuxt 3 please create video
Excellent introduction
Thank you!
What a great tutorial video!
Amazing ! Keep working !
Thank you!
I have a question, if a don´t have api for logout endopoint, how can i configurate this method or how can i create one for my app? thanks!
You can set logout endpoint to false in your nuxt.config, and then it shouldn't send out an API call.
Anyone know why every api calling twice like login ,register or other stuff from server in console?
It works with GraphQL (Urql) ?
Can I combine this with Nuxt apollo?
hw do you know if your user is an admin?! or how are you setting them as admin?
what's you return for user endpoint?
on the login page i have to put
auth: 'guest'
and it is working when $auth.loggedIn is true and redirecting to / page
I have try like your tutorial. But in code when console.log(this.$auth) is undefined. What is wrong with me?
There's nothing wrong with you!
The code, on the other hand... clearly something wrong. Check that you've got everything installed correctly, and that your console.log is in a place where this.$auth should be accessible.