Hello, thanks for the video. I have a question about how to implement multiple custom logins for different user roles, such as clients and administrators. Can you provide some guidance on this?
Another great episode mate, getting closer to having a full site made up now with your help! Getting more comfortable with the CRUD side of postgres and next.js. Keen to move on to the next video.
This is a good one. If you want some help setting up Next Auth and prisma (really, with any database), check out ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-2kgqPvs0j_I.html
Great episode. 1) I noticed during the middleware section that my home page was protected as well. What is the way to unprotect it along with register, api and login? 2) Is there a downside to not protecting your api folder? 3) I redirect to signin after registering a user. Once I sign in, the app redirects back to the signin page rather than dashboard. It works normally if I start from home page, then signin page, then dashboard. Any ideas why that happens? #EDIT# My signin page url has a callback to signup. Do I need to use useRouter in my signup page rather than using nextAuth's signIn() functionality when I successfully signed up a user?
Thanks! @0xtz_ is right, this can be accomplished with FormData. I'll see what I can do on making a guide for this! Also, keep in mind that you can't save the images on the server if deploying serverless -- you need to use object storage like S3. developer.mozilla.org/en-US/docs/Web/API/FormData
pl share the github repo for better understanding. I want to see the NextAuth part. I've to login from my own external endpoints and create a user session in NextAuth. But I'm not getting the credentials that I'm sending from signIn function of NextAuth.
Hey, source code can be found at the bottom of the blog post: ethanmick.com/build-a-custom-login-page-with-next-js-tailwind-css-and-next-auth/ (Become a member! 😊 )
Hi, ethan thanks for making the video! Can you talk about how to save states in the local storage in next 13? Or have you ever made an article about it? Thank you!
Hi, I can't my wrap my head around how I can redirect users to dashboard if they are logged in already. I want to do this via a middleware. I tried to use `getServerSession` but that does not work in middleware.
Nevermind, getToken approach was not working for some reason it kept giving me null but 5 mins after this comment it started working. idk what i was doing wrong.
amazing brother! I am about done auth part, so i am gonna pass to opearations like fetching data or crud operations. but just have a quick question to u:) when i get session object, as you know we dont get accessToken property. so do we really need it or not? cause i wanna send request to for instance "/product" root to fetch some products with axios. so do i need send accessToken in header part of axios to check if i am authenticated in api route handler. or we just should write getServerSession() to get session object in api handler file and check authentification?
You shouldn't need the "accessToken" property. When you make the request with Axios to your own domain, it will include the cookies by default. You can use the cookie server side to check the authentication. Assuming valid auth, you can then return "/products" or whatnot. In general, I'd use middleware to protect the routes (including API routes) and then in your handlers you can just trust there is a valid user and use the session data.
@@ethan_mick I mean, if someone try to send request to api from external device or postman to fetch my database. So in this case, what i have to do in my api handlers? u said, i dont need accessToken check, so i can just call const session = getServerSession() function and if(!session) return error u mean?
@@tunaralyarzada Right. You can either use middleware or "const session = await getServerSession()" to get the session. Next-Auth will validate that it is a VALID session. If not, return an error. If it is, then you can lookup the data in your database.
Your content is so good, I've been looking for these solutions for the past month, will you also be showing how you can use stripe payments with route handler API vs the pages API? thank you so much for this!
Thanks for the videos, really amazing!. One thing tho, after adding the folders to (app) and (auth) and changing the middleware configuration, the login and sign up pages look very different. I created my own form instead of the prebuilt ones you used and now the form shrunk and the image I had is not accessible. Any ideas?
I'll add it to the list! React can't do things server side so it ends up being more session management. But there are some good libraries to help with this.
Hmmm, perhaps try something like the following: (^\/$|((?!api|_next\/static|_next\/image|favicon.ico).)*) The ^\/$ part of the regex matches the root ("/") exactly. The | (pipe) acts as a logical OR, so either the root path is matched, or any path not starting with "api", "_next/static", "_next/image", or "favicon.ico" is matched.
@@ethan_mick I ran into the same problem of including the root page inside the middleware exclusion pattern. it looks like Next.js doesn't allow doing it this way. throwing error of "`source` does not start with / for route {"source":"(^/$|((?!random|singin|api).)*)"}" Do you have another solution?
hi i get unhandeled runtime error: Unhandled Runtime Error Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of `Form`.
The redirect is handled by the "export { default } from ..." code. Docs: next-auth.js.org/configuration/nextjs#middleware Essentially you're exporting the default function from Next Auth which is the entire middleware. You can see what this function does here: github.com/nextauthjs/next-auth/blob/4f3241f8ddc84958774707de37be4da05ad1de93/packages/next-auth/src/next/middleware.ts#L99-L154 It does what you'd expect: Read the request, check the cookie, get the JWT, and check if it's valid. If it is, continue. If it's not, redirect the user to the signin page.
