Add Social Login to Your App

Social login removes the friction of creating and remembering a password, which typically increases signup conversion by 20-40%. Users trust familiar providers like Google and GitHub and appreciate not having to verify an email address. It also reduces support burden by eliminating password reset requests. The tradeoff is a dependency on the OAuth provider - if it goes down, affected users cannot log in.

Navigate to Authentication > Providers in your Supabase dashboard and enable Google or GitHub. Create an OAuth app in the provider's developer console - for Google this is Google Cloud Console, for GitHub it is Developer Settings. Copy the Client ID and Client Secret into Supabase and set the authorized redirect URI to `https://your-project.supabase.co/auth/v1/callback`. Supabase handles the OAuth flow, token exchange, and user creation automatically.

Call `supabase.auth.signInWithOAuth({ provider: 'google', options: { redirectTo: window.location.origin + '/auth/callback' } })` when the user clicks your sign-in button. Supabase redirects the browser to the provider's login page, and after authorization, back to your callback URL with an authorization code. Create a route handler at `/auth/callback` that calls `supabase.auth.exchangeCodeForSession(code)` and then redirects to your app. The user is now authenticated and their session is stored in a cookie.

After login, call `supabase.auth.getUser()` to retrieve the authenticated user including their email, name, and avatar URL from the OAuth provider. Supabase stores these in the `auth.users` table automatically. Create a `profiles` table linked by user ID where you store additional app-specific data and populate it via a database trigger on `auth.users` insert. Use the avatar URL to display the user's profile picture without asking them to upload one.

If a user signs up with email first and later tries to sign in with Google using the same address, Supabase will link the accounts automatically by default. Configure this behavior in your Supabase auth settings under the account linking options. Communicate clearly in your UI that the same account is accessible via multiple providers. Test the linking flow explicitly to ensure users are not accidentally creating duplicate accounts.