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!
You're a life saver, I was trying to figure out how to access auth user details in client components from the last 3 days. You explained this in 3 minutes ❤❤❤
I didn't find any info how to access the session from client components when using app router. Not even in the authjs docs... So glad I found this video! Thank you so much!
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.
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
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.
24:07 I have only 1 doubt. When I am entering a wrong username or passowrd instead of showing the proper error message, it says "Server error There is a problem with the server configuration. Check the server logs for more information.'
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.
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!
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
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.
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 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 ?
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?
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
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 ?
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
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
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 {}
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 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?
@@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.
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: th-cam.com/video/fYObrr3jf0w/w-d-xo.html
@@SakuraDev exactly doing this but usesession undefined until refresh, server session always one session behind. Changing user will return previous user token
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.
When I try to use argon2 for hashing for credential provider sign in it says... ⨯ node:crypto Module build failed: UnhandledSchemeError: Reading from "node:crypto" is not handled by plugins (Unhandled scheme). Please what will be the problem I think am using the client side server I have used the auth.ts in the root folder but just like they said in the documentation. I have used argon2 for registering but for provider sign in to use argon2 to compare the password it is not allowed me as argon2 use crypto my auth.ts in the root project
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!
You're a life saver, I was trying to figure out how to access auth user details in client components from the last 3 days. You explained this in 3 minutes
❤❤❤
Thanks! I'm so glad to hear that the explanation helped you! It's great to know it saved you time and effort.
The timing can't be more perfect.
Everything you need to know about Auth.js v5! Thank you!
Glad you like it 😊
I didn't find any info how to access the session from client components when using app router. Not even in the authjs docs... So glad I found this video! Thank you so much!
Really glad that it was helpful for you 🙂
Explained in a easily understandable language, especially for newbie like me, thank you so much. May god bless you!
So happy to hear that! Thank you so much
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.
Thanks 🙏🙏🙏
Hi, thank you very much! Great work! Waiting for the next video "Next-auth v5 with Refresh token rotation" ))))
can you make the credentials provider role based?
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
Love you mate ! Thank you for this
Thanks you so much 🙏
Awesome content man.
What theme are you using here?
Great tutorial! Clear and easy to follow! 👏👏
Thanks a lot 🙏🙏🙏🙏
You are indeed a lifesaver, More grease to your elbow bro
Thank you so much. Really glad it was helpful for 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
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.
24:07 I have only 1 doubt. When I am entering a wrong username or passowrd instead of showing the proper error message, it says "Server error
There is a problem with the server configuration.
Check the server logs for more information.'
if i run the source code..im able to navigate to middleware protected page...can you please tell me why?
I will fix that bug and push it on GitHub again. Thanks for bringing that to my attention 🙏
would be cool if u could share the fix, thx for the great vid@@SakuraDev
@@SakuraDev still problem, I cloned your code though.
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.
Exact same issue!
Anyone found the solution?
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!
Glad I could help
@@SakuraDev The middleware protected page isnt really protected, tried using your repository same results.
@@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.
Same here. The middlewareProtected page is always accessible.
@@MilindMishra thank you! your answer solved my issue.
Please show us how to create a custom credentials provider signIn form
I Will
Was eagerly waited for AuthJS5 video
If possible do add your github code repository for the same, thanks
Hey! Added
ayo no way milind spotted in the wild 👀
Everything you need to know about Auth.js v5! Thank you! But middleware protected not working , could you say?
Thank you. Great video!
Thanks 🙏🙏🙏
This video is wonederfull, thnx a lot
So nice of you
best explanation!!
Thanks 🙏🙏
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
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.
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
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 ?
Hey, useSession returns undefined immediately after refreshing the page but it will return the session quickly after a few seconds.
@@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 ?
How middleware directly redirected to sign in page if unauthorized users is accessing protected page
Great vid. Thanks!
Thanks 🙏. I'm really glad that you liked it 😊
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?
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
thanks. please make a video on next js caching.
short video but great video
thanks
Glad you liked it!
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 ?
can you make example @auth/express access token refresh token and next js
Please show us how to create a custom signIn form using version 5.
I will do that soon
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
I haven't tried that, But I think It will do the job.
How can I implement AuthJS with next-intl
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
Custom error messages from auth.ts to client components login page
Will be covered in next update
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 {}
Hi thanks. You should use auth callbacks as well as the editing types in nextauth.d.ts file
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?
Yes, This is exactly what you need to do. Thanks for the visit BTW 🙏
@@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?
@@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.
@@SakuraDev thank you so much sir, was very helpful
@@kemmouneismail3087 My Pleasure
Sir can you please provide theme name
Hi, It is bearded theme
Thank you
Thanks 😊
Could you please teach again but Nestjs with Nextjs 14 and Authjs v5 💯💯
Theme name?
Hi It is bearded theme
I’m extracting custom jwt token from useSession session but it is undefined until f5/refresh/ any idea why?
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: th-cam.com/video/fYObrr3jf0w/w-d-xo.html
@@SakuraDev exactly doing this but usesession undefined until refresh, server session always one session behind. Changing user will return previous user token
Next auth so freaking buggy and under documented
Cannot even find in whole internet about custom auth implementation without damn 3rd party librariy
@@SakuraDev finally solved. Had to add location.reload() on both signOut, signIn function seems like next auth v5 bug.
if i have my webapp with the previous version (v4), do you recommend upgrading it to v5? or u think is not worth it?
It's still in beta so wait
Good but why not in Javascript for easy understanding
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.
broooo please the credential.s and callbacks and there types
plesae notify us when u done making the full course of auth 5, with the email verification, 2FA, reset and change pass
Waht is your VSCode Extension?
Hi, 😊 👋 Which extension?
@@SakuraDev Thank you for your reply and content; the theme extension.
@@jamescardona11 Thanks 🙏 it is bearded theme
Can i use it now in real project?
It is still beta. But I think it will be stable soon
No authorization ? 😢
That's very much needed in 80% of modern apps
you are not protected the page / route.
you only rendered specific content based on session value.
the routing can be still acessed. disappointed me.
Fixed that in the new upcoming video.
@@SakuraDev sure, go ahead
@@SakuraDev When will you have the solution?😄
Can we add mongodb for storing users?
Yes You can. you just need to configure MongoDB adapter
Hi there, have you been able to setup the mongoDB adapter? I am getting edge runtime errors when I call the database.
When I try to use argon2 for hashing for credential provider sign in it says...
⨯ node:crypto
Module build failed: UnhandledSchemeError: Reading from "node:crypto" is not handled by plugins (Unhandled scheme).
Please what will be the problem
I think am using the client side server
I have used the auth.ts in the root folder but just like they said in the documentation.
I have used argon2 for registering but for provider sign in to use argon2 to compare the password it is not allowed me as argon2 use crypto
my auth.ts in the root project
Can you share your code?
@@SakuraDev
import { PrismaAdapter } from "@auth/prisma-adapter";
import NextAuth from "next-auth"
import Google from "next-auth/providers/google"
import prisma from "./prisma/client";
import CredentialsProvider from "next-auth/providers/credentials";
import { signInSchema } from "./schema";
import argon2 from 'argon2';
import { ZodError } from "zod";
const credentialsConfig = CredentialsProvider({
name: "Credentials",
credentials: {
email: { label: "email", type: "email", placeholder: "Email" },
password: { label: "Password", type: "password", placeholder: "Password" },
},
authorize: async (credentials) => {
const result = signInSchema.safeParse(credentials)
if (!result.success) {
return null;
}
const { email, password } = result.data;
try {
const user = await prisma.user.findUnique({
where: {
email: email
}
})
if (!user) {
throw new Error("user not found")
}
const isMatch = await argon2.verify(user.password!, password);
if (!isMatch) {
throw new Error("User not found.")
}
return user;
} catch (error) {
if (error instanceof ZodError) {
return null
}
return null;
}
}
})
export const { handlers, signIn, signOut, auth } = NextAuth({
adapter: PrismaAdapter(prisma),
providers: [Google,
credentialsConfig
],
session: {
strategy: "jwt",
}
})
I just run your code but i didn't get this err. It works for me!!