Next.js + Supabase Auth Course

Details
HKS
Sign in

Next.js (v15) + Supabase Auth

Learn to implement Google, Email (Magic Link), and Email/Password authentication, including password reset workflows.

Struggling with Supabase Auth?

Don't understand how to send authentication emails using a custom provider without relying on auth hooks?

Can't figure out how to solve the "infinite recursion" issue when creating RLS policies for admin users?

Can't wrap your head around the auth error "user is not an admin" (hint: you need an admin client)?

Confused about how Supabase middleware and Next.js middleware fit together?

I can go on and on...

The thing is, Supabase Auth looks straightforward at first glance. But the moment you want to take complete control of the sign up and sign in flow by generating magic links, sending them to users using a custom email provider, verifying the tokens and creating user sessions, you'll run into lots of weird edge cases and get stuck.

I know because I was stuck way more times than I care to remember.

You don't have to get stuck though. I have put my hard-earned lessons in this course, so that you can get started with Supabase Auth in just a few hours, not days.

Not only that, you'll get a solid understanding of the main components that make Supabase Auth work under the hood, knowledge that proves invaluable when you need to customize or troubleshoot authentication flows.

In this course, you'll learn how to implement sign in with:

  • Google
  • Email (using magic links)
  • Email/password (including password reset flow)

Here's what we'll cover:

  • Introduction
  • Creating a Next.js Project
  • Setting Up Development Tools
  • Creating the Home Page
  • Exploring Authentication Forms
  • Setting Up Form Development Tools
  • Creating Authentication Forms
    • Creating the SignUpGoogleForm Component
    • Creating the SignUpEmailForm Component
    • Creating the SignUpEmailPasswordForm Component
    • Creating the SignUpForm Component
    • Creating the SignUp Component
    • Creating the SignInGoogleForm Component
    • Creating the SignInEmailForm Component
    • Creating the SignInEmailPasswordForm Component
    • Creating the SignInForm Component
    • Creating the SignIn Component
    • Creating the ForgotPasswordForm Component
    • Creating the ForgotPassword Component
    • Creating the ResetPasswordForm Component
    • Creating the ResetPassword Component
  • Creating a Supabase Project
  • Understanding Supabase Auth API Server
  • Configuring Supabase Environment Variables
  • Installing Supabase Packages
  • Setting up Supabase Clients
  • Setting up Supabase Middleware
  • Setting up Next.js Middleware
  • Understanding Supabase Auth Session Strategy
  • Implementing Google Authentication
    • Setting Up Google OAuth Credentials
    • Configuring Google Provider in Supabase Dashboard
    • Setting Up Redirect URL in Supabase Dashboard
    • Updating the SignInGoogleForm Component
    • Updating the SignInForm Component
    • Updating the SignUpGoogleForm Component
    • Updating the SignUpForm Component
    • Creating the signInWithGoolge Server Action
    • Creating the Callback Route Handler
    • Creating the AuthError Component
    • Testing Google Authentication
  • Creating the Main Navigation Bar
  • Accessing User Session in Client Components
  • Accessing User Session in Server Components
  • Updating the UserAccountNav Component
  • Implementing Sign-Out Functionality
  • Accessing User Session in Route Handlers
  • Saving User Information in Database
    • Creating the Users Table
    • Enabling RLS on the Users Table
    • Creating the saveUser Function
    • Creating the add_provider PostgreSQL Function
    • Updating the Callback Route Handler
  • Implementing Role-Based Access Control
    • Assigning Roles to Users
    • Accessing User Roles in Client Components
    • Accessing User Roles in Server Components
    • Implementing Role-Based Access Control(RBAC) for the Admin Page
  • Implementing Email Authentication
    • Configuring Email Provider in Supabase
    • Configuring Resend
    • Installing React Email
    • Creating the emailMagicLinkTemplate Component
    • Creating the sendEmailMagicLink Function
    • Creating the emailSchema Form Validation
    • Creating the signInWithEmail Server Action
    • Creating the authAdminClient
    • Creating the CheckEmailPage Component
    • Creating the Confirm Magic Link Route Handler
    • Updating the SignInEmailForm Component
    • Updating the SignUpEmailForm Component
    • Updating the SignInForm Component
    • Updating the SignUpForm Component
    • Testing Email Authentication
    • Understanding Form Validation With Conform
  • Implementing Email/Password Authentication
    • Updating the SignUpEmailPasswordForm Component
    • Updating the SignUpForm Component
    • Creating the signUpEmailPasswordSchema
    • Creating the signUpWithEmailAndPassword Server Action
    • Creating the checkUserExists Function
    • Creating the sendEmailPasswordSignUpLink Function
    • Creating the EmailPasswordSignUpLinkTemplate Component
    • Creating the SignUpCheckEmail Component
    • Creating the SignUpSuccess Component
    • Creating the Confirm Sign Up Route Handler
    • Updating the SignInEmailPasswordForm Component
    • Updating the SignInForm Component
    • Creating the signInEmailPasswordSchema
    • Creating the signInWithEmailAndPassword Server Action
    • Testing Email/Password Authentication
    • Implementing Reset Password Functionality
    • Updating the ForgotPasswordForm Component
    • Creating the requestPasswordReset Server Action
    • Creating the sendPasswordResetLink Function
    • Creating the PasswordResetLinkTemplate Component
    • Creating the ResetPasswordCheckEmail Component
    • Creating the Confirm Recovery Route Handler
    • Updating the ResetPasswordForm Component
    • Creating the resetPasswordSchema
    • Creating the resetUserPassword Server Action
    • Creating the ResetPasswordSuccess Component
    • Testing Reset Password Functionality
  • Conclusion

Ready to master Supabase Auth?