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

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

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

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

Hint

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

Practice

1. What does supabase.auth.signInWithOAuth({ provider: 'google' }) do in a Supabase app?

easy

A. Fetches user data without login

B. Creates a new Google account automatically

C. Deletes the current user session

D. Starts the login process using a Google account

Solution

1. Step 1: Understand the function purpose

   The function signInWithOAuth is used to start OAuth login with a specified provider.

2. Step 2: Identify the provider used

   Here, the provider is 'google', so it triggers Google OAuth login flow.

3. Final Answer:

   Starts the login process using a Google account -> Option D

4. Quick Check:

   OAuth login with Google = Starts login [OK]

Hint: OAuth signInWithOAuth starts login with chosen provider [OK]

Common Mistakes:

• Thinking it creates a new account automatically
• Confusing login start with data fetching
• Assuming it logs out the user

2. Which of the following is the correct syntax to start GitHub OAuth login in Supabase?

easy

A. supabase.auth.signInWithOAuth(provider='github')

B. supabase.auth.signInWithOAuth('github')

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

D. supabase.auth.signInWithOAuth({ provider: github })

Solution

1. Step 1: Check the method signature

   The method expects an object with a key named 'provider' and a string value.

2. Step 2: Validate each option

   supabase.auth.signInWithOAuth({ provider: 'github' }) correctly uses an object with provider as string 'github'. Others have syntax errors or missing quotes.

3. Final Answer:

   supabase.auth.signInWithOAuth({ provider: 'github' }) -> Option C

4. Quick Check:

   Correct object syntax with provider string = supabase.auth.signInWithOAuth({ provider: 'github' }) [OK]

Hint: Use object with provider key and string value for OAuth [OK]

Common Mistakes:

• Passing provider as a plain string without object
• Missing quotes around 'github'
• Using wrong parameter syntax

3. Given this code snippet, what will be the output if the user successfully logs in with GitHub?

const { data, error } = await supabase.auth.signInWithOAuth({ provider: 'github' });
console.log(data.session ? 'Logged in' : 'Not logged in');

medium

A. Not logged in

B. Logged in

C. Error thrown

D. Undefined

Solution

1. Step 1: Understand the signInWithOAuth response

   On successful login, data.session contains session info, so it is truthy.

2. Step 2: Evaluate the console.log condition

   The ternary checks if data.session exists; if yes, prints 'Logged in'.

3. Final Answer:

   Logged in -> Option B

4. Quick Check:

   Successful login means data.session truthy = 'Logged in' [OK]

Hint: Check if data.session exists to confirm login success [OK]

Common Mistakes:

• Assuming error is thrown on success
• Confusing data.session with error presence
• Ignoring async/await behavior

4. You wrote this code to start Google OAuth login:

supabase.auth.signInWithOAuth(provider: 'google');

Why does this cause an error?

medium

A. Missing curly braces around the object argument

B. Provider name should be uppercase 'Google'

C. signInWithOAuth does not accept any arguments

D. The method should be called on supabase.auth.user

Solution

1. Step 1: Check the argument syntax

   The method expects an object argument, so it must be wrapped in curly braces.

2. Step 2: Identify the error cause

   Passing provider: 'google' without braces is invalid syntax causing an error.

3. Final Answer:

   Missing curly braces around the object argument -> Option A

4. Quick Check:

   Object argument needs braces = Missing curly braces around the object argument [OK]

Hint: Always wrap provider in curly braces as an object [OK]

Common Mistakes:

• Using provider name with wrong case
• Calling method on wrong object
• Passing provider as plain string

5. You want users to sign in with either Google or GitHub using Supabase OAuth. Which setup step is essential before calling signInWithOAuth?

hard

A. Register your app and set redirect URLs in both Google and GitHub developer consoles

B. Create user accounts manually in Supabase for Google and GitHub users

C. Install Google and GitHub SDKs in your frontend app

D. Set environment variable SUPABASE_OAUTH_SECRET to 'true'

Solution

1. Step 1: Understand OAuth provider requirements

   OAuth providers require you to register your app and configure redirect URLs in their developer portals.

2. Step 2: Confirm necessary setup before login

   Without this setup, OAuth login will fail or redirect incorrectly.

3. Final Answer:

   Register your app and set redirect URLs in both Google and GitHub developer consoles -> Option A

4. Quick Check:

   OAuth setup requires app registration and redirect URLs [OK]

Hint: Always register app and set redirect URLs before OAuth login [OK]

Common Mistakes:

• Thinking manual user creation is needed
• Assuming SDK installation is required
• Setting unrelated environment variables