Next.js + Supabase Auth Course

Details
HKS
Sign in

Next.js (v15) + Auth.js (v5)

Learn to implement Google, Email, and Credentials authentication, including password reset workflows.

Struggling with Auth.js?

Seeing mysterious errors that you can't make head nor tail of?

Can't figure out how to use an email provider not supported by Auth.js?

Confused about how Next.js middleware, Edge runtime, database adapters, and Auth.js fit together?

I can go on and on.

I know how frustrating it can be trying to make authentication work with Auth.js.

I have been there.

I spent weeks (yes weeks!) figuring this stuff out.

Now I have gathered the hard-earned lessons in a comprehensive course.

In this course, you'll master the most used authentication methods: Google social login, magic link email authentication, and traditional username/password credentials, including the password reset functionality. We use Supabase as the database and JWT as the session strategy.

You won't need to waste days piecing together scattered documentation when you can go from initializing your Next.js project to building a production-ready authentication system in just a few hours.

Here's what you're going to learn in the course:

  • Create a Next.js Project
  • Setting up Development Tools
  • Exploring Our Authentication Forms
  • Installing Form-Related Packages
  • Creating the SignInGoogleForm Component
  • Creating the SignInEmailForm Component
  • Creating the SignInEmailPasswordForm Component
  • Creating the SignInForm Component
  • Creating the ForgotPasswordForm Component
  • Creating the ResetPasswordForm Component
  • Understanding Authentication Session Strategies
  • Setting Up Auth.js
  • Setting Up Google OAuth Credentials
  • Implementing Google Authentication
    • Creating the signInWithGoolge Server Action
    • Updating the SignInGoogleForm Component
    • Creating the Home Page
    • 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
  • Creating the useCurrentSession Hook
  • Protecting Routes Using Middleware
  • Handling Post-Authentication Redirects
  • Accessing User Session in Route Handlers
  • Configuring Database Schema
  • Implementing Role-Based Access Control
  • Adding User Role to Session Data
  • Creating the Admin Page
  • Implementing Email Authentication
    • Configuring Resend
    • Creating the EmailSignInTemplate Component
    • Creating the sendEmailSignInLink Function
    • Registering the Resend Provider
    • Creating signInWithEmailSchema
    • Creating the signInWithEmail Server Action
    • Updating the SignInEmailForm Component
    • How Form Validation Works With Conform
    • Creating the CheckEmailPage Component
    • Creating the AuthErrorPage Component
    • Handling Post-Authentication Redirects
    • Testing Email Authentication
    • Handling OAuth Account Linking
    • Setting Up Custom Email Provider
  • Implementing Credentials Authentication
    • Updating the SignInEmailPasswordForm Component
    • Updating the SignInForm Component
    • Creating the signInWithEmailAndPasswordSchema
    • Creating the signInWithEmailAndPassword Server Action
    • Creating the authorizeCredentials Function
    • Installing bcrypt
    • Creating the AuthorizeCredentialsError Class
    • Creating the checkUserExists Function
    • Creating the saveUser Function
    • Creating the updateUser Function
    • Creating the saveToken Function
    • Creating the EmailVerificationTemplate Component
    • Creating the sendVerificationEmail Function
    • Updating the Auth.js Configuration
    • Creating Verify Credentials Email Route Handler
    • Creating the VerifyEmailPage Component
    • Creating the CredentialsEmailVerificationStatusPage Component
    • Testing Credentials Authentication
    • Implementing Reset Password Functionality
    • Updating the ForgotPasswordForm Component
    • Creating the forgotPasswordSchema
    • Creating the requestPasswordReset Server Action
    • Creating the validateAccount Function
    • Creating the PasswordResetTemplate Component
    • Creating the sendPasswordResetEmail Function
    • Creating the CheckEmailPage Component
    • Creating the Password Reset Token Verification Route Handler
    • Updating the ResetPasswordForm Component
    • Creating the resetPasswordSchema
    • Creating the resetUserPassword Server Action
    • Creating the validateToken Function
    • Creating the resetPassword Function
    • Creating the PasswordResetError Class
    • Creating the ResetPasswordSuccessPage Component
    • Testing the Reset Password Functionality
  • Conclusion

Ready to master Auth.js?