Auth.js V5 From Scratch
Hey Developers! In this video I show you how you can implement Authentication with Auth.js version 5 in Next.js Projects.
🗃️ GitHub Repo (Please Give It a Star ⭐ in GitHub): github.com/vahid-nejad/NextAu...
📖 Chapters:
0:00 Introduction
0:35 Install and Setup Next-Auth V5
02:11 Google Provider
04:13 Setup Google API Console
08:31 Next-Auth API Routes
10:53 App bar - Sign in and Sign Out Buttons
18:03 Credential Provider
24:35 Protect Client Component Pages
29:51 Protect Server Component Pages
32:24 Protect Pages with Next-Auth Middleware
36:15 Next Video Announcement
Пікірлер: 109
Another great video on Auth.js authentication. Looking forward to the full course: Next.js | PostgreSQL | Auth.js (Credential | Google | Apple | with role-based authentication), maybe even with the implementation of a user management page with the ability to change roles for each user (guest-user-admin) and a personal user account with the ability to change personal data. And, of course, thank you and good luck!
The timing can't be more perfect.
Great tutorial again! Recommended your video to a few people. No other channel makes it so easy to follow and helps get the basics in place so I can focus on my project instead of the changes to next-auth.
@SakuraDev
3 ай бұрын
Thanks 🙏🙏🙏
Everything you need to know about Auth.js v5! Thank you!
@SakuraDev
3 ай бұрын
Glad you like it 😊
Hi, thank you very much! Great work! Waiting for the next video "Next-auth v5 with Refresh token rotation" ))))
Great tutorial! Clear and easy to follow! 👏👏
@SakuraDev
2 ай бұрын
Thanks a lot 🙏🙏🙏🙏
Was eagerly waited for AuthJS5 video
Love you mate ! Thank you for this
@SakuraDev
16 күн бұрын
Thanks you so much 🙏
Explained in a easily understandable language, especially for newbie like me, thank you so much. May god bless you!
@SakuraDev
Ай бұрын
So happy to hear that! Thank you so much
Thank you for your videos. I really like the way you the concepts into chapters and explain them in a beginner friendly way. Please can you do a video on typescript and next typescript
You are indeed a lifesaver, More grease to your elbow bro
@SakuraDev
2 ай бұрын
Thank you so much. Really glad it was helpful for you 🙂
Thank you. Great video!
@SakuraDev
2 ай бұрын
Thanks 🙏🙏🙏
Great vid. Thanks!
@SakuraDev
4 ай бұрын
Thanks 🙏. I'm really glad that you liked it 😊
Awesome content man. What theme are you using here?
best explanation!!
@SakuraDev
4 ай бұрын
Thanks 🙏🙏
This video is wonederfull, thnx a lot
@SakuraDev
2 ай бұрын
So nice of you
Really great video, bro require jWT access token and refresh token with Next Auth 5, please use express js as backend as in previous video
thanks. please make a video on next js caching.
can you make the credentials provider role based?
Hi, thanks a lot for this great content, I don't know if you notice that when you sign In with incorrect credentials there is an error on the server console, any solution for this ?
Thanks for the great tutorial, helped me to understand v5 better :) Quick question in case you may have an idea: authorized({ request, auth }) -- the auth always comes back as null in auth.ts and in the middleware if I import it and log out the session, even though I have a session in my server and client component. I clearly log in and out and session comes back with null or session details in my components and pages. But in auth.ts the ""authorized" callback it always returns as null and in the middleware the session also returns null ... any ideas while I google this? :) P.S.: I cloned your repo and realised that in your case the callback actually does nothing, it's as if it wasn't there ... very odd. P.P.S For anyoen else cloning the repo: the middleware file is in the wrong place. It needs to be in your project root (or in "src") at the same level as your app/pages folder but nt inside the app folder. Then the middelware works and then it also invokes the callback correctly.
Hi, can you do a video on passwordless with nodemailer (sendgrid or any api is fine) im using prisma and postgres hosted on neon and im having issues, i get the email, but cant sign in, im struggling to solve the issue and auth.js docs are still not completed
AMAZING video! Thank you so much! A question though. Im using nest ts on the backend and im getting tokens. Can you guide me how to use tokens for authentication in next auth?
@SakuraDev
3 ай бұрын
Thanks, You should keep the tokens inside the Auth session and whenever you want to call a backend API you should put the tokens inside the header of your request to backend API
How we can do that when use login in and when he want to visit another page that not access it and logout the use l mean signout and clear the ssesion
Thank you
@SakuraDev
4 ай бұрын
Thanks 😊
Everything you need to know about Auth.js v5! Thank you! But middleware protected not working , could you say?
Great tutorial. Saved me a lot. I do see an issue however with retrieving the client session by using useSession in 1 specific usecase: refreshing the browser with F5 on the clientPage when you are logged id: useSession returns undefined. @Sakura Dev is this something where you can help with ?
@SakuraDev
2 ай бұрын
Hey, useSession returns undefined immediately after refreshing the page but it will return the session quickly after a few seconds.
@jocow2
2 ай бұрын
@@SakuraDev Thank you. How can I handle this functionally, because the 'undefined' comes into a if/then clause where we show some behaviour which we normally use for unauthenticated person (like showing a login screen). How should we solve that ?
can you make example @auth/express access token refresh token and next js
Thank you for the video!! But May I know why I add the AUTH_SECRET with random string,it still shows Server error There is a problem with the server configuration. Check the server logs for more information.
If possible do add your github code repository for the same, thanks
@SakuraDev
4 ай бұрын
Hey! Added
@aryan.prince
4 ай бұрын
ayo no way milind spotted in the wild 👀
if i have my webapp with the previous version (v4), do you recommend upgrading it to v5? or u think is not worth it?
@MouseCodes
4 ай бұрын
It's still in beta so wait
Hi, this is a good guide, but i have a little probleme i want to change the scope like "providers: [discord(auth... { params: {scope: ["my scope"] }}), credentialsConfig]" but hes doesn't work
How middleware directly redirected to sign in page if unauthorized users is accessing protected page
For some reason the middleware protection fails for my app, not sure why I did follow up with the docs but hard luck. Btw, great work on the video thanks!
@SakuraDev
4 ай бұрын
Glad I could help
@MilindMishra
4 ай бұрын
@@SakuraDev The middleware protected page isnt really protected, tried using your repository same results.
@MilindMishra
4 ай бұрын
@@SakuraDev looks like we need to keep the middleware.ts file in the same level as the app directory if inside src when applicable, that fixed it.
@fiimble
4 ай бұрын
Same here. The middlewareProtected page is always accessible.
@finenode8363
3 ай бұрын
@@MilindMishra thank you! your answer solved my issue.
great video!! Can I write that same logic (callbacks:{authorized({request,auth)}) inside the middleware.ts? so checking the request.nextUrl.pathname to be middlewareProtectedPage and then redirect them to the login page
@SakuraDev
3 ай бұрын
I haven't tried that, But I think It will do the job.
Could you please teach again but Nestjs with Nextjs 14 and Authjs v5 💯💯
Please show us how to create a custom credentials provider signIn form
@SakuraDev
3 ай бұрын
I Will
for the credentials method, I'm working with external backend, should I send a post request inside the authorize function with the credentials in the request body, then await for the response then return the user object?
@SakuraDev
Ай бұрын
Yes, This is exactly what you need to do. Thanks for the visit BTW 🙏
@kemmouneismail3087
Ай бұрын
@@SakuraDev thank you so much for answering me that fast, I still have 1 question, since I'll send the post request from that authorize function, how can I handle the loading state to make a loader or to disable the inputs, should I just set up a global state, or there is a better way?
@SakuraDev
Ай бұрын
@@kemmouneismail3087 well, you can set the loading state of sign in form with just a simple state. note that you don't call the authorize func directly from you sign in form. instead, you call the sign in function of the next-auth. this func then calls the autorize func. so you can just handle the loading state in the sign in form. just set the loading state to true before calling the signIn func and set it back to false just after that.
@kemmouneismail3087
Ай бұрын
@@SakuraDev thank you so much sir, was very helpful
@SakuraDev
Ай бұрын
@@kemmouneismail3087 My Pleasure
short video but great video thanks
@SakuraDev
Ай бұрын
Glad you liked it!
Great video thanks for uploading!! How can we overwrite the type for the session? i have tried creating a next-auth.d.ts file with its new type, I get the new correct types in vscode, but it will not accept any of the fields i am passing it and session is always {}
@SakuraDev
3 ай бұрын
Hi thanks. You should use auth callbacks as well as the editing types in nextauth.d.ts file
Hi, I have cloned your repo, but when I ran it the middleware is not working like in the video. Even if the user is signed out the user is able to see the middleware page.
@jcen1918
3 ай бұрын
Exact same issue!
@adityaiiitr
2 ай бұрын
Anyone found the solution?
How can I implement AuthJS with next-intl
if i run the source code..im able to navigate to middleware protected page...can you please tell me why?
@SakuraDev
3 ай бұрын
I will fix that bug and push it on GitHub again. Thanks for bringing that to my attention 🙏
@erikgalajdask
3 ай бұрын
would be cool if u could share the fix, thx for the great vid@@SakuraDev
@sumonhossain889
2 ай бұрын
@@SakuraDev still problem, I cloned your code though.
Please show us how to create a custom signIn form using version 5.
@SakuraDev
3 ай бұрын
I will do that soon
I’m extracting custom jwt token from useSession session but it is undefined until f5/refresh/ any idea why?
@SakuraDev
Ай бұрын
If you want to alter the shape of your token, you get undefined. I have a video about how to fix that on version 4, the idea is pretty the same: kzread.info/dash/bejne/mI2DxNSrY83MYNo.html
@nambarjintumenbayar3599
Ай бұрын
@@SakuraDev exactly doing this but usesession undefined until refresh, server session always one session behind. Changing user will return previous user token
@nambarjintumenbayar3599
Ай бұрын
Next auth so freaking buggy and under documented
@nambarjintumenbayar3599
Ай бұрын
Cannot even find in whole internet about custom auth implementation without damn 3rd party librariy
@nambarjintumenbayar3599
Ай бұрын
@@SakuraDev finally solved. Had to add location.reload() on both signOut, signIn function seems like next auth v5 bug.
Good but why not in Javascript for easy understanding
Waht is your VSCode Extension?
@SakuraDev
Ай бұрын
Hi, 😊 👋 Which extension?
@jamescardona11
Ай бұрын
@@SakuraDev Thank you for your reply and content; the theme extension.
@SakuraDev
Ай бұрын
@@jamescardona11 Thanks 🙏 it is bearded theme
Can we add mongodb for storing users?
@SakuraDev
4 ай бұрын
Yes You can. you just need to configure MongoDB adapter
@tomasapochian8117
4 ай бұрын
Hi there, have you been able to setup the mongoDB adapter? I am getting edge runtime errors when I call the database.
No authorization ? 😢 That's very much needed in 80% of modern apps
Can i use it now in real project?
@SakuraDev
3 ай бұрын
It is still beta. But I think it will be stable soon
broooo please the credential.s and callbacks and there types
@francejardinevisarra8504
3 ай бұрын
plesae notify us when u done making the full course of auth 5, with the email verification, 2FA, reset and change pass
What do I need to delete to get rid of Google and just use username and password? I don't want Google collecting my user's information and selling it. I don't trust Google.
you are not protected the page / route. you only rendered specific content based on session value. the routing can be still acessed. disappointed me.
@SakuraDev
Ай бұрын
Fixed that in the new upcoming video.
@aryaadinulfadlan8998
Ай бұрын
@@SakuraDev sure, go ahead
@user-tp8wp5zv2n
Ай бұрын
@@SakuraDev When will you have the solution?😄