Build a Complete Sign-Up and Sign-In with Next.js, NextAuth, PostgreSQL, and Prisma
73.3 هزار بار بازدید -
11 ماه پیش
-
In this tutorial, we'll set
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:
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...
[next-auth] https://next-auth.js.org/getting-star...
[bcrypt] https://www.npmjs.com/package/bcrypt
[prisma-adapter] https://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 : Instagram: candra_kriswinarto
GitHub: https://github.com/candraKriswinarto/
Linkedin: LinkedIn: candra-kriswinarto
#programming
👨💻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...
[next-auth] https://next-auth.js.org/getting-star...
[bcrypt] https://www.npmjs.com/package/bcrypt
[prisma-adapter] https://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 : Instagram: candra_kriswinarto
GitHub: https://github.com/candraKriswinarto/
Linkedin: LinkedIn: candra-kriswinarto
#programming
11 ماه پیش
در تاریخ 1402/05/17 منتشر شده
است.
73,365
بـار بازدید شده