Developer Tool

OAuth2 Visualizer

A simple visual guide to common OAuth2 flows used in API integration and backend security.

Authorization Code Flow

Used when a user signs in through an authorization server and the application receives an authorization code that is exchanged for tokens.

Browser-based user login flow using redirect-based authentication.

Tokens involved

    Security notes

      Used for

        Real-World Examples

        Real-World Examples

        OAuth2 can feel complicated, so here are two simple examples with realistic-looking values. The important idea is: the app first proves who it is, then receives a token, and then uses that token to call an API.

        Example values below are fictional and provided for educational purposes only. Do not use them as real client IDs, secrets, URLs or tokens.
        Example 1 — Authorization Code

        Sign in with Microsoft

        A person signs in to the app. First, the app receives a temporary login code. Then the app exchanges that code for an access token that allows it to call APIs. An access token is like a temporary digital key that allows an app to use an API on behalf of a user or system.

        1. 1. The user opens the app:
          https://portal.contoso-app.com
        2. 2. The user clicks Sign in with Microsoft.
        3. 3. The browser goes to the login server:
          https://login.microsoftonline.com/contoso/oauth2/v2.0/authorize
        4. 4. The app sends a login request with these values:
          These values tell Microsoft which app is asking, what access it wants, and where the user should be sent back after login. 
          client_id=84f2a9ab-demo-client
scope=openid profile email User.Read
redirect_uri=https://portal.contoso-app.com/callback
response_type=code
        5. 5. After login, the app receives a temporary login code:
          code=OAQABAAIAAAD-demo-code
        6. 6. The backend swaps the temporary login code for an API access token:
          POST /oauth2/v2.0/token
        7. 7. The app can now call Microsoft Graph: 
          GET https://graph.microsoft.com/v1.0/me
Authorization: Bearer eyJhbGciOiJSUzI1Ni-demo-token
        Example 2 — Client Credentials

        Backend Service Integration

        This is used when one computer system talks to another computer system. No person signs in. Instead, the backend service proves its identity and receives an access token for API access. An access token is like a temporary digital key that allows one system to securely use another system’s API.

        1. 1. A nightly backend job starts automatically.
        2. 2. The backend service identifies itself: 
          client_id=inventory-sync-service
client_secret=••••••••••••••••
        3. 3. The backend asks the login server for an API access token: 
          POST /oauth2/v2.0/token
grant_type=client_credentials
scope=api://inventory-api/.default
        4. 4. The login server returns an access token:
          access_token=eyJhbGciOiJSUzI1Ni-demo-token
        5. 5. The backend calls the protected API: 
          POST https://api.contoso-inventory.com/orders
Authorization: Bearer eyJhbGciOiJSUzI1Ni-demo-token
        6. 6. The systems can now synchronize data automatically.