Authorization code flow in Rest API - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to start the authorization request by redirecting the user to the authorization endpoint.

Rest API

GET /authorize?response_type=[1]&client_id=CLIENT_ID&redirect_uri=REDIRECT_URI&scope=read

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

Aid_token

Btoken

Crefresh_token

Dcode

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'token' instead of 'code' for response_type.

The response_type=code tells the authorization server to return an authorization code.

2fill in blank

medium

Complete the code to exchange the authorization code for an access token.

Rest API

POST /token
Content-Type: application/x-www-form-urlencoded

grant_type=[1]&code=AUTH_CODE&redirect_uri=REDIRECT_URI&client_id=CLIENT_ID&client_secret=CLIENT_SECRET

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

Aauthorization_code

Brefresh_token

Cclient_credentials

Dpassword

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'refresh_token' or other grant types incorrectly.

The grant_type=authorization_code is used to exchange the code for tokens.

3fill in blank

hard

Fix the error in the redirect URI parameter to ensure it matches the registered URI exactly.

Rest API

GET /authorize?response_type=code&client_id=CLIENT_ID&redirect_uri=[1]&scope=read

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

Ahttps://example.com/callback?extra=1

Bhttps://example.com/callback/

Chttps://example.com/callback

Dhttp://example.com/callback

Attempts:

3 left

💡 Hint

Common Mistakes

Adding trailing slash or query parameters to redirect URI.

The redirect URI must exactly match the registered URI without extra slashes, query parameters, or different schemes.

4fill in blank

hard

Fill both blanks to correctly include the state parameter and response type in the authorization request.

Rest API

GET /authorize?response_type=[1]&client_id=CLIENT_ID&redirect_uri=REDIRECT_URI&state=[2]

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

Acode

Bxyz123

Cabc456

Dtoken

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'token' as response_type or missing state parameter.

The response_type should be 'code' and state is a random string to prevent CSRF attacks.

5fill in blank

hard

Fill all three blanks to correctly parse the authorization code from the redirect URI and prepare the token request.

Rest API

redirect_uri = 'https://example.com/callback?code=[1]&state=xyz123'

code = redirect_uri.split('[2]')[1].split('&')[0]

payload = {'grant_type': '[3]', 'code': code, 'redirect_uri': 'https://example.com/callback', 'client_id': 'CLIENT_ID', 'client_secret': 'CLIENT_SECRET'}

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

Aauthcode123

Bcode=

Cauthorization_code

Dstate=

Attempts:

3 left

💡 Hint

Common Mistakes

Splitting on wrong parameter or using wrong grant_type.

The code is extracted by splitting on 'code=' and the grant_type is 'authorization_code' for the token request.

Practice

1. What is the main purpose of the authorization code in the Authorization Code Flow?

easy

A. To exchange it for an access token securely

B. To directly access user data

C. To authenticate the user with a password

D. To refresh the access token automatically

Solution

1. Step 1: Understand the role of the authorization code

   The authorization code is a temporary code given after user consent, not the token itself.

2. Step 2: Identify what the app does with the code

   The app sends this code to the authorization server to get an access token securely.

3. Final Answer:

   To exchange it for an access token securely -> Option A

4. Quick Check:

   Authorization code = temporary code for token exchange [OK]

Hint: Authorization code is a temporary code, not a token [OK]

Common Mistakes:

• Thinking the code directly accesses data
• Confusing code with user password
• Assuming code refreshes tokens

2. Which HTTP method is typically used by the app to exchange the authorization code for an access token?

easy

A. DELETE

B. GET

C. PUT

D. POST

Solution

1. Step 1: Recall the token exchange request

   The app sends the authorization code to the token endpoint to get an access token.

2. Step 2: Identify the HTTP method used

   This request uses POST because it sends data securely in the request body.

3. Final Answer:

   POST -> Option D

4. Quick Check:

   Token exchange uses POST method [OK]

Hint: Token exchange sends data securely, so use POST [OK]

Common Mistakes:

• Using GET which exposes data in URL
• Confusing PUT or DELETE with token exchange
• Assuming token exchange is a simple GET request

3. Given this simplified token exchange request in Python:

import requests
response = requests.post('https://auth.example.com/token', data={
    'code': 'abc123',
    'client_id': 'myapp',
    'client_secret': 'secret',
    'redirect_uri': 'https://myapp.com/callback',
    'grant_type': 'authorization_code'
})
print(response.json().get('access_token'))

What will this code print if the exchange is successful?

medium

A. The authorization code 'abc123'

B. The access token string from the server

C. An error message about invalid client

D. None

Solution

1. Step 1: Understand the request purpose

   The code sends a POST request to exchange the authorization code for an access token.

2. Step 2: Analyze the printed output

   If successful, the server returns JSON with an 'access_token' key, which is printed.

3. Final Answer:

   The access token string from the server -> Option B

4. Quick Check:

   response.json()['access_token'] = access token [OK]

Hint: Successful exchange returns access token, not code [OK]

Common Mistakes:

• Printing the code instead of token
• Expecting error message on success
• Not accessing JSON correctly

4. In the Authorization Code Flow, a developer wrote this code snippet to exchange the code:

response = requests.get('https://auth.example.com/token', params={
    'code': 'abc123',
    'client_id': 'myapp',
    'client_secret': 'secret',
    'redirect_uri': 'https://myapp.com/callback',
    'grant_type': 'authorization_code'
})

What is the main issue with this code?

medium

A. Incorrect redirect URI format

B. Missing the authorization code parameter

C. Using GET instead of POST for token exchange

D. Client secret should not be sent

Solution

1. Step 1: Check HTTP method for token exchange

   The token exchange requires a POST request to send sensitive data securely.

2. Step 2: Identify the problem in the code

   The code uses GET with query parameters, which is insecure and not standard for this flow.

3. Final Answer:

   Using GET instead of POST for token exchange -> Option C

4. Quick Check:

   Token exchange must use POST, not GET [OK]

Hint: Token exchange always uses POST, not GET [OK]

Common Mistakes:

• Using GET exposes secrets in URL
• Forgetting to send client secret
• Assuming redirect URI format is wrong

5. A web app uses Authorization Code Flow with PKCE (Proof Key for Code Exchange). Which additional step does PKCE add to improve security?

hard

A. The app sends a code verifier with the token request to prove it initiated the flow

B. The app uses client secret only without authorization code

C. The user enters their password twice during login

D. The app skips the authorization code and uses implicit flow

Solution

1. Step 1: Understand PKCE purpose

   PKCE adds a code verifier and challenge to prevent interception of the authorization code.

2. Step 2: Identify the added step in the flow

   The app sends the code verifier with the token request to prove it started the flow and prevent attacks.

3. Final Answer:

   The app sends a code verifier with the token request to prove it initiated the flow -> Option A

4. Quick Check:

   PKCE adds code verifier step for security [OK]

Hint: PKCE adds code verifier to token request for security [OK]

Common Mistakes:

• Thinking PKCE removes authorization code
• Confusing PKCE with password prompts
• Assuming PKCE uses implicit flow