OAuth providers (Google, GitHub) in Supabase

Introduction

OAuth providers let users sign in using their Google or GitHub accounts. This makes login easy and secure without creating new passwords.

You want users to log in quickly without making new accounts.

You want to use trusted services like Google or GitHub for authentication.

You want to avoid handling passwords and improve security.

You want to allow users to connect their existing Google or GitHub profiles.

You want to simplify user management by relying on OAuth providers.

Syntax

Supabase

supabase.auth.signInWithOAuth({ provider: 'google' })
supabase.auth.signInWithOAuth({ provider: 'github' })

Use the provider name as a string: 'google' or 'github'.

This method opens a popup or redirects to the provider's login page.

Examples

Starts Google OAuth login flow.

Supabase

await supabase.auth.signInWithOAuth({ provider: 'google' })

Starts GitHub OAuth login flow.

Supabase

await supabase.auth.signInWithOAuth({ provider: 'github' })

Starts Google OAuth and redirects user after login.

Supabase

await supabase.auth.signInWithOAuth({ provider: 'google', options: { redirectTo: 'https://yourapp.com/welcome' } })

Sample Program

This code creates a Supabase client and starts the Google OAuth login flow. If there is an error, it logs it. Otherwise, it logs that the login started.

Supabase

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = 'https://xyzcompany.supabase.co'
const supabaseKey = 'public-anonymous-key'
const supabase = createClient(supabaseUrl, supabaseKey)

async function signInWithGoogle() {
  const { data, error } = await supabase.auth.signInWithOAuth({ provider: 'google' })
  if (error) {
    console.error('Error during Google sign-in:', error.message)
  } else {
    console.log('Google sign-in started:', data)
  }
}

signInWithGoogle()

Important Notes

Make sure to set up OAuth credentials in your Supabase project dashboard first.

Redirect URLs must match those configured in Google or GitHub developer settings.

OAuth login opens a popup or redirects the user to the provider's login page.

Summary

OAuth providers let users sign in with Google or GitHub accounts easily.

Use supabase.auth.signInWithOAuth({ provider: 'google' }) or 'github' to start login.

Set up credentials and redirect URLs in Supabase and provider dashboards before using.