Next.js + Supabase Auth Course

Details
HKS
Sign in

Google OAuth in Next.js (v15): From Scratch

Learn how to implement Google authentication from scratch—without using any auth libraries.

Sure, with an auth library, you can implement Google authentication in your Next.js app in just 5 minutes.

But what happens when something breaks? When you need to customize the flow? When you're stuck debugging a mysterious error in production?

That's when you realize: treating auth libraries like a black box can come back to haunt you.

You've probably wondered how these auth libraries actually work under the hood.

How do they handle the OAuth flow? What security measures do they implement? How do they manage sessions and tokens?

You no longer have to wonder. I've created the resource I wish I had when I first tackled Google authentication.

In this course, I'll walk you through implementing Google authentication from scratch—no auth libraries. Together, we'll demystify concepts such as OAuth 2.0 protocol, OpenID Connect, Authorization Code Flow, and more.

By the end of this course, you'll have:

  • A production-ready Google authentication implementation that you built yourself
  • Deep understanding of Google authentication flows that will help you debug issues in minutes, not hours
  • The confidence to customize Google authentication to meet any project requirement
  • The skills to implement authentication with any OAuth provider, not just Google
  • Clean, maintainable code that you actually understand—because you wrote every line

Here's everything we'll cover:

  • Introduction
  • Understanding the Google Sign-In Flow
  • Understanding the Authorization Code Flow
  • Understanding the Authorization Code Flow With PKCE Extension
  • OAuth 2.0 vs OpenID Connect
  • What is a User Session?
  • JWT Session Strategy vs Database Session Strategy
  • Creating a Next.js Project
  • Installing shadcn/ui
  • Setting up Google OAuth
  • Setting up Supabase
  • Installing Essential Development Tools
  • Installing jose, uncrypto and uuid
  • Creating the Sign-in Form
  • Creating the Sign-in Page
  • Creating the Main Navigation Bar
  • Creating the Home Page
  • Creating the Client Page
  • Creating the Server Page
  • Creating the Admin Page
  • Creating the Sign-in Server Action
    • Generating State
    • How the State Parameter Prevents CSRF Attacks
    • Generating Code Verifier
    • Generating Code Challenge
    • Creating the Authorization URL
    • Creating a Google Instance
    • Saving the OAuth State
  • Creating the OAuth Callback Route Handler
    • Decrypting JWT
    • Exchanging the Authorization Code for Tokens
    • Encoding Client Credentials
    • Assigning User Role
    • Creating User
    • Creating User Session
    • Creating the Auth Error Page
  • Accessing the User Session Server-Side
  • Accessing the User Session in Client Components
  • Implementing Sign Out
  • Protecting Routes Using Middleware
  • Updating User Session
  • Implementing Auth Rate Limit
  • Testing Google Authentication
  • Conclusion

Ready to break free from auth libraries and take full control of your application's Google authentication?