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 nextauth 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 signin page for a personalized touch. Along the way, you'll also learn how to add data into sessions.

‍Starter Code:
https://github.com/candraKriswinarto/...

Source:
[supabase] https://supabase.com/
[prisma.io] https://www.prisma.io/
[posgresql] https://www.postgresql.org/
[instantiating PrismaClient] https://www.prisma.io/docs/guides/oth...
[nextauth] https://nextauth.js.org/gettingstar...
[bcrypt] https://www.npmjs.com/package/bcrypt
[prismaadapter] https://www.npmjs.com/package/@nexta...

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 SignUp
28:58 Install and Setup NextAuth
29:27 Create SignIn route
3:50 Create Custom Signin page
35:05 Install and Setup Prisma Adapter
36:18 Authorize function
39:46 Signin with credentials when submit form
46:12 Get Session on Server Component
48:14 Add username in to Session Object
55:53 Create SignOut 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 :   / candra_kriswinarto  
GitHub: https://github.com/candraKriswinarto/
Linkedin:   / candrakriswinarto  

#programming