Example Flow

4.2

The following step-by-step example illustrates using the authorization code grant type.

Step-by-step

The high level overview is this:

  • Create a log-in link with the app’s client ID, redirect URL, and state parameters
  • The user sees the authorization prompt and approves the request
  • The user is redirected back to the app’s server with an auth code
  • The app exchanges the auth code for an access token
The app initiates the authorization request

The app initiates the flow by crafting a URL containing ID, scope, and state. The app can put this into an <a href=""> tag.

<a href="https://authorization-server.com/oauth/authorize
?response_type=code&client_id=mRkZGFjM&state=5ca75bd30">
Connect Your Account</a>
The user approves the request

Upon being directed to the auth server, the user sees the authorization request shown in the illustration below. If the user approves the request, they will be redirected back to the app along with the auth code and state parameters.

Example Authorization Request

The service redirects the user back to the app

The service sends a redirect header redirecting the user’s browser back to the app that made the request. The redirect will include a “code” in the URL and the original “state”.

https://example-app.com/cb?code=Yzk5ZDczMzRlNDEwY&state=5ca75bd30
The app exchanges the auth code for an access token

The app uses the auth code to get an access token by making a POST request to the authorization server.

POST /oauth/token HTTP/1.1
Host: authorization-server.com

code=Yzk5ZDczMzRlNDEwY
&grant_type=code
&redirect_uri=https://example-app.com/cb
&client_id=mRkZGFjM
&client_secret=ZGVmMjMz

The auth server validates the request and responds with an access token and optional refresh token if the access token will expire.

Response:

{
  "access_token": "AYjcyMzY3ZDhiNmJkNTY",
  "refresh_token": "RjY2NjM5NzA2OWJjuE7c",
  "token_type": "bearer",
  "expires": 3600
}