Next-Auth V5 Tutorial (OAuth, Email, Server Actions, Server-Side Auth, Client-Side Auth, Roles)

Поделиться
HTML-код
  • Опубликовано: 23 ноя 2024

Комментарии • 183

  • @tabishnaqvi5748
    @tabishnaqvi5748 5 месяцев назад +7

    i really like how you not only explained it all extremely well, but also emphasised on the optimisation techniques

  • @vnxcius
    @vnxcius 3 месяца назад +2

    Hey man I never comment in videos, but you saved me from a pain in the ass that is to understand the docs from auth.js. Thank you a lot, much love from brazil.

  • @bhargavkumar
    @bhargavkumar 7 месяцев назад +18

    Your channel is like one stop solution for everything Next.js💖💖

  • @potantirittisak8494
    @potantirittisak8494 2 месяца назад

    Probably the best up-to-date NextAuth tutorial right now! Thank you! 🙏

  • @CarstenHessdk
    @CarstenHessdk 21 час назад

    Nice work! Good pace and detail. If you ever redo it, you could include something more around signing up. I guess most sites would not allow a sign-in from e.g. Google before actually having signed up as a user to the site.

  • @senselessplays
    @senselessplays 7 месяцев назад +9

    Project with Next js, mongoDB with or without prisma,next auth,files upload using uploadthing ,and so on ❤

  • @mnhtada12
    @mnhtada12 7 месяцев назад +2

    You know I was stuck in next auth , and I was hoping you to make a video about it , now u did it 😍😍😍
    Thank you sooo much u deserve more support 👏🌹

  • @sajadmalik9097
    @sajadmalik9097 5 месяцев назад

    There are a lots of videos showing how to use Next-Auth in nextjs. I really find it hard to search for a videos which will tell you how to use NextAuth with a seperate backend. Please make a video on that it will be really cool.

    • @codinginflow
      @codinginflow  5 месяцев назад

      I don't think next-auth is meant to be used with a different backend

  • @manofhat676
    @manofhat676 Месяц назад

    Best tutorial so far for NextAuth and next14, it'll be apprciated if you can do a tutorial on how to use NextAuth with external api

  • @Jaco_codeeza
    @Jaco_codeeza 2 месяца назад

    Just want to say, you the best youtuber MR Florian

  • @ArdinLalui
    @ArdinLalui Месяц назад

    For me the middleware still doesn't work in October 2024. Is this the case for everyone else too?
    Thanks Florian for great content.

  • @henryokeke1858
    @henryokeke1858 5 месяцев назад

    I kept having wow moments while watching this tutorial. Remarkable resource. Keep it up and Thank you

  • @developedbynick
    @developedbynick 7 месяцев назад +1

    Hey. I'm fairly new to nextJS. However in a traditional express server with Mongoose, you could specify the data to be passed to the create method on the Model, but with next-auth, I see that auth js interacts with the database itself, but I'd like my data to follow a specific shape. Is it possible to do this with next-auth?

  • @alfredmadere9030
    @alfredmadere9030 3 месяца назад

    Genuinely a fantastic video, subscribed. Would you be willing to cover how to wrap a route in auth() as shown in the docs?

  • @tushswe
    @tushswe 7 месяцев назад

    Yeeeeahhh , I really needed this, I've been stuck trying to update a project from v4 for 2 weeks

    • @JGriffin1410
      @JGriffin1410 5 месяцев назад

      I'm in the same situation, though i can't pass adapter to prisma client

  • @Jaco_codeeza
    @Jaco_codeeza 2 месяца назад

    Hi Florian. Was wondering if you could maybe make a tutorial with 4 different authentication roles in Authjs. One login form that redirect each of the four users to a different panel. I'm really struggling with this and only follow your coding style. If it's possible can you do that for us please. I really want to learn that

  • @bored_sage
    @bored_sage Месяц назад

    in this tutorial you used Neon serverless what if we want to use postgres on docker how would that work for edge compatibility. I tried neon package it didnt work

  • @rifky8966
    @rifky8966 6 месяцев назад

    The video tutorials are great because they are structured based on the official documentation.
    In the future, if you are willing, can you create a next-auth-v5 that connects to the dashboard to do CRUD?
    Thanks in advance🙌

  • @vronus007
    @vronus007 2 месяца назад

    when I run npx prisma db push, all my other tables inside my database are dropped. How can initiate or update the schema and still keep the tables? I have researched that prisma migrate or prisma deploy might solve this, but the docs have been a little too confusing to me so far. I am afraid to try different approaches out because I dont want to risk losing my tables and data.
    Great tutorial, thanks a lot!

  • @Testmutl
    @Testmutl 4 месяца назад

    I love the Open Sourece Project videos please continue the videos

  • @fadilnatakusumah195
    @fadilnatakusumah195 14 дней назад

    lol for now on my pronounce would be Async/Await too. Great video, my dude

  • @perspectivelevel7969
    @perspectivelevel7969 5 месяцев назад

    First of all, excellent video and excellent explanation, very clarifying... I consult, I am currently using drizzle with pg which does not allow me to use the middleware due to the edge runtime, is it possible to use the node runtime to be able to deploy the proyect and db on local or private vps? thank you

  • @thewiseowlclub8602
    @thewiseowlclub8602 6 месяцев назад

    best video on Next Auth BY FAR 🔥 well done bro

  • @_hugo_cruz
    @_hugo_cruz 7 месяцев назад

    Thanks for this Florian, it has been very interesting, it would be great when everything is stable to update it and could also add the login with email and traditional password. Also I would like you to show at some point how you do the migrations from Prisma to Vercel, I have not been able to make it work. Blessings to the channel and I always recommend it for the quality content it has.

  • @BlueHat1
    @BlueHat1 6 месяцев назад +1

    What an incredible tutorial!

  • @user-lq1cs
    @user-lq1cs 6 месяцев назад

    thankyou for this really helpful tutorial for my journey to master next js! 34:41 caught me off guard 😂😂😂

  • @zeeeeeman
    @zeeeeeman 5 месяцев назад

    hmmm create t3 app side-steps a lot of this. But still a great video none the less.
    nit: `prisma generate` 1:07:54 - surely TS will see the updated schema rather than rolling your own.

  • @darksitopx
    @darksitopx 7 месяцев назад +1

    Your content is quite an experience, I know that what I will say next may not be correct, because your content is free, I am from LATAM and the English language is not my thing so I use an extension to translate your videos, but This translator or the subtitles on RUclips are only available until 3 or 4 hours into the video, then I can no longer translate and I have difficulty following the video, perhaps cutting the videos into sections would be good.

  • @Jaco_codeeza
    @Jaco_codeeza 2 месяца назад

    Hey Florian. When you have time, can you create an app with different user roles. For example, when a user login then depending on the role of the user, he will be redirected to the relevant path. Would be highly appreciated.

    • @Jaco_codeeza
      @Jaco_codeeza 2 месяца назад

      Maybe with Lucia. If you can

  • @kemmouneismail3087
    @kemmouneismail3087 6 месяцев назад

    can you please make a video about adding scopes to the Oauth providers to get access to more user data? I tried some old next-auth solutions, but it seems they don't work

  • @dan327
    @dan327 7 месяцев назад +1

    Would love to see a Next.js project which utilizes BLOB storage, maybe like a simple video/audio sharing platform!

  • @Leesdjo
    @Leesdjo 7 месяцев назад +2

    The best channel I ever had. I appreciate you for the special work you are doing. Thank you.

    • @zatakzataks
      @zatakzataks 4 месяца назад

      Bro you save my time thanks for it

  • @theintjengineer
    @theintjengineer 7 месяцев назад

    Please, add credentials provider.
    Also, can you refactor the project to use drizzle ORM, so that there's a project version using Drizzle?
    You could even have it as another Github branch.
    Cheers🙌

  • @hatredguy
    @hatredguy 2 месяца назад

    Nice video. You use neon as your database provider, can I use Supabase as mine.? And make the changes for it to work still

  • @muratasarslan2359
    @muratasarslan2359 4 месяца назад

    very well orginized & easy to follow along. Thank you for effort. Would love to see Drizzle version tough 😃

  • @soma7891
    @soma7891 5 месяцев назад

    Can you -please- tell me what do you use the create your thumbnails and edit your videos?

  • @zainn7336
    @zainn7336 2 месяца назад

    sir i am cureently learning golang which is suitable for large scale backend apps. Since authentication and authorization is handle through frontend (next-auth,) and mutation through actions.then how we protect our custom backend like in this case is golang also why we need extra backend since everything is happen using next auth and frontend next

  • @MrPivario
    @MrPivario 6 месяцев назад

    Thank you for the great content , i got problems with next auth and keycloack , could you please do a video in this context?

  • @dosamuel-mb
    @dosamuel-mb 7 месяцев назад

    This is why i love this channel. Thank you so much for your work, you deserve more subscription

  • @CodeGamerProgene
    @CodeGamerProgene 5 месяцев назад

    Great video!
    What's the best approach when nestJS/ExpressJS or any other separate server with NextJS?
    I want to maintain the same authentication architecture.

    • @codinginflow
      @codinginflow  5 месяцев назад

      I use PassportJS for auth with Express

  • @Vagabondi404
    @Vagabondi404 7 месяцев назад +1

    Great I was looking to use Next Auth in my new project maybe

  • @marishwarannadar5323
    @marishwarannadar5323 6 месяцев назад

    Great Explaination, One question does the request gets duplicated if we switch to client side authentication when using SessionProvider?

    • @codinginflow
      @codinginflow  6 месяцев назад

      The server and client requests are separate

  • @ElohimCode
    @ElohimCode 7 месяцев назад

    Thanks for this tutorial, although I've been looking for a hands on refreshtoken. If perhaps you can do a part 2 on this feature.

  • @csma212
    @csma212 2 месяца назад

    Thank you so much, that's was helpful for me, very well explained. ❤

  • @2pacrapempire866
    @2pacrapempire866 7 месяцев назад

    Bigman, this is incredible. Thank you for this. Learnt a lot.

  • @fixesdev
    @fixesdev 5 месяцев назад

    Thank you for your video! keep the good work coming

  • @ts3798
    @ts3798 6 месяцев назад

    Thank you very much for the tutorial. One question, is there a reason that you use uppercase String for the role in the declaration file?

    • @codinginflow
      @codinginflow  6 месяцев назад

      No I was confused by this myself lol. I think it doesn't matter.

    • @ts3798
      @ts3798 6 месяцев назад

      @@codinginflow Ok, thanks.

  • @fismael21
    @fismael21 7 месяцев назад

    Hi, great video. Just one question. What happened with your Android's Studio tutorials?

    • @codinginflow
      @codinginflow  7 месяцев назад

      There will be no more Android content on this channel (or any of my social media channels)

  • @SachiAkira
    @SachiAkira 5 месяцев назад

    Hi, I have a small question, does this work with Pages Router? Thanks in advance.

  • @abdelrahmanmagdy3706
    @abdelrahmanmagdy3706 7 месяцев назад

    You are always the best .. appreciate your time and efforts making these great videos ❤

  • @kartavyabagga
    @kartavyabagga 6 месяцев назад

    bro i get WEBPACK_EXPORT_DEFAULT error ...authconfig before initialization .when i write
    const session = await auth(); in any server action
    What can be done ?

  • @xxxkadal2162
    @xxxkadal2162 7 месяцев назад

    Great tutorials! anyway is there a plan for you to make an tutorial about making a dashboard page that use many library like 'Highchart' for displaying analytical data?

  • @benemma5602
    @benemma5602 6 месяцев назад

    what if I wanted to use a custom email provider for magic links e.g AWS SES?

  • @it22maticramerrjr6
    @it22maticramerrjr6 4 месяца назад

    good morning sir, i just want to ask why i got this error when i trying to deploy my application on vercel. i follow all the setup the you made vercel gave me this error
    Error: Page "/api/auth/[...nextauth]" is missing "generateStaticParams()" so it cannot be used with "output: export" config.

    • @it22maticramerrjr6
      @it22maticramerrjr6 4 месяца назад

      i already answered this problem, i don't no why but i think the github action generate a .yml file that generate a static next js application and because of that when we deploy our application on vercel it will failed on the configuration becuase our next js application used dynamic routes but yml create a static next js application

  • @jayadityag7670
    @jayadityag7670 5 месяцев назад

    Hey, would love to have a tutorial on Firebase, it will help in my hackathons... thx

  • @eliasshemsu5853
    @eliasshemsu5853 4 месяца назад

    This was a great tutorial! Thanks!

  • @Raj-lb3qh
    @Raj-lb3qh 4 месяца назад

    Sir how you upload file in next js plz brig a video on this topic

  • @SamyIsaac-md8go
    @SamyIsaac-md8go 6 месяцев назад

    really appreciate your work , great tutorial😍😍

  • @BegalInsaf
    @BegalInsaf 6 месяцев назад

    i have the problem, if you run the build productions in local computer, the session speed is lightning fast, but in vercel this is take like about 4-5s to get session in every page

    • @codinginflow
      @codinginflow  6 месяцев назад

      This might be caused by the middleware bug I was talking about. Delete the middleware (or rename it) and let me know if it's still slow.

  • @2kceltics
    @2kceltics 6 месяцев назад

    Ive been working on your tutorial but I only use mongodb, I created mongoose models compatible with auth.js docs and I had to create a mongoclient adapter and extend globals type for mongoose compatibility, everything are running well after all... If you want I could fork my final project in a new branch into your repo.

    • @DailyNevFacts
      @DailyNevFacts 6 месяцев назад

      Hey man, I have been having issues on a separate project . I see you have been using adapters for auth js. I am trying to run an adapter for a login in and register form. The form allows users to sign in with google but this will not work. Any ideas?

    • @2kceltics
      @2kceltics 6 месяцев назад

      @@DailyNevFacts this is Florian channel not mine I can't help you unless he allow me to upload my project to his repo in github. 😞

  • @tobitacklestech
    @tobitacklestech 7 месяцев назад +1

    Im getting MissingAdapter when trying to use Resend (I use DrizzleAdapter
    ) any help?

  • @Tej_Dev
    @Tej_Dev 6 месяцев назад

    The Edge Function "middleware" size is 1 MB and your plan size limit is 1 MB. why am i getting this error while deploying the project in Vercel? Can anyone help me

  • @-buzziness
    @-buzziness 3 месяца назад

    hello I got an issue with settingsPage , the error said "PrismaClient is unable to run in this browser environment"

  • @kubilaybzk
    @kubilaybzk 7 месяцев назад

    İf we want to set a jwt token ( which comes on the backend api request )
    How we can do that ?
    I mean how we can set expire time and token with nextAuth?
    I want to expired the token backend's token expired.

  • @RamaGuptaOfficial
    @RamaGuptaOfficial 17 дней назад

    Thank You Man! For this Video

  • @ilan117
    @ilan117 5 месяцев назад

    I would not use “if (!user) ...". to protect the user page because one could still reach out to the user page giving the user id and access the user data. I would use "if (!session?.user) ..." or add it as a 1st condition. What do you think ?

    • @codinginflow
      @codinginflow  5 месяцев назад

      Which part do yo you mean exactly? If it's rendered on the server, it should be safe.

    • @ilan117
      @ilan117 5 месяцев назад

      sorry my bad … if anyone can access the user page without being logged in then it’s fine. I was heading to allow the access to this page only if a user is logged in.

  • @TesterHs
    @TesterHs 6 месяцев назад

    Hi developer i have qst , i made a external api with Laravel for Oauth providers and it give me the data user I want to know is i can set session to server from client or not , thanks advanced 😊

  • @robinkantyadav3344
    @robinkantyadav3344 6 месяцев назад

    Hello this is my request to you that can you tell me how can i make my css folder of next js project accessable to googlebot.
    Actully problem is that when i make project static build the css file is saved under a private folder and so google bot ignore that file when taking screenshot of my webpage (caching) google bot only take only html file so can you pls help me that what should i do.

  • @Aekaay
    @Aekaay 7 месяцев назад +1

    it does not work for me unless i specify google client id and secret in auth config

    • @mDHARYL
      @mDHARYL 6 месяцев назад +1

      Of course you need to add your own Google client id

  • @mleite1
    @mleite1 7 месяцев назад

    Im having a problem with the session callback.. it runs multiple times. So if i want to save something at database there, it's doing 4x times. Couldn't find a solution to this

    • @codinginflow
      @codinginflow  7 месяцев назад

      It's probably not the right place to store something n your DB

  • @techtips6968
    @techtips6968 5 месяцев назад

    This is excellent work. I really appreciate you shared with us. Can you please add server side authentication ie sign up and sign in using email and password?

  • @Prag1974
    @Prag1974 6 месяцев назад

    Hi Man. Great content. Thanks. But I have a problem: I want to use session based authentication strategy (as you know jwt is little bit unsafe) and I also credentials provider. When I adjust credentials provider in auth.ts and other files, next auth throwing error something like " 'session': 'database' strategy doesn't support credentials provider" is there any way to fix it? if not, can you suggest me a library that allow users credentials login and uses session based strategy. What should I do? Thanks.

    • @codinginflow
      @codinginflow  6 месяцев назад

      Lucia has username + password login with session. I would use that.

  • @SoftwareWrangler
    @SoftwareWrangler 6 месяцев назад

    How to handle this problem: Adding an item to the cart on the server side and reFetching cart items number on the client side without need to check every for example 5 seconds or so? I made Navbar client-side component and showed the number of cart items on client side component, how to automatically re-fetch the number after adding a new item?

    • @BegalInsaf
      @BegalInsaf 6 месяцев назад

      use zustand

    • @codinginflow
      @codinginflow  6 месяцев назад

      SWR and React query can refetch on focus if that's what you need

  • @nomxxn
    @nomxxn 5 месяцев назад

    In production, the server actions seem to be quite slow for me, for example my login action takes a whole 3 seconds to login the user lol, even after using redis, I'm clearly doing something wrong or maybe credentials login is just slow overall with auth.js, what do you think Florian? btw, appreciate all these tutorials mate, keep it up!

    • @codinginflow
      @codinginflow  5 месяцев назад +1

      Rename the middleware.ts to something else and let me know if the problem still persists

    • @nomxxn
      @nomxxn 5 месяцев назад

      @@codinginflow I didn't even have the middleware setup lol, appreciate that mate!

  • @steinke76
    @steinke76 4 месяца назад

    Hallo Florian, ich mag deine Videos und habe eine Frage, hast du auch einen deutschen Kanal, bzw. bietest deine Kurse auch auf Deutsch an ?
    Es ist nicht so einfach einen Programmiersprache zu lernen in einer Sprache die man auch nicht perfekt kennt 😅
    Vielen Dank, mach weiter so 😉

    • @codinginflow
      @codinginflow  4 месяца назад

      Nein, lohnt sich auf Deutsch leider nicht

  • @markus_dev_cwb
    @markus_dev_cwb 7 месяцев назад

    Amazing tutorial! Tks to share.

  • @salahhatem4601
    @salahhatem4601 3 месяца назад

    You are a legend 💖

  • @arvin6
    @arvin6 19 дней назад

    Can we use the beta version in a real project?

  • @owdx8984
    @owdx8984 7 месяцев назад +2

    34:41 caught me off guard

  • @joe_j
    @joe_j 7 месяцев назад +1

    I love this. Hey can you do a project with web sockets

    • @codinginflow
      @codinginflow  7 месяцев назад

      What do you wanna see exactly?

    • @joe_j
      @joe_j 7 месяцев назад

      @@codinginflow realtime update of data without having to refresh the page, where it keeps track of the current data in the database after I update. I hope this is more clear

  • @ZeeshanElia
    @ZeeshanElia 6 месяцев назад

    I have suggestions for you i u wanna grow up your channel then
    Trying to make live streaming at react animate series
    It high demanding topic now days

  • @muhammadalifdanielbinmohdh3188
    @muhammadalifdanielbinmohdh3188 4 месяца назад

    can you do a drizzle with neon ?

  • @Tej_Dev
    @Tej_Dev 6 месяцев назад

    I've seen a new error (This is only in Production), if i authenticate through Google OAuth on server side using signIn() from "@/auth", i'm redirected but i see a 404 error page , but when i reload it works. This is only in Production. But when i get the session from client side and signIn() from "next-auth/react", i don't see this happening. Does anyone know why

    • @navteshmaken9718
      @navteshmaken9718 Месяц назад

      Ig because signin() only works in client side. It is written in next-auth docs

  • @timothylee3203
    @timothylee3203 7 месяцев назад +1

    why are u using neon adapter with vercel db?

    • @codinginflow
      @codinginflow  7 месяцев назад +1

      To make it edge-compatible so it works in middleware. I explain that in the video.

  • @soma7891
    @soma7891 4 месяца назад

    What happened to your Android videos?

  • @whoooooo
    @whoooooo 7 месяцев назад

    Will the user be updated if, for example, another user changes their role by removing admin status, in case one user is already logged into the site and another changes their role? Will the user whose role was changed be automatically updated?

    • @codinginflow
      @codinginflow  6 месяцев назад

      Yes because the user data is retrieved on every request when you use sessions

    • @whoooooo
      @whoooooo 6 месяцев назад

      @@codinginflow Wouldn't it be a strain on the server if, as I understand, every user updates their data with any interaction with the system? That's a request to the server, and when there are many users, it means a lot of requests, doesn't it?

  • @2kceltics
    @2kceltics 6 месяцев назад

    Why do you use prisma instead mongoose ?

  • @syedbilalchand1766
    @syedbilalchand1766 6 месяцев назад

    How to implement access token and refresh token

  • @adarshrathi8265
    @adarshrathi8265 5 месяцев назад +1

    Excellent

  • @drdonice
    @drdonice 6 месяцев назад

    Amazing tutorial! "My pronouns are actually async and await" 😂

  • @rotes3106
    @rotes3106 3 месяца назад

    Anybody has any idea how i can access the user session in my api route handlers so i can check if the user is authorized and use his id to access his data in db? Your answer is much appreciated!

    • @codinginflow
      @codinginflow  3 месяца назад

      The same way as in server components

  • @RishabhSingh-oc6vw
    @RishabhSingh-oc6vw 6 месяцев назад

    Payment integratation please in your ecommerce app

  • @PSkinnerTech
    @PSkinnerTech 3 месяца назад

    I damn near fell over laughing. "My pronouns are async and await." 🤣34:40

  • @JambeDeBwa
    @JambeDeBwa 2 месяца назад

    Is the middleware fixed now ?

  • @rich-able
    @rich-able 4 месяца назад

    1:28:45 When re-login with useSession That will be be undefined on loading init session. It may need hard-reload. I think that's not proper demonstration.

  • @bandekhoda7801
    @bandekhoda7801 7 месяцев назад

    Do they have a date as to when they're gonna release a stable version?

  • @penaltymatch
    @penaltymatch 4 месяца назад

    Thank you. ❤❤❤🎉🎉

  • @ugurdev
    @ugurdev 7 месяцев назад

    Good one, thanks.

  • @2kceltics
    @2kceltics 6 месяцев назад

    Wait a minute... I could save the users data in localstorage and give him access to the main app while the cookie isn't outaged... I'll save a lot of callings to database every time the user navigate to a new server route...

    • @codinginflow
      @codinginflow  6 месяцев назад

      That's highly insecure

    • @2kceltics
      @2kceltics 6 месяцев назад

      ​@@codinginflowOk thanks for the advice.

  • @BlueBirds-fs1id
    @BlueBirds-fs1id 4 месяца назад

    I can't even get past 11:00 😢
    I cloned, followed the exact instructions, npm installed, and get this terminal error anyway
    npx auth secret
    node:internal/modules/cjs/loader:1144
    const err = new Error(message);
    ^
    Error: Cannot find module 'zod'

    • @codinginflow
      @codinginflow  4 месяца назад +1

      I don't know what causes this error but you can use any random string as the auth secret

    • @BlueBirds-fs1id
      @BlueBirds-fs1id 4 месяца назад

      @@codinginflow thanks 🙏