1. Build the Authorization URL

In order to initiate the WebAuthn, we proceed the same way as we would if we would be using Authorization Code Flow we need to build the authorization URL and redirect the user to the authorization server. All the passwordless logic is handled completely by 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, photos to access photos and files to have access to user files.

• 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 perform the Web Authentication Flow on the server. After your account will be 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.