Nuxt Auth - Authentication and Authorization in NuxtJS

Поділитися
Вставка
  • Опубліковано 7 лис 2024

КОМЕНТАРІ • 241

  • @zeeeeeman
    @zeeeeeman 4 роки тому +14

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

    • @jeffrey_codes
      @jeffrey_codes  4 роки тому +2

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

    • @marvinkweyu5206
      @marvinkweyu5206 3 роки тому

      I know, right?

  • @valentim-aires
    @valentim-aires 4 роки тому +15

    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
      @jeffrey_codes  4 роки тому

      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

  • @majidzarrinkolah6176
    @majidzarrinkolah6176 4 роки тому +5

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

  • @АдамЯнг-у4е
    @АдамЯнг-у4е 4 роки тому +6

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

    • @jeffrey_codes
      @jeffrey_codes  4 роки тому +2

      Thank you! I'm glad I could help.

    • @MrLutor
      @MrLutor 4 роки тому

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

  • @yassinyoussoufali6324
    @yassinyoussoufali6324 3 роки тому

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

  • @lbmgary
    @lbmgary 4 роки тому

    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.

  • @iusting
    @iusting 3 роки тому +3

    Best Nuxt tutorial I've seen so far!

  • @BillyBobBonnet
    @BillyBobBonnet 4 роки тому +4

    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

  • @mah7moud1
    @mah7moud1 Рік тому

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

  • @paveltroev8221
    @paveltroev8221 4 роки тому +3

    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

  • @ilichpadilla2448
    @ilichpadilla2448 3 роки тому

    Best Nuxt Auth video on UA-cam

  • @omarimai7428
    @omarimai7428 Рік тому +1

    what a perfect tutorial , saved me days ! thanks

  • @RicardoLuizPinto
    @RicardoLuizPinto Рік тому

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

  • @osamita_bin
    @osamita_bin 2 роки тому

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

  • @FelipeOliveira-82
    @FelipeOliveira-82 3 роки тому

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

  • @ehsanesmaily4451
    @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

  • @theomegamale5335
    @theomegamale5335 4 роки тому

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

  • @xilass
    @xilass 3 роки тому +1

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

  • @reginaldokambinda3433
    @reginaldokambinda3433 3 роки тому

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

  • @alessandrobx5850
    @alessandrobx5850 3 роки тому

    Awesome explanetion and plugin

  • @akpokemon
    @akpokemon 4 роки тому +6

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

    • @theretroman3862
      @theretroman3862 4 роки тому +4

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

  • @ShahanurSharif
    @ShahanurSharif 4 роки тому +1

    I love the way you speak

  • @AnimeligeroHD
    @AnimeligeroHD 4 роки тому +9

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

  • @jorgebee65
    @jorgebee65 4 роки тому

    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
    @chrisalexvndr8659 3 роки тому

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

  • @aoddy
    @aoddy 3 роки тому +1

    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?

  • @Spartacus69
    @Spartacus69 4 роки тому +1

    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?

  • @concrete4054
    @concrete4054 4 роки тому +1

    awesome tut. Please keep going on making them!

  • @monalirana4228
    @monalirana4228 2 роки тому

    It is helpful video for learner. Thank you so much

  • @jeffrey_codes
    @jeffrey_codes  4 роки тому

    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/

  • @zabax
    @zabax 4 роки тому +1

    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

  • @HiramGuerrero
    @HiramGuerrero 4 роки тому +1

    Excellent introduction

  • @cnikolov
    @cnikolov 4 роки тому +3

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

  • @MrHtrlee
    @MrHtrlee 3 роки тому

    excellent tutorial and wonderful voice

  • @drftls
    @drftls 2 роки тому

    This was great. Thank you.

  • @RaymondAtivie
    @RaymondAtivie 4 роки тому

    Thanks for this. Amazing walkthrough

  • @emmanuelogoma2595
    @emmanuelogoma2595 Рік тому

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

  • @nathanyang3288
    @nathanyang3288 5 років тому +2

    Amazing ! Keep working !

  • @behzodjon
    @behzodjon 4 роки тому

    What a great tutorial video!

  • @vishavnegi2216
    @vishavnegi2216 4 роки тому

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

  • @CandraNurIhsan
    @CandraNurIhsan 4 роки тому +1

    do you have the server side example?

  • @pentenasher6878
    @pentenasher6878 3 роки тому +1

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

  • @fabiomangolini
    @fabiomangolini 4 роки тому +2

    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?

  • @MrWalalaa
    @MrWalalaa 4 роки тому +1

    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?

  • @arnotgh906
    @arnotgh906 4 роки тому +5

    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 !

  • @alexandros-markovits
    @alexandros-markovits 5 років тому +1

    Excellent video! Great work.
    Subscribed

  • @StAbyyyy
    @StAbyyyy 3 роки тому +1

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

  • @Yiosho
    @Yiosho 3 роки тому

    Great video, thanks!

  • @Hullu111
    @Hullu111 3 роки тому

    this is great! many thanks

  • @okhaeadeleye2386
    @okhaeadeleye2386 3 роки тому

    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?

  • @alisherxujanov2100
    @alisherxujanov2100 3 роки тому

    Thank you for wonderful content! :)

  • @hoseinmirian
    @hoseinmirian 2 роки тому

    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?

  • @tarunkmr145
    @tarunkmr145 3 роки тому

    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

  • @ganjamarcin
    @ganjamarcin 3 роки тому +1

    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

  • @pallavidonage2776
    @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
    @zenishshr 4 роки тому +2

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

  • @kolyan8490
    @kolyan8490 5 років тому +3

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

    • @acryliq
      @acryliq 4 роки тому

      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
      @NeniEmSu 4 роки тому

      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 )

  • @mel-182
    @mel-182 Рік тому

    do you have a version for Nuxt 3?

    • @jeffrey_codes
      @jeffrey_codes  Рік тому +1

      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

    • @mel-182
      @mel-182 Рік тому

      Its not yet compatible with nuxt 3. Should wait for now. It would be a nice content.

    • @tommika79
      @tommika79 Рік тому

      @@jeffrey_codes Not stable enough yet?

  • @ivomarsan
    @ivomarsan 4 роки тому +1

    You save my day! Thanks!

    • @jeffrey_codes
      @jeffrey_codes  4 роки тому

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

  • @marie-carolinenguyen6750
    @marie-carolinenguyen6750 3 роки тому

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

  • @lorimaydeguzman1110
    @lorimaydeguzman1110 4 роки тому +2

    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.

  • @iqazii
    @iqazii 4 роки тому

    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
      @jeffrey_codes  4 роки тому

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

  • @teniolafromtell4741
    @teniolafromtell4741 4 роки тому +1

    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.

  • @riyadabdur
    @riyadabdur 5 років тому +1

    Wonderful! Super helpful. Thank you.

  • @danielpassy5359
    @danielpassy5359 3 роки тому

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

    • @MultiPerplexedDude
      @MultiPerplexedDude 3 роки тому +1

      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?

  • @stylersito
    @stylersito 3 роки тому

    how to get auth token in axios? 🤔🤔

  • @mayurmali2694
    @mayurmali2694 3 роки тому

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

  • @vicky90890
    @vicky90890 4 роки тому +2

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

  • @fadilrahadiansyah4223
    @fadilrahadiansyah4223 2 роки тому

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

  • @superslash946
    @superslash946 2 роки тому

    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?

  • @ivan89pln
    @ivan89pln 4 роки тому +1

    Very good tutorial, thanks.

  • @surjithctly
    @surjithctly 4 роки тому

    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
    @pratiktheengtamang5464 4 роки тому

    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.

  • @dipteshchoudhuri
    @dipteshchoudhuri 4 роки тому

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

  • @deirdrechong623
    @deirdrechong623 3 роки тому

    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

  • @marciliojrr
    @marciliojrr Рік тому

    This works with Nuxt 3?

  • @csangale
    @csangale 4 роки тому +5

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

    • @xipepe
      @xipepe 3 роки тому +1

      Try firebase it will be much easier

  • @braintricker_soft
    @braintricker_soft 3 роки тому

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

  • @mamtachahal1277
    @mamtachahal1277 4 роки тому

    Thanks a lot, It helped me a lot.

  • @corear
    @corear 5 років тому +2

    great tutorial, thanks.

  • @hakanaki
    @hakanaki 2 роки тому

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

  • @jeremymendoza-spain-1342
    @jeremymendoza-spain-1342 4 роки тому +1

    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
      @vicky90890 4 роки тому

      how can I add params to the user enpoint

    • @Spartacus69
      @Spartacus69 4 роки тому

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

  • @abhilashvr007
    @abhilashvr007 4 роки тому +1

    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
      @jeffrey_codes  4 роки тому +1

      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
      @abhilashvr007 4 роки тому +2

      @@jeffrey_codes Thank you for the clarification.

  • @vicky90890
    @vicky90890 4 роки тому +2

    how can I add params to the user enpoint

  • @bisminshamh
    @bisminshamh 4 роки тому +2

    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
      @NeniEmSu 4 роки тому

      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
      @NeniEmSu 4 роки тому

      If you don't control your backend checkout his explanation here: ua-cam.com/video/S7Tunk-lXE0/v-deo.html

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

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

  • @miaohf
    @miaohf 3 роки тому

    Thank you very much

  • @soomtong
    @soomtong 3 роки тому

    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.

  • @AneesHameed
    @AneesHameed 4 роки тому +1

    Go to Settings> Play back speed> 2x

    • @jeffrey_codes
      @jeffrey_codes  4 роки тому

      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

    • @AneesHameed
      @AneesHameed 4 роки тому

      @@jeffrey_codes Thank You, will keep that in mind.... 😂

  • @sabmark
    @sabmark 3 роки тому

    best viewed in playback 1.5

  • @klukiyan
    @klukiyan 4 роки тому

    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

  • @stivenramirezarango7513
    @stivenramirezarango7513 4 роки тому

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

  • @josuebarros-desenvolvedorw2490
    @josuebarros-desenvolvedorw2490 3 роки тому

    How can we do multi-auth with laravel's guards as a SPA/API architecture???

  • @innovawebbe3141
    @innovawebbe3141 3 роки тому

    It works with GraphQL (Urql) ?

  • @jeno427
    @jeno427 3 роки тому

    Can I combine this with Nuxt apollo?

  • @garyhost612
    @garyhost612 4 роки тому

    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
      @IeuanLovett 4 роки тому +1

      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

  • @memeta100
    @memeta100 2 роки тому +1

    how to use with nuxt 3 please create video

  • @sanjaygyawali3600
    @sanjaygyawali3600 5 років тому +1

    Great video. Actually how can we handle refresh token ?

    • @jeffrey_codes
      @jeffrey_codes  5 років тому

      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.

    • @paolo-e-basta
      @paolo-e-basta 4 роки тому

      relevant github.com/nuxt-community/auth-module/pull/361

  • @KennethSolberg
    @KennethSolberg 4 роки тому

    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?