OAuth providers (Google, GitHub) in Supabase - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ service_behavior

intermediate

OAuth Sign-in Flow Behavior

When a user signs in using Google OAuth via Supabase, what is the expected behavior immediately after successful authentication?

A The user must manually refresh the page to complete sign-in.

B The user is redirected to the callback URL with an access token in the URL fragment.

C The user receives an email with a verification link before access is granted.

D The user is redirected to the homepage without any token or session information.

💡 Hint

Think about how OAuth typically returns tokens after authentication.

OAuth providers like Google redirect users back to the app with an access token in the URL fragment, allowing the app to establish a session immediately.

❓ Configuration

intermediate

Configuring GitHub OAuth in Supabase

Which of the following is required to configure GitHub OAuth provider in Supabase?

A GitHub OAuth redirect URI set to 'https://github.com/login/oauth/authorize'.

B GitHub username and password for API access.

C GitHub Client ID and Client Secret from GitHub Developer Settings.

D A personal access token with repo permissions.

💡 Hint

Consider what OAuth apps require to identify themselves.

OAuth apps need a Client ID and Client Secret from GitHub Developer Settings to authenticate users via GitHub.

❓ security

advanced

Preventing OAuth Redirect URI Mismatch

What is the most secure way to avoid redirect URI mismatch errors when configuring OAuth providers in Supabase?

A Set the redirect URI to 'http://localhost' for all environments.

B Use a wildcard redirect URI like 'https://*.example.com/callback' to allow all subdomains.

C Leave the redirect URI blank to accept any redirect URI during OAuth flow.

D Set the redirect URI in the OAuth provider settings exactly to the Supabase callback URL used by your app.

💡 Hint

Redirect URIs must match exactly for security reasons.

OAuth providers require the redirect URI to match exactly what is registered to prevent malicious redirection attacks.

❓ Architecture

advanced

OAuth Token Storage Best Practice

After a user signs in with GitHub OAuth in a Supabase app, where should the access token be stored to maintain security and usability?

A Store the access token securely in an HttpOnly cookie to prevent JavaScript access.

B Store the access token in localStorage for easy access by client scripts.

C Embed the access token in the URL query parameters for sharing.

D Store the access token in a global JavaScript variable.

💡 Hint

Think about how to protect tokens from cross-site scripting attacks.

HttpOnly cookies prevent JavaScript from accessing tokens, reducing risk of token theft via XSS attacks.

🧠 Conceptual

expert

OAuth Provider Scope Impact

How does changing the OAuth scope in GitHub provider settings affect the Supabase authentication process?

A It changes the permissions requested from the user, affecting what data the app can access after sign-in.

B It changes the user's password requirements during sign-in.

C It modifies the OAuth redirect URI dynamically during authentication.

D It disables multi-factor authentication for the user.

💡 Hint

Scopes define what the app can do on behalf of the user.

OAuth scopes specify permissions the app requests, controlling access to user data and actions after sign-in.

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