It's a bit late to comment, but congratulations Dave on getting sponsors for your videos (this is the first one I've come across) There are plenty of amazing tutorial creators on RU-vid, but the amount of effort you put in your videos to explain each and every line of code, right down to mentioning the key binds you use, is just remarkable. Thank you for all your effort and I hope you gain even more success
This is a very informative and useful video. It would be awesome if you could expand on this by connecting a database to store users along with a credentials signup. Users should also be able to reset their password. An explanation of that is hard to come by and something most of us will need.
This is super helpful, thank you! I do want to call out that you said you would never want to use a server component within a client component, but the application is doing that when you're talking about providers. The AuthProvider component is a client component and it the client/page.tsx component is a server component rendered inside of that
You're welcome! I appreciate the call out because this shows I likely didn't explain myself clearly on this specific issue. "use client" creates a boundary between server and client components and all other components imported in the client component including children will be rendered as client components according to the Next.js docs: nextjs.org/docs/app/building-your-application/rendering/client-components ..so to follow this up, I searched the NextAuth docs for an exception with the SessionProvider used inside the AuthProvider we create in this tutorial. I did not find where those docs dive into how NextAuth works around this.. but if you add a console.log(user) to the UserCard component, build the project with npm build, and then run it with npm start, you will see that after logging in and visiting the home and server routes, the console.log shows on the server terminal - confirming they are still server components. If you visit the client route, the console.log will show in the browser console. Further, the build report after running npm build will also indicate those pages are SSR and not client components. I hope this helps clarify what I meant. This would actually make a good blog post / explainer topic - but the client component uses the useSession hook which uses the context. The server components instead use getServerSession which doesn't require the context. More clarification on using Context Providers with Server Components here: nextjs.org/docs/app/building-your-application/rendering/composition-patterns#using-context-providers
Hey Dave, after migrating from the pages router this tut helped me a lot on getting clear. There are a lot of tutorials out there and huge codebases with complex integrations and a lot of copy paste code, sometimes a bit hard to stay focused on the essentials. Greeting from Austria
Thanks Dave! It was very useful example, but very simple. 😉 Please, continue about NextAuth, cause you don't touch following themes: 1. Initial form for auth (how client can pass auth first time with credentials) 2. Working with DB, 3. How can clients change their credentials (email, pass, etc) at any time. 4. How can developer make own auth pages with another design? So we are waiting for next! Good luck, Dave! 💪😀)
Nice one...! One important point that maybe you can address in later videos is how to use user roles. To be able to pass roles to the session, you need to include them in the token, which is then read by the session.
One of the best next-auth tutorials that actually covers the app router. Disappointing that the next-auth docs don't cover this and are instead using the older page router.
Awesome tutorial I would be delighted if you could consider creating a tutorial on the process of authentication and authorization, encompassing both frontend and backend aspects. It would greatly enhance my understanding to learn about the complete flow, such as how the frontend transmits the authentication token to the backend during sign up or login. I'm eager to gain insights into the entire process. Frontend - Nextjs Backend - python
Hi Dave, this was an incredibly helpful video, I've now successfully set up Next Auth in my Next JS project with an AWS Cognito provider. Thanks for explaning everything so clearly and not glossing over the small details. I'll definitely check out your other videos on Next JS.
if I may ask how did you find the cognito issuer? all the tutorials i've found for it used a cognito domain and amazon has revamped their whole UI making it really obnoxious
@@anonihme5142 sorry I didn't see your comment earlier, glad to see you got there! I followed this video to understand more about setting up the Cognito app client. I'd love to get Cognito working with the credentials provider as opposed to using their hosted UI, but that's on a future to-do list! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-U4hEflgix9c.html
@@SarahBrown-v6t cheers. Sadly the vid ends before he tries to log back in and sees that the next -auth logout function doesn't clear cookies on the cognito server, so the user is logged back in without being asked for his credentials, which is a major security risk. It amazes me that there's no simple way to do that. But then again, i'm a total noob, so simple for me is a very low bar. I shall persist and remain calm! thanks for the reply, best of luck
Thanks Dave for this video! It has actually helped me GET the right data for the Credentials login. But im having a little difficulty getting users to sign in with Username,Password. But with this video i was actually able to get a step forward! THANK YOU!
This is a very packed information and I really understand every bit of it ,I was in another tutorial before the guy was explaining it but it was very hard to get . Immediately I came here it just clicked ❤
Thank you dear Dave, for always inspiring me to put my best foot forward, even when I don't feel like I belong. I hope the best for you in your life. Warm Regards.
Great explanation and unique content. I am waiting for more videos about Next.js, and problems faced by many beginners and solve these problems. Thank you for making this effort to explain the code
Thank you much, Dave! I have been following and watching your Next series from the moment it was still in experimental phase and up to now that is already stable. Please create a video with signup that has a database and also the role based auth. Thank you and more power!
Thank you, this has been very helpful. It would be great to have more coverage around OAUTH configuration (scope, userinfo, etc.) and sign-out from the identity provider. Anyway, thanks for the great content!
Thanks Dave, Personally I need more authentication tutorials specially on next-auth it seems a little shady the code and the documentation also abstracts some details the only way to learn is is by experimenting it in my opinion, It would be amazing if you share us your findings.
That's a very comprehensive tutorial about next-auth. Thank you sir. and yes an advanced auth series (like react one) is very much appreciated. It is just a request to use sql based database this time for auth as we have covered mongodb in react.
💡One tip for anyone who is just starting: Please analyze the starter code file first, on the timestamp 25:06 and then complete the rest of it By the way Great tutorial Dave 🔥Loved it.
Sir after configure the next-auth , you just directly go on UI without saying that how setup this ui login page therefore a lot of viewer leave the video
thank you so much for all you do to enlighten me personally, please if you can expand this to include user roles, and how to redirect different users to their dashboard like if admin take them to admin only page on login and if only member take them only to member page ...
dave , someday i will be like you and help the beginner's like i am now i am stuck in role based auth like admin , client , admin with add update delete and client only can acces or fetch the data and submit a form , and admin can toggle the status of the formdata it will be very helpful to make a video on the same thank you for being consistent and may god give you alot of happines to helping us as we are beginners
I have a question : Lets say I want to allow the user to choose what to use to login in with and then they can connect all there social media account such as twitter,instgram after they sign in . How do you do that ?
How do we add production-grade auth if we're using a backend API like Django or Springboot? Suppose we wanna use an API that already has auth (either JWT or session-based) and all the password reset etc features built-in. How best do we set up auth and how best do we manage server state vs client state? Any resources or advice would be thoroughly appreciated.
Good question! 💯 A few reasons: 1) I think it is the accurate choice in this situation. 2) router.push comes from useRouter which is only available in client components. I can use the same redirect logic in both client and server components. 3) Redirect shouldn't impact your browser history. You want the callback to bring you back to where you were going after you login. I believe router.push adds the location to your browser history.
@@DaveGrayTeachesCode Thanks for the reply Dave. I totally forgot that you cant you use hooks in server component. I had one more question. You mentioned that NextJS runs on serverless environment like AWS lambda. So going by this statement I can’t deploy a full stack NextJS app on, lets say, an EC2 instance?
Hi dav i am trying to implement apple id sing-in in next js but i am unable to integrate the same, please make one video on the same. I am not find any reference as well please help me with this regards
That's great, I have a question that if we have to design a custom form so with it we have to make post request to that dynamic route of next auth([...nextauth]) using fetch or similar api? or is there another way to send credentials to the api route? and how github or google provider can be placed in custom form, It would be a great favor for me if you make video on it or extend this video. Thanks. Hit like if you want this too
Hi Dave, thanks for the really nice tutorial. I heard what you said about only using services on your channel that you think are really good. In relation to that, I was wondering what your opinion is on AWS Cognito? I am trying to do authentication using next-auth and Cognito but find this tricky. Any chance you would be willing to make a tutorial on this combination? Thanks again.
hi. when i open a new tab on the browser, it's like the session is gone and i have to login again even though i logged in earlier. i looked in the browser cookies and nextauth-session-token is not there for new tab.
Hi , I wanted to deploy my application in some platform by using gitlab pipeline. So how to pick credentials because I cannot pass it directly in .env file... So how to pass the sensitive credentials like cognito id and all
Hey Dave, can you make an updated video of how to combine this implementation with firebase users? I want to use the credentials provider for email and password, but I want to be able to use the bult in sign in functions that firebase has.
Hey Mr Dave Gray, you have used types packages in dependencies not in devdependencies. Is this ok to have types packages in main dependencies? Anyone answer please?
Hi Dave, Thanks for your tutorial. Looking for ways to implement a "Remember Me" feature by dynamically updating the maxAge. Have you been able to do this? I've seen some people destroy the token on browser close.
dont nextjs docs tell u to prefer client side auth and use ss route guard only if you really need some data to not leak to the frontend that need to be protected?
I have question Dave Can i use next auth for login when i am using Next 14 actions ? I made a form and give action to it and make login user , i am stuck at setting session what am i doing wrong please let me know
Thank you Dave. can you please create one tutorial for how to secure nextjs Application and how to use statement management lib in next js 13 with server-side component
Thank you Dave nice tutorial and it is good that you mention your practice about client and server components, will work like you said because it made perfect sense to me, have a nice day!
Thanks Dave. Crystal clear step by step instructions on next auth. Now we have a deep understanding of how to configure and setup next auth in our projects. One suggestion a quick diagram of how the auth flow should be even more awesome!! Thank you for delivering quality content for us. Learning a lot from your videos.😊
Thank you and good suggestion - while this default setup is very straightforward, I think some customized solutions may need further explanation in the future. The default setup uses a session cookie with an encrypted JWT (JWE). This is important because Next.js is hosted in a serverless deployment so the auth info is really in the JWE and is verified by a NextAuth server function (running in a serverless environment). Serverless is a confusing word. It means it is one big lambda function outsourced to AWS behind the scenes. The auth persists due to the cookie staying in the client. The serverless environment may go to sleep when inactive.
Hey Dave. Thanks for the great tutorial. I see the majority of the nextauth code is in the /api folder and also on their site, they say it is built for serverless. Is there a way to adapt this to use an express server? Thanks
With server components, I don't believe it is necessary if you want to avoid it. I will avoid it when possible. That said, it is possible in NextAuth and needed to be included as part of this tutorial.
Hi, i have API calls that are only for the user but the API provider is either NESTJS or Laravel API , which kind of token or auth should i use so the external API can deal with it?
