Set up Next-Auth with Next.js and Prisma with this ultimate guide!
Are you looking to add authentication to your Next.js app with Prisma as your database? Look no further! This ultimate guide will walk you through the process of setting up Next-Auth with Next.js and Prisma.
Step 1: Set up Next.js
First, you’ll need to set up a Next.js application. You can do this by running the following command in your terminal:
npx create-next-app@latest my-nextjs-app
Step 2: Install Next-Auth
Once your Next.js application is set up, you can install Next-Auth by running the following command:
npm install next-auth
Step 3: Set up Prisma
Next, you’ll need to set up Prisma as your database. You can do this by following the installation instructions on the Prisma website.
Step 4: Create an Authentication Provider
Now that Next-Auth and Prisma are set up, you can create an authentication provider in your Next.js app. This provider will handle the authentication logic for your app.
Step 5: Set up the Authentication Pages
Next, you’ll need to set up the authentication pages for your app. Next-Auth provides default pages for signing in, signing out, and signing up, but you can customize these pages to fit the design of your app.
Step 6: Connect Next-Auth to Prisma
Finally, you’ll need to connect Next-Auth to Prisma. This will allow you to store user data in your Prisma database and perform authentication checks against that data.
And there you have it! With these steps, you can set up Next-Auth with Next.js and Prisma to add authentication to your app. Happy coding!
>>>>> UPDATE <<<<< You no longer need the cherry picked version! The latest version (4.22.0) now includes this code.
Check the official docs here: https://next-auth.js.org/configuration/initialization#route-handlers-app
Thank you
Let's say you set up 1) traditional auth, 2) google oauth, and 3) facebook oauth in your app. When a user logs in with all three of these methods, how should the app determine that this is indeed the same user?
Will the middleware strategy to protect the app wil also protect the API routes? Can we specify them in the config ?
Thanks a lot, amazing!
Can you advise where on the doc it is showing how to set up the providers.tsx with the new app router ?
I really appreciate all your efforts in explaining these concepts.
It's so helpful. But I do have a question about the client side session.
It seems like all the extra info added isn't reflected on the session obtained via useSession(client side)?
so? we can't use this anymore?
are you willing to make new update?
Great job! Do you know what it means when I try to import PrismaClient? – Cannot resolve symbol 'PrismaClient' – I also have installed @prisma/client :O
Thanks 🙂
If anyone else has an issue with the middleware not securing the pages you specify, make sure the middleware.ts file is at the same folder level as your root page. For me this was in my /src folder.
Hi, Ethan! First, I just have to thank you for these videos. While I don't typically watch YouTube tutorials, I've found your content to be incredibly informative and up-to-date.😁
I have a question related to using JWT for authentication. I've heard it is unsafe because there's no way of invalidating sessions, as they are self contained. AFAIK, their lifetime should therefore be short (minutes, hours at most). However, it's annoying to log in every few minutes too.
Do you have any experience with implementing refresh token rotation for credentials login with next-auth + prisma? Or with blacklisting tokens to imitate "revoking" them? I would love to see a tutorial about that. Or maybe even about "classic" session based authentication. Again, thank you for your amazing tutorials – I hope you have a lovely day 🌟
You are really the best tutor I have ever seen . First video about next-auth that is complete thank you
Hands down the best auth video about next and next-auth I've ever seen. You've got a new subscriber. Thank you so much!
Hey Ethan, thanks for the great vid! Any way you could show how to do this with a provider like Google?
23:27 "Thanks Chrome, so secure."
Gets me every time 😄
Thank you very much Ethan. I really like your fast forward pace. Much much appreciated <3
Note that the middleware.ts file should be "at the root or in the src directory (same level as your pages)" (see: docs). I have an src directory (not sure if this the preferred way to set up the project!), so it had to go in there, rather than at the project root as shown in the video.
Thx for the video.
how to generate the login page? I have followed the tutorial, but can't find where the login form appears
Thanks for this awesome tutorial 🙂