OAuth integration in Astro - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the OAuth client from the Astro integration package.

Astro

import { [1] } from '@astrojs/oauth';

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

AOAuthClient

BOAuthService

COAuthProvider

DOAuth

Attempts:

3 left

💡 Hint

Common Mistakes

Using OAuthClient or OAuthProvider which are not exported by '@astrojs/oauth'.

Trying to import from a wrong package.

The correct import from '@astrojs/oauth' is 'OAuth' which provides the OAuth client functionality.

2fill in blank

medium

Complete the code to create a new OAuth instance with GitHub as the provider.

Astro

const oauth = new OAuth({
  provider: '[1]',
  clientId: import.meta.env.GITHUB_CLIENT_ID,
  clientSecret: import.meta.env.GITHUB_CLIENT_SECRET
});

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

Agithub

Bgoogle

Cfacebook

Dtwitter

Attempts:

3 left

💡 Hint

Common Mistakes

Using uppercase 'GitHub' instead of lowercase 'github'.

Choosing a different provider name that does not match the service.

To configure GitHub OAuth, the provider must be set to 'github' in lowercase.

3fill in blank

hard

Fix the error in the OAuth callback handler to correctly extract the code parameter.

Astro

export async function get({ url }) {
  const code = url.searchParams.[1]('code');
  if (!code) {
    return new Response('Missing code', { status: 400 });
  }
  // Continue with token exchange
}

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

Aget

Bset

Chas

DgetAll

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'set' which modifies parameters instead of reading.

Using 'has' which returns a boolean, not the value.

Using 'getAll' which returns an array, not a string.

The 'get' method of URLSearchParams retrieves the first value associated with the given key, which is needed to get the 'code' parameter.

4fill in blank

hard

Fill both blanks to complete the OAuth token exchange and return a JSON response.

Astro

const token = await oauth.[1](code);
return new Response(JSON.stringify({ accessToken: token.[2] }), {
  headers: { 'Content-Type': 'application/json' }
});

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

AgetAccessToken

Baccess_token

Ctoken

DfetchToken

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'fetchToken' which is not a method of the OAuth instance.

Accessing 'token' property instead of 'access_token'.

The method to exchange code for token is 'getAccessToken', and the token property holding the token string is 'access_token'.

5fill in blank

hard

Fill all three blanks to create an OAuth redirect URL with the correct scopes and state parameter.

Astro

const redirectUrl = oauth.[1]({
  scope: '[2]',
  state: [3]
});

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

AgetAuthorizationUrl

Bread:user user:email

CJSON.stringify({ csrfToken: 'abc123' })

DgenerateUrl

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'generateUrl' which is not the correct method.

Providing scopes as an array or comma-separated string instead of space-separated.

Passing state as a plain object instead of a string.

The method to get the authorization URL is 'getAuthorizationUrl'. The scopes for GitHub OAuth to read user info and email are 'read:user user:email'. The state parameter is often a JSON string with CSRF token for security.

Practice

1. What is the main purpose of OAuth integration in an Astro app?

easy

A. Store user passwords securely in the app database

B. Automatically update the app without user permission

C. Allow users to log in without sharing their password directly

D. Encrypt all user data on the client side

Solution

1. Step 1: Understand OAuth's role

   OAuth allows users to authenticate using a third-party service without sharing their password with your app.

2. Step 2: Identify the correct purpose

   Among the options, only allowing login without sharing passwords matches OAuth's main goal.

3. Final Answer:

   Allow users to log in without sharing their password directly -> Option C

4. Quick Check:

   OAuth = secure login without password sharing [OK]

Hint: OAuth means login without giving your password away [OK]

Common Mistakes:

• Thinking OAuth stores passwords in your app
• Confusing OAuth with data encryption
• Assuming OAuth updates the app automatically

2. Which of the following is the correct way to import OAuth2Client in an Astro component?

easy

A. import OAuth2Client from '@astrojs/oauth2client';

B. import OAuth2Client from 'astro/oauth2';

C. const OAuth2Client = require('@astrojs/oauth');

D. import { OAuth2Client } from '@astrojs/oauth';

Solution

1. Step 1: Recall Astro OAuth import syntax

   Astro uses named imports from '@astrojs/oauth' for OAuth2Client.

2. Step 2: Check each option

   Only import { OAuth2Client } from '@astrojs/oauth'; uses correct named import syntax and package name.

3. Final Answer:

   import { OAuth2Client } from '@astrojs/oauth'; -> Option D

4. Quick Check:

   Correct import = import { OAuth2Client } from '@astrojs/oauth'; [OK]

Hint: Use named import from '@astrojs/oauth' for OAuth2Client [OK]

Common Mistakes:

• Using require() instead of import
• Wrong package name or path
• Default import instead of named import

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

const client = new OAuth2Client({
  clientId: 'abc123',
  clientSecret: 'secret',
  redirectUri: 'https://myapp.com/callback'
});

const token = await client.getToken('auth_code_here');
console.log(token.access_token);

medium

A. Undefined because token is not returned

B. An access token string printed to the console

C. An error because getToken is not async

D. The client secret printed instead of token

Solution

1. Step 1: Understand getToken usage

   getToken is an async method that returns a token object with access_token on success.

2. Step 2: Analyze console.log output

   Logging token.access_token prints the access token string if login succeeds.

3. Final Answer:

   An access token string printed to the console -> Option B

4. Quick Check:

   Successful getToken = access token output [OK]

Hint: getToken returns token object with access_token property [OK]

Common Mistakes:

• Assuming getToken is synchronous
• Expecting token to be undefined
• Confusing clientSecret with access token

4. Identify the error in this OAuth integration snippet:

const client = new OAuth2Client({
  clientId: 'abc123',
  redirectUri: 'https://myapp.com/callback'
});

const token = await client.getToken('auth_code_here');

medium

A. Missing clientSecret in OAuth2Client configuration

B. redirectUri should be a relative path, not full URL

C. getToken should not be awaited

D. clientId should be a number, not string

Solution

1. Step 1: Check required OAuth2Client config

   OAuth2Client requires clientId, clientSecret, and redirectUri to work properly.

2. Step 2: Identify missing property

   The snippet lacks clientSecret, which is mandatory for token exchange.

3. Final Answer:

   Missing clientSecret in OAuth2Client configuration -> Option A

4. Quick Check:

   clientSecret missing = error [OK]

Hint: Always include clientSecret with clientId and redirectUri [OK]

Common Mistakes:

• Omitting clientSecret
• Misusing redirectUri format
• Not awaiting async getToken

5. You want to implement OAuth login in Astro that supports multiple providers (Google, GitHub). Which approach best handles this using OAuth2Client?

hard

A. Create separate OAuth2Client instances for each provider with their own configs

B. Use one OAuth2Client instance with combined clientId and clientSecret

C. Manually build OAuth URLs without OAuth2Client for flexibility

D. Store all provider secrets in a single environment variable

Solution

1. Step 1: Understand provider-specific configs

   Each OAuth provider requires its own clientId, clientSecret, and redirectUri.

2. Step 2: Choose best practice for multiple providers

   Creating separate OAuth2Client instances per provider keeps configs clean and manageable.

3. Final Answer:

   Create separate OAuth2Client instances for each provider with their own configs -> Option A

4. Quick Check:

   Separate clients per provider = best practice [OK]

Hint: Use one OAuth2Client per provider for clean config [OK]

Common Mistakes:

• Combining credentials into one client
• Avoiding OAuth2Client for no reason
• Mixing secrets in one variable