Course lesson

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.

Duration
6 min
Access
Free
Transcript
Retained from source evidence

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