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: • Create Form and Validation With Shadc...
Part 2 - Email and Password Auth: • Build a Complete Sign-Up and Sign-In ...
part 3 - Login with google • Add Authentication to Next.js: Login ...
👨💻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 : / candra_kriswinarto
GitHub: https://github.com/candraKriswinarto/
Linkedin: / candra-kriswinarto
#programming
Watch video Build a Complete Sign-Up and Sign-In with Next.js, NextAuth, PostgreSQL, and Prisma online without registration, duration hours minute second in high quality. This video was added by user Cand Dev 08 August 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 99,007 once and liked it 2.1 thousand people.