OAuth providers (Google, GitHub) in Supabase - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to initialize Supabase client with the correct URL.

Supabase

const supabase = createClient('[1]', 'public-anon-key');

Drag options to blanks, or click blank then click option'

Ahttps://xyzcompany.supabase.co

Bhttp://localhost:3000

Chttps://api.github.com

Dhttps://google.com

Attempts:

3 left

💡 Hint

Common Mistakes

Using localhost URL instead of the Supabase project URL.

Using unrelated URLs like Google or GitHub.

The Supabase client needs the project URL to connect properly.

2fill in blank

medium

Complete the code to start OAuth sign-in with Google provider.

Supabase

const { data, error } = await supabase.auth.signInWithOAuth({ provider: '[1]' });

Drag options to blanks, or click blank then click option'

Agithub

Btwitter

Cfacebook

Dgoogle

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'GitHub' or other providers instead of 'google'.

Capitalizing the provider name incorrectly.

To sign in with Google, the provider must be set to 'google'.

3fill in blank

hard

Fix the error in the code to sign in with GitHub OAuth provider.

Supabase

const { data, error } = await supabase.auth.signInWithOAuth({ provider: '[1]' });

Drag options to blanks, or click blank then click option'

AgitHub

BGitHub

Cgithub

Dgit_hub

Attempts:

3 left

💡 Hint

Common Mistakes

Capitalizing provider name incorrectly.

Using underscores or camelCase in provider name.

The provider name must be all lowercase 'github' to work correctly.

4fill in blank

hard

Fill both blanks to configure OAuth redirect URL and scopes for GitHub.

Supabase

const { data, error } = await supabase.auth.signInWithOAuth({ provider: 'github', options: { redirectTo: '[1]', scopes: '[2]' } });

Drag options to blanks, or click blank then click option'

Ahttps://myapp.com/callback

Bread:user

Cwrite:repo

Dhttps://example.com/redirect

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong redirect URL not registered in GitHub app settings.

Using invalid or unsupported scopes.

The redirect URL must be your app's callback URL, and scopes define permissions like 'read:user'.

5fill in blank

hard

Fill all three blanks to handle OAuth sign-in and check for errors.

Supabase

try {
  const { data, error } = await supabase.auth.signInWithOAuth({ provider: '[1]' });
  if ([2]) {
    console.error('Error:', [3]);
  }
} catch (err) {
  console.error('Unexpected error:', err);
}

Drag options to blanks, or click blank then click option'

Agoogle

Berror

Cerror.message

Dgithub

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong provider string.

Checking wrong variable for errors.

Logging error object directly instead of its message.

Use 'github' as provider, check if 'error' exists, and log 'error.message' for details.