Nuxt Auth - Authentication and Authorization in NuxtJS

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

КОМЕНТАРІ • 241

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

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

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

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

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

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

    Best Nuxt tutorial I've seen so far!

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

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

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

  • @BillyBobBonnet
    @BillyBobBonnet 5 років тому +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

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

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

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

      Thank you! I'm glad I could help.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Best Nuxt Auth video on UA-cam

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

    what a perfect tutorial , saved me days ! thanks

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

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

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

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

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

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

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

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

    do you have the server side example?

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

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

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

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

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

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

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

    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?

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

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

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

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

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

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

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

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

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

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

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

    Excellent video! Great work.
    Subscribed

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

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

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

    awesome tut. Please keep going on making them!

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

    Thanks for this. Amazing walkthrough

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

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

    It is helpful video for learner. Thank you so much

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

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

    how can I add params to the user enpoint

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

    Awesome explanetion and plugin

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

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

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

    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

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

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

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

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

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

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

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

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

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

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

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

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

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

    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.

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

    from where are you gettig loginInfo and registerInfo

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

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

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

    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

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

      Check out the Schemes feature and see if it does what you're looking for: auth.nuxtjs.org/guide/scheme.html

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

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

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

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

    excellent tutorial and wonderful voice

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

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

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

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

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

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

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

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

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

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

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

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

    Thank you for wonderful content! :)

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

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

    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.

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

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

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

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

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

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

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

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

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

    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

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

    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.

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

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

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

    I love the way you speak

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

    how to get auth token in axios? 🤔🤔

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

    This was great. Thank you.

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

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

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

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

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

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

      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.

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

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

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

    how to use with nuxt 3 please create video

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

    Excellent introduction

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

    What a great tutorial video!

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

    Amazing ! Keep working !

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

    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!

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

      You can set logout endpoint to false in your nuxt.config, and then it shouldn't send out an API call.

  • @sam-rq3cq
    @sam-rq3cq 4 роки тому

    Anyone know why every api calling twice like login ,register or other stuff from server in console?

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

    It works with GraphQL (Urql) ?

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

    Can I combine this with Nuxt apollo?

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

    hw do you know if your user is an admin?! or how are you setting them as admin?

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

    what's you return for user endpoint?

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

    on the login page i have to put
    auth: 'guest'
    and it is working when $auth.loggedIn is true and redirecting to / page

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

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

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

      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.