OAuth2 overview in Flask - Step-by-Step Execution

Concept Flow - OAuth2 overview

User wants to access app

↓

App redirects user to OAuth2 Provider

↓

User logs in and grants permission

↓

Provider sends authorization code to app

↓

App exchanges code for access token

↓

App uses token to access user data

↓

User data received and app shows content

This flow shows how a user logs in via OAuth2: the app redirects to a provider, user authorizes, app gets a token, then accesses user data.

Execution Sample

Flask

from flask import Flask, redirect, request
app = Flask(__name__)

oauth_provider_url = 'https://provider.com/oauth2/authorize'

@app.route('/login')
def login():
  return redirect(oauth_provider_url)

@app.route('/callback')
def callback():
  code = request.args.get('code')
  token = exchange_code_for_token(code)
  user_info = get_user_info(token)
  return f"Hello {user_info['name']}"

This Flask code redirects user to OAuth2 provider, handles callback with code, exchanges it for token, then fetches user info.

Execution Table

Step	Action	Input/Condition	Output/Result
1	User visits /login	User clicks login	Redirect to OAuth2 provider URL
2	User logs in at provider	User enters credentials	Provider authenticates user
3	Provider redirects to /callback	Authorization code sent in URL	App receives code
4	App exchanges code for token	Code received	Access token received
5	App requests user info	Access token used	User info JSON received
6	App displays user info	User info received	Page shows 'Hello {user name}'
7	End	No more steps	OAuth2 login flow complete

💡 OAuth2 flow ends after user info is displayed and user is logged in.

Variable Tracker

Variable	Start	After Step 3	After Step 4	After Step 5	Final
code	None	Received from URL	Used for token exchange	Used for user info request	None (used up)
token	None	None	Received from provider	Used to get user info	Valid access token
user_info	None	None	None	Received JSON data	User info dict with name

Key Moments - 3 Insights

Why does the app redirect the user to the OAuth2 provider instead of logging in directly?

The app redirects because OAuth2 delegates login to the provider, so the app never handles user passwords directly. See execution_table step 1 and 2.

What is the authorization code and why is it important?

The code is a temporary token sent by the provider to the app after user login. The app exchanges it for an access token. See execution_table step 3 and 4.

Why does the app need an access token?

The access token lets the app request user data securely from the provider. Without it, the app can't get user info. See execution_table step 4 and 5.

Visual Quiz - 3 Questions

Look at the execution_table, what does the app receive at step 4?

A Access token

B Authorization code

C User info JSON

D Redirect URL

💡 Hint

Check the 'Output/Result' column for step 4 in execution_table.

At which step does the user grant permission to the app?

A Step 3

B Step 1

C Step 2

D Step 5

💡 Hint

Look at the 'Action' and 'Input/Condition' columns around user login and authorization.

If the app never receives the authorization code, what happens?

A App can still get user info

B App cannot get access token

C User is logged in automatically

D App redirects user again

💡 Hint

Refer to variable_tracker for 'code' and execution_table step 4.

Concept Snapshot

OAuth2 lets apps log users in via a provider.
User is redirected to provider to login and authorize.
Provider sends an authorization code to app.
App exchanges code for access token.
App uses token to get user info.
This keeps user passwords safe and secure.

Full Transcript

OAuth2 is a way for apps to let users log in using another service, like Google or Facebook. The app sends the user to the OAuth2 provider to log in and approve access. After approval, the provider sends a code back to the app. The app then exchanges this code for an access token. Using this token, the app can request user information securely. This process protects user passwords and lets apps access only allowed data.

Practice

1. What is the main purpose of OAuth2 in a Flask application?

easy

A. Store user passwords securely in the Flask app database

B. Allow users to log in using external services without sharing passwords

C. Encrypt all data sent between client and server

D. Automatically create user accounts without permission

Solution

1. Step 1: Understand OAuth2 role

   OAuth2 lets apps use other services for login without handling user passwords directly.

2. Step 2: Identify correct purpose in Flask context

   Flask apps use OAuth2 to let users sign in via external providers safely.

3. Final Answer:

   Allow users to log in using external services without sharing passwords -> Option B

4. Quick Check:

   OAuth2 = external login without password sharing [OK]

Hint: OAuth2 means login without storing passwords [OK]

Common Mistakes:

• Thinking OAuth2 stores passwords
• Confusing OAuth2 with encryption
• Assuming OAuth2 creates accounts automatically

2. Which Flask extension is commonly used to simplify OAuth2 integration?

easy

A. Flask-WTF

B. Flask-SQLAlchemy

C. Authlib

D. Flask-Mail

Solution

1. Step 1: Recall Flask extensions for OAuth2

   Authlib is a popular Flask extension designed to handle OAuth2 easily.

2. Step 2: Eliminate unrelated extensions

   Flask-SQLAlchemy manages databases, Flask-WTF handles forms, Flask-Mail sends emails, so they don't handle OAuth2.

3. Final Answer:

   Authlib -> Option C

4. Quick Check:

   OAuth2 in Flask = Authlib [OK]

Hint: Authlib is for OAuth2 in Flask [OK]

Common Mistakes:

• Choosing Flask-SQLAlchemy for OAuth2
• Confusing form or mail extensions with OAuth2
• Not knowing Authlib's purpose

3. Given this Flask OAuth2 code snippet, what will print(user_info) output after successful login?

from authlib.integrations.flask_client import OAuth
app = Flask(__name__)
oauth = OAuth(app)
google = oauth.register('google', client_id='id', client_secret='secret', access_token_url='https://accounts.google.com/o/oauth2/token', authorize_url='https://accounts.google.com/o/oauth2/auth', api_base_url='https://www.googleapis.com/oauth2/v1/', client_kwargs={'scope': 'openid email profile'})

@app.route('/login')
def login():
    redirect_uri = url_for('authorize', _external=True)
    return google.authorize_redirect(redirect_uri)

@app.route('/authorize')
def authorize():
    token = google.authorize_access_token()
    user_info = google.get('userinfo').json()
    print(user_info)
    return 'Logged in'

medium

A. Empty dictionary because token is invalid

B. An error because 'userinfo' endpoint is missing

C. A string 'Logged in' printed to console

D. A dictionary with user's email, name, and profile info

Solution

1. Step 1: Understand OAuth2 flow in code

   After login, the app gets an access token and calls 'userinfo' endpoint to get user data as JSON.

2. Step 2: Analyze user_info content

   The google.get('userinfo').json() returns a dictionary with user details like email and name.

3. Final Answer:

   A dictionary with user's email, name, and profile info -> Option D

4. Quick Check:

   OAuth2 userinfo call = user data dict [OK]

Hint: OAuth2 userinfo returns user data dictionary [OK]

Common Mistakes:

• Expecting a string instead of dictionary
• Assuming endpoint is missing
• Thinking token is invalid without error

4. What is wrong with this Flask OAuth2 snippet?

@app.route('/authorize')
def authorize():
    token = google.authorize_access_token
    user_info = google.get('userinfo').json()
    return user_info

medium

A. Missing parentheses when calling authorize_access_token

B. Using 'userinfo' instead of 'user_info' endpoint

C. Returning JSON directly causes syntax error

D. No redirect URI specified in authorize route

Solution

1. Step 1: Check method call syntax

   The code uses google.authorize_access_token without parentheses, so it references the method, not calls it.

2. Step 2: Understand effect of missing parentheses

   Without calling the method, token is a function object, causing errors later.

3. Final Answer:

   Missing parentheses when calling authorize_access_token -> Option A

4. Quick Check:

   Method call needs () [OK]

Hint: Always add () to call methods [OK]

Common Mistakes:

• Forgetting parentheses on method calls
• Confusing endpoint names
• Assuming JSON return causes error

5. You want your Flask app to request only the user's email and profile during OAuth2 login with Google. Which scope value should you use when registering the OAuth client?

hard

A. 'openid email profile'

B. 'read write'

C. 'user:email user:profile'

D. 'email profile openid offline_access'

Solution

1. Step 1: Identify correct OAuth2 scopes for Google

   Google uses 'openid email profile' scopes to request user's email and profile info.

2. Step 2: Eliminate incorrect scopes

   'read write' is generic, 'user:email user:profile' is GitHub style, 'offline_access' requests refresh tokens, not needed here.

3. Final Answer:

   'openid email profile' -> Option A

4. Quick Check:

   Google OAuth2 scopes for email/profile = 'openid email profile' [OK]

Hint: Use 'openid email profile' for Google OAuth2 scopes [OK]

Common Mistakes:

• Using GitHub or generic scopes
• Adding unnecessary offline_access scope
• Confusing scope syntax