Social Login: OAuth Providers Setup

Social logins (such as login with GitHub or Google) improve user onboarding by eliminating the need to create new password credentials. Let us configure GitHub OAuth with Supabase.

1. Registering the OAuth Application on GitHub

To connect GitHub OAuth to Supabase, you must register an OAuth application on GitHub:

1. Log in to GitHub and navigate to Settings -> Developer Settings -> OAuth Apps -> New OAuth App.
2. Enter an application name and homepage URL.
3. In the Authorization callback URL field, copy the redirect URL from your Supabase Dashboard:
   • Navigate to the Supabase Dashboard -> Authentication -> Providers -> GitHub.
   • Copy the callback URL (it looks like: https://your-project-id.supabase.co/auth/v1/callback).
4. Click Register application.
5. Once registered, copy the Client ID and generate a new Client Secret.

2. Configuring Credentials in Supabase

Save the GitHub credentials inside Supabase:

1. Return to the Supabase Dashboard -> Authentication -> Providers -> GitHub.
2. Paste the Client ID and Client Secret into their respective fields.
3. Click Save to enable the provider.

3. Triggering OAuth Login in Frontend

To launch the OAuth authorization flow in your frontend app, call signInWithOAuth() and specify the provider name:

import { supabase } from "../lib/supabase";

async function loginWithGitHub() {
  const { error } = await supabase.auth.signInWithOAuth({
    provider: "github",
    options: {
      // The page URL where users should be redirected after successful authorization
      redirectTo: "http://localhost:3000/dashboard",
    },
  });

  if (error) {
    console.error("OAuth login failed:", error.message);
  }
}

This redirects the browser to the GitHub authorization screen. Once the user approves the permissions request, GitHub redirects them back to your specified redirectTo URL with the authorization session parameters attached.