Authenticate Users with GitHub OAuth using Supabase and Next.js Client Components

Supabase includes multiple authentication strategies. In this lesson, we create a Supabase client to trigger the OAuth authentication flow with GitHub.

Additionally, we discuss the differences between Client and Server Components in the Next.js App Router:

• Client Components: user interactivity
• Server Components: data fetching

Lastly, we create a Route Handler to exchange an authentication code from GitHub for their Supabase session.

Code Snippets

Authenticate with GitHub OAuth

await supabase.auth.signInWithOAuth({
  provider: "github",
  options: {
    redirectTo: "http://localhost:3000/auth/callback",
  },
});

Exchange code for Supabase session

await supabase.auth.exchangeCodeForSession(code);

Resources

• Supabase Auth Helper docs
• Next.js App Router docs