1. Build the Authorization URL

In order to initiate the Authorization Code Flow, we need to build the authorization URL and redirect the user to the authorization server. The URL is constructed as follows:

Let's break it down...

• URL of the authorization endpoint on the server. How is this path constructed will differ between OAuth providers (such as Keycloak, Okta, etc.).

• response_type=

  OAuth 2.0 response type. In this case, we are using the Authorization Code flow, so we are requesting the authorization code.

• client_id=

  Client ID of the application. This is a public identifier for the client, and it is used by the authorization server to identify the application when redirecting the user back to the client.

• redirect_uri=

  Redirect URI of the client. This is the URL that the authorization server will redirect the user back to after the user has logged in and granted permissions. The redirect URI must match one of the URIs registered for the client ID.

• scope=

  Scopes requested by the client. Scopes are used to limit the access of the access token. In this case, we are requesting the offline_access scope, which allows the client to obtain a refresh token.

• state=

  State parameter. This is an optional parameter that the client can use to maintain state between the request and callback. The authorization server includes this parameter when redirecting the user back to the client, allowing the client to verify that the response is coming from the server and not a malicious third party (CSRF attack).

All that we now need to do is click the button below and login with our credentials. For the purposes of this playground we already took the liberty to create user with password user for you. After your credentials are successfully verified, you will be redirected back to this playground, to the URL we have specified in the redirect_uri query parameter of the request.