Nuxt Auth - Authentication and Authorization in NuxtJS

[@zeeeeeman]

I spent all evening doing Nuxt registration. I wish I had've spotted this video sooner. 🤦🏻‍♂️. Excellent and clear tutorial. Thank you!

[@jeffrey_codes]

Glad to help! If you enjoyed this one, check out all the other courses at the site: www.vuescreencasts.com/

[@marvinkweyu5206]

I know, right?

[@valentim-aires]

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!

[@jeffrey_codes]

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

[@jeffrey_codes]

Links to other relevant videos: Answering the most common question, about how the API endpoints work: kzbin.info/www/bejne/iWi3pqGhYtGLe5I How to create the UserAuthForm: kzbin.info/www/bejne/a5y5hZutZayErJY 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/

[@majidzarrinkolah6176]

Authentication with Nuxt is one of the challenging works in the world. it's designed to be mysterious.

[@yassinyoussoufali6324]

I just discovered you channel, this is really the best nuxt auth tutorial I have seen on KZbin!

[@BillyBobBonnet]

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

[@jeffrey_codes]

Thank you!

[@lbmgary]

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.

[@АдамЯнг-у4е]

Спасибо за урок. Никак не мог решить проблему с milddleware, но теперь все встало на свои места.

[@jeffrey_codes]

Thank you! I'm glad I could help.

[@MrLutor]

Да, крутой канал похоже

[@paveltroev8221]

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

[@iusting]

Best Nuxt tutorial I've seen so far!

[@akpokemon]

I wish this tutorial created a brand new Nuxt project and backend from scratch.

[@theretroman3862]

Without the backend to see exactly how it ties in it makes very little sense...

[@mah7moud1]

wonderful man , you are the most fantastic one who explain nuxt in easily way

[@ilichpadilla2448]

Best Nuxt Auth video on KZbin

[@ehsanesmaily4451]

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

[@AnimeligeroHD]

hi, can you continue the auth nuxt tutorial with social login (facebook, gmail) from the backend? . Thanks

[@thorvaldresearch1093]

Agreed! Please do!

[@Spartacus69]

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?

[@theomegamale5335]

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: {...}, ... }

[@zabax]

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

[@aoddy]

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?

[@omarimai7428]

what a perfect tutorial , saved me days ! thanks

[@fabiomangolini]

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?

[@arnotgh906]

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 !

[@MrWalalaa]

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?

[@osamita_bin]

this video is AWESOME! my god, I understand ALL!!

[@RicardoLuizPinto]

Bravo! What ACL I use with nuxt Auth? Do You recommend som?

[@hoseinmirian]

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?

[@xilass]

Hello, by the way... Did you made the backend server, with the /sessions, before in some video?

[@JohnBiddulph]

It does seem a bit mixed

[@alessandrobx5850]

Awesome explanetion and plugin

[@pentenasher6878]

Hi sir How do I redirect users to another page after they log in? Do you have any videos on this? Thanks

[@jorgebee65]

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.

[@chrisalexvndr8659]

Nice video, would have been nice to see what your backend code looks like

[@marie-carolinenguyen6750]

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 ^^.

[@FelipeOliveira-82]

Thx i will watch for the second time now, because is too good.

[@StAbyyyy]

Where in the video is the auth server with the /sessions endpoint explained?

[@ganjamarcin]

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

[@okhaeadeleye2386]

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?

[@reginaldokambinda3433]

Thanks for the tutorial. So far it is the best that I found many many thanks

[@teniolafromtell4741]

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.

[@concrete4054]

awesome tut. Please keep going on making them!

[@csangale]

auth nuxt tutorial with social login (facebook, gmail) from the backend? needed

[@xipepe]

Try firebase it will be much easier

[@tarunkmr145]

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

[@cnikolov]

very valuable lesson thank you for taking the time to teach something :)

[@superslash946]

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?

[@emmanuelogoma2595]

Thanks for the video, I learnt alot, is there a way to include 2 factor auth flow

[@Сибирскийвидеоблог]

Is auth module include backend-part or i must add other servermiddleware?

[@HiramGuerrero]

Excellent introduction

[@jeffrey_codes]

Thank you!

[@alexandros-markovits]

Excellent video! Great work. Subscribed

[@jeffrey_codes]

Thanks!

[@dipteshchoudhuri]

Has anyone told you that you look like Ben Solo from Star Wars? Nice tutorial too!

[@monalirana4228]

It is helpful video for learner. Thank you so much

[@surjithctly]

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.

[@pratiktheengtamang5464]

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.

[@lorimaydeguzman1110]

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.

[@kerodfresenbetgebremedhin1881]

probably resolved at this point in time, but the CORS error is most likely with your back end

[@klukiyan]

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

[@kolyan8490]

i don't understand why i haven't token and what is propertyName: 'data.attributes' in a user endpoint (try step by step)

[@acryliq]

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 »

[@NeniEmSu]

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 )

[@MrHtrlee]

excellent tutorial and wonderful voice

[@vicky90890]

how can I add params to the user enpoint im not even get token there how do I fetch user from user endpoint

[@vishavnegi2216]

never seen such a clear tutorial , hope they will add your video in their documentation.Please make something similar with firebase #VueScreencasts

[@RaymondAtivie]

Thanks for this. Amazing walkthrough

[@KennethSolberg]

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?

[@ShahanurSharif]

I love the way you speak

[@thenoja176]

hah gaeee

[@iqazii]

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

[@jeffrey_codes]

/sessions is an API endpoint, so it will be defined by the backend, not the frontend

[@ecofriend93]

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.

[@pallavidonage2776]

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 ?

[@zenishshr]

Thanks for the tutorial. Subscribed!!!! :)

[@jeffrey_codes]

Thanks for the subscribe!

[@CandraNurIhsan]

do you have the server side example?

[@garyhost612]

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.

[@IeuanLovett]

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

[@atangtuan9522]

wonderful content! Thank you very much!!!

[@drftls]

This was great. Thank you.

[@abhilashvr007]

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

[@jeffrey_codes]

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.

[@abhilashvr007]

@@jeffrey_codes Thank you for the clarification.

[@jhonjamesmontano2987]

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.

[@mayurmali2694]

Please make video with social login also using Google auth !! Thanks for this video

[@КириллБелоусов-ы5е]

in which folder is the admin panel created? in client project or inside laravel project?

[@stivenramirezarango7513]

I think it would be good to have videos about testing in Nuxt.js.

[@behzodjon]

What a great tutorial video!

[@alisherxujanov2100]

Thank you for wonderful content! :)

[@deirdrechong623]

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

[@jeremymendoza-spain-1342]

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

[@vicky90890]

how can I add params to the user enpoint

[@Spartacus69]

Send a data object like so => await this.$auth.loginWith("local", { data: { "data you want to send")}); hopefully that makes sense

[@nathanyang3288]

Amazing ! Keep working !

[@jeffrey_codes]

Thank you!

[@vicky90890]

how can I add params to the user enpoint

[@binoysarker903]

$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 ?

[@bisminshamh]

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..

[@NeniEmSu]

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.

[@NeniEmSu]

If you don't control your backend checkout his explanation here: kzbin.info/www/bejne/iWi3pqGhYtGLe5I

[@ahmedtareque6411]

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. :(

[@braintricker_soft]

my api returning token and user from login route there is no separate route for authenticated user how can i assign user

[@plebedesign5135]

hello... how can we set multiple strategies and endpoints for User and Admin ???

[@jackmaison4209]

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?

[@jeffrey_codes]

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.

[@jackmaison4209]

@@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.

[@jeffrey_codes]

@@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.

[@mohammadaminpasban5691]

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

[@timiomoyeni876]

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.

[@Hullu111]

this is great! many thanks

[@fadilrahadiansyah4223]

do we called the logout function from backend? any tutorial how create one?

[@danielpassy5359]

Is debugger a native function in Nuxt? Really good video, thank you. Oh, it's, really really cool

[@MultiPerplexedDude]

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

[@riyadabdur]

Wonderful! Super helpful. Thank you.

[@hakanaki]

what if I want to redirect a user out of a page after something has happened, like a state change?

[@sukurullasheikh3301]

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

[@shahzodcodes]

from where are you gettig loginInfo and registerInfo

[@huyhoangchanel]

I have try like your tutorial. But in code when console.log(this.$auth) is undefined. What is wrong with me?

[@jeffrey_codes]

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.

[@stylersito]

how to get auth token in axios? 🤔🤔

[@akzhanbolat3975]

Thanks. Can you make for passport laravel. There is not any info about it. Thanks a lot

[@TimMurko]

Where do I install utils/validations for import validations from "@/utils/validations"; in the UserAuthForm component ?

[@jeffrey_codes]

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.

[@akpokemon]

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 @@)

[@akpokemon]

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) ...

[@soomtong]

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.

[@Mohammadhassan_wd]

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.

[@ivomarsan]

You save my day! Thanks!

[@jeffrey_codes]

Glad to help! If you enjoyed this one, check out all the other courses at the site: www.vuescreencasts.com/