OAuth providers (Google, GitHub) in Supabase - Step-by-Step Execution

Process Flow - OAuth providers (Google, GitHub)

User clicks Login

↓

Redirect to OAuth Provider

↓

User authenticates on Provider

↓

Provider sends Auth Code

↓

App exchanges Code for Token

↓

User logged in with Token

User starts login, is sent to Google or GitHub to authenticate, then returns with a token to log in.

Execution Sample

Supabase

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

Starts OAuth login flow with Google provider.

Process Table

Step	Action	State Change	Result
1	User clicks login button	No state change yet	Redirect to Google OAuth page
2	User enters Google credentials	Google verifies user	Google sends auth code to app
3	App receives auth code	App exchanges code for access token	Access token received
4	App uses token to get user info	User session created in app	User logged in
5	User accesses app features	Session active	Access granted

💡

Status Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
authCode	null	received from provider	used for token exchange	null (exchanged)	null
accessToken	null	null	received from provider	used to get user info	valid token
userSession	null	null	null	created	active

Key Moments - 3 Insights

Why does the app redirect the user to Google or GitHub instead of asking for credentials directly?

The app redirects to the OAuth provider to keep user credentials safe and let the provider handle authentication, as shown in step 1 and 2 of the execution table.

What happens to the auth code after the app exchanges it for an access token?

The auth code is used once to get the access token and then discarded, as seen in variable 'authCode' becoming null after step 3.

How does the app know the user is logged in?

After receiving the access token and user info, the app creates a user session, shown in step 4 and tracked by 'userSession' variable.

Visual Quiz - 3 Questions

Look at the execution table, what happens at step 3?

A User enters credentials on provider page

B User session is created

C App exchanges auth code for access token

D User clicks login button

💡 Hint

Check the 'Action' and 'Result' columns for step 3 in the execution table

According to variable_tracker, when does 'userSession' become active?

A After Step 4

B After Step 3

C After Step 2

D At Start

💡 Hint

Look at the 'userSession' row and see when it changes from null to active

If the auth code was never received, what would happen in the flow?

A User would be logged in immediately

B App would not get access token and login would fail

C User session would be created without token

D App would skip OAuth and use password login

💡 Hint

Refer to the importance of authCode in variable_tracker and step 3 in execution_table

Concept Snapshot

OAuth login flow:
1. User clicks login
2. Redirect to provider (Google/GitHub)
3. User authenticates
4. Provider sends auth code
5. App exchanges code for token
6. User session created
Keep credentials safe by using provider's login page.

Full Transcript

This visual execution shows how OAuth providers like Google and GitHub work with Supabase. The user clicks login, then is redirected to the provider's page to enter credentials. The provider sends an authorization code back to the app. The app exchanges this code for an access token. Using the token, the app creates a user session and logs the user in. Variables like authCode, accessToken, and userSession change state step-by-step. Key moments include why redirection is needed, what happens to the auth code, and how the app knows the user is logged in. The quiz tests understanding of these steps and variable changes.

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