Рет қаралды 67,168
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.
👨💻Starter Code:
github.com/candraKriswinarto/...
🔗Source:
[supabase] supabase.com/
[prisma.io] www.prisma.io/
[posgresql] www.postgresql.org/
[instantiating PrismaClient] www.prisma.io/docs/guides/oth...
[next-auth] next-auth.js.org/getting-star...
[bcrypt] www.npmjs.com/package/bcrypt
[prisma-adapter] www.npmjs.com/package/@next-a...
👉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 : / candra_kriswinarto
GitHub: github.com/candraKriswinarto/
Linkedin: / candra-kriswinarto
#programming