OAuth providers (Google, GitHub) in Supabase - Mini Project: Build & Apply

Configure OAuth Providers (Google, GitHub) in Supabase

📖 Scenario: You are building a web app that needs users to sign in easily using their existing Google or GitHub accounts. To do this, you will set up OAuth providers in Supabase, a backend platform that helps manage authentication and data.

🎯 Goal: Set up OAuth providers for Google and GitHub in Supabase by creating the initial configuration, adding client IDs and secrets, and enabling the providers for your project.

📋 What You'll Learn

Create a dictionary called oauth_providers with keys for 'google' and 'github' and empty values.

Add configuration variables google_client_id and github_client_id with example client ID strings.

Add client secret variables google_client_secret and github_client_secret with example secret strings.

Enable OAuth providers in the oauth_providers dictionary with client ID and secret.

💡 Why This Matters

🌍 Real World

Many web apps let users sign in using Google or GitHub accounts to avoid creating new passwords. Setting up OAuth providers in Supabase makes this easy and secure.

💼 Career

Understanding how to configure OAuth providers is a key skill for backend developers and cloud engineers working with user authentication and identity management.

1

Create initial OAuth providers dictionary

Create a dictionary called oauth_providers with keys 'google' and 'github', both set to empty dictionaries.

Supabase

# Your code here

Need a hint?

Think of oauth_providers as a box with two smaller empty boxes inside, one for Google and one for GitHub.

2

Add client ID configuration variables

Add two variables: google_client_id set to 'google-client-id-123' and github_client_id set to 'github-client-id-456'.

Supabase

oauth_providers = {
    'google': {},
    'github': {}
}
# Your code here

Need a hint?

Client IDs are like usernames for your app to identify itself to Google and GitHub.

3

Add client secret configuration variables

Add two variables: google_client_secret set to 'google-secret-abc' and github_client_secret set to 'github-secret-def'.

Supabase

oauth_providers = {
    'google': {},
    'github': {}
}
google_client_id = 'google-client-id-123'
github_client_id = 'github-client-id-456'
# Your code here

Need a hint?

Client secrets are like passwords that keep your app's identity safe.

4

Enable OAuth providers with client ID and secret

Update the oauth_providers dictionary to set the 'google' key to a dictionary with keys 'client_id' and 'client_secret' using google_client_id and google_client_secret. Do the same for the 'github' key using github_client_id and github_client_secret.

Supabase

oauth_providers = {
    'google': {},
    'github': {}
}
google_client_id = 'google-client-id-123'
github_client_id = 'github-client-id-456'
google_client_secret = 'google-secret-abc'
github_client_secret = 'github-secret-def'
# Your code here

Need a hint?

Think of this as putting the client ID and secret inside each provider's box so Supabase knows how to connect.