Build a Complete Sign-Up and Sign-In with Next.js, NextAuth, PostgreSQL, and Prisma

Check out MiniTool MovieMaker: https://bit.ly/4hKFA9A In this tutorial, we'll set up Prisma within a Next.js app router and link it to a PostgreSQL database using Supabase. When users register, we'll save their data securely in the Supabase database. For login authentication, we'll use the next-auth package for email and password verification, and we'll also employ bcrypt to protect passwords by converting them into a hashed format before storing them in the database. Additionally, we'll create a custom sign-in page for a personalized touch. Along the way, you'll also learn how to add data into sessions.

Part 1 - Create the Form: https://youtu.be/GkpEWkKQego?si=Y1XGX-05jIf4Zgml
Part 2 - Email and Password Auth: https://youtu.be/bicCg4GxOP8?si=7YFt3rPCEhN7wO8w
part 3 - Login with google https://youtu.be/k1TL-AzavvY

👨‍💻Starter Code:
https://github.com/candraKriswinarto/nextjs-auth

🔗Source:
[supabase] https://supabase.com/
[prisma.io] https://www.prisma.io/
[posgresql] https://www.postgresql.org/
[instantiating PrismaClient] https://www.prisma.io/docs/guides/other/troubleshooting-orm/help-articles/nextjs-prisma-client-dev-practices#solution
[next-auth] https://next-auth.js.org/getting-started/introduction
[bcrypt] https://www.npmjs.com/package/bcrypt
[prisma-adapter] https://www.npmjs.com/package/@next-auth/prisma-adapter

👉Timestamps:
0:00 - Intro
01:50 - Install and Setup Prisma
03:38 - Setup PostgreSQL on Supabase
05:35 - Create Prisma Model Schema
08:11 - Install Prisma Client
10:50 - Create Register User API
16:55 - Install bcrypt to encrypt the password
19:33 - Register New User with Postman
22:36 - Validate Register API use zod
24:07 - Api integration Sign-Up
28:58 - Install and Setup Next-Auth
29:27 - Create Sign-In route
3:50 - Create Custom Sign-in page
35:05 - Install and Setup Prisma Adapter
36:18 - Authorize function
39:46 - Sign-in with credentials when submit form
46:12 - Get Session on Server Component
48:14 - Add username in to Session Object
55:53 - Create Sign-Out Button on Navbar
01:01:34 - Add Toast Notification
01:05:57 - Get Session on the Client Component
01:12:20 - Get Session on API Route

🌎 Find Me Here:
Instagram : https://www.instagram.com/candra_kriswinarto/
GitHub: https://github.com/candraKriswinarto/
Linkedin: https://www.linkedin.com/in/candra-kriswinarto/

#programming

Видео Build a Complete Sign-Up and Sign-In with Next.js, NextAuth, PostgreSQL, and Prisma канала Cand Dev