OAuth providers (Google, GitHub) in Supabase - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is OAuth in the context of cloud services?

OAuth is a way to let users log in to an app using their accounts from other services like Google or GitHub, without sharing their passwords.

beginner

How does Supabase use OAuth providers like Google and GitHub?

Supabase connects to OAuth providers to let users sign in easily by redirecting them to the provider's login page and then back to the app with a secure token.

beginner

What information does an OAuth provider share with your app after login?

The provider shares basic user info like email and name, plus a token that proves the user is authenticated.

beginner

Why is it safer to use OAuth providers instead of asking users to create new passwords?

Because users don’t have to create or remember new passwords, and the app never sees their real passwords, reducing risk of leaks.

beginner

What is a redirect URL in OAuth login flow?

It is the web address where the user is sent back after logging in with the OAuth provider, so the app can finish the login process.

What does OAuth allow users to do?

A Log in using accounts from other services

B Create new passwords for every app

C Share their passwords with apps

D Bypass login screens

OAuth lets users log in using existing accounts from providers like Google or GitHub.

Which of these is NOT an OAuth provider?

A Google

B GitHub

C Supabase

D Facebook

Supabase is a backend platform that uses OAuth providers but is not itself an OAuth provider.

What does the OAuth provider send back to your app after login?

A User's password

B App's source code

C User's credit card info

D Authentication token and user info

The provider sends an authentication token and basic user info, not sensitive data like passwords.

Why is the redirect URL important in OAuth?

A It stores user passwords

B It is where users go after login to complete authentication

C It blocks unauthorized users

D It encrypts user data

The redirect URL is where the user returns after logging in to finish the login process.

Which is a benefit of using OAuth providers for login?

A Improved security and easier login

B Apps get direct access to user passwords

C Users must remember more passwords

D Users cannot log out

OAuth improves security by not sharing passwords and makes login easier for users.

Explain how OAuth providers like Google and GitHub help users log in to apps using Supabase.

Think about the steps from clicking login to being signed in.

Describe why using OAuth providers is safer than asking users to create new passwords for every app.

Consider password safety and user convenience.

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