Logging in using the authorization code grant with PKCE

Instructions for logging in using the authorization code grant with PKCE

Login as admin in Swagger UI

  1. Go to https://localhost:8443/api/swagger/default.

  2. Select Authorize.

  3. Enter the following values in the form:

    Key Value
    client_id admin-swagger
    client_secret n8HF35qzZkmsukHJzzz9LnN8m9Mf97uq
  4. Select Authorize.

  5. Select Close.

Create a client

  1. Select POST /api/admin/{tid}/clients API.

  2. Select Try it out.

  3. Enter default as tid (tenant ID).

  4. Use the following json as the body:

    {
        "authorization_server_id": "default",
        "client_id": "client-pkce",
        "client_name": "My app",
        "grant_types": [
            "authorization_code"
        ],
        "public": true,
        "redirect_uris": [
            "https://example.com/callback"
        ],
        "token_endpoint_auth_method": "none",
        "response_types": [
            "token",
            "id_token",
            "code"
        ],
        "scopes": [
        "email",
        "openid"
        ]
    }
    
  5. Select Execute.

Make the authorize request

  • Generate a random code_verifier string that is at least 43-character long but no longer than 128 characters.

    SyHPzEZGl18pR7L5z5qvEcgPdbL7h4mtJVb63Po4UAagzF8lhgAa5BYjWFSwPhpRmkNYPl9lbZKGl2VLh3ezJQsvgtCE8Wma
    
  • Calculate code_challange with the following formula:

    BASE64URL-ENCODE(SHA256(ASCII(code_verifier)))
    

    Note

    code_challange is a base64-url-encoded string of the SHA256 hash of code_verifier.

    SHA256 cannot be hex-encoded. If you test it with one of the online sha256 encoders, it can fail as they generate hex-encoded strings.

Sample

code_challenge generated from the provided code_verifier

G-o5Mtv_Ln-94juZnrqSbS2aBFkKLDpZhzoXFTuG7XM
  • Your application initializes a redirect in the browser to the following URL:

    https://localhost:8443/default/default/oauth2/authorize
    ?client_id=client-pkce
    &scope=openid
    &redirect_uri=https%3A%2F%2Fexample.com%2Fcallback
    &response_type=code
    &code_challenge_method=S256
    &code_challenge=G-o5Mtv_Ln-94juZnrqSbS2aBFkKLDpZhzoXFTuG7XM
    
  • The user authenticates and approves the access to the data on the consent page.

    Note

    To test the authentication, you can use the user:user credentials.

Exchange the authorization code

  • Once the user has granted the access to the application, the authorization server makes a redirect to the requested redirect_uri with the authorization code in the query parameter.

    https://example.com/callback
    ?code=cYegZcNgCgWz1Q-OmHfexwSzkJEaUwYdYObZB5Fm6a
    
  • Your application exchanges the authorization code for the access and ID tokens.

    curl -X POST -k https://localhost:8443/default/default/oauth2/token \
    -H "Content-type: application/x-www-form-urlencoded" \
    -d "grant_type=authorization_code&client_id=client-pkce&redirect_uri=https%3A%2F%2Fexample.com%2Fcallback&code=cYegZcNgCgWz1Q-OmHfexwSzkJEaUwYdYObZB5Fm6a&code_verifier=SyHPzEZGl18pR7L5z5qvEcgPdbL7h4mtJVb63Po4UAagzF8lhgAa5BYjWFSwPhpRmkNYPl9lbZKGl2VLh3ezJQsvgtCE8Wma"
    

Expected response

{
   "access_token": "..",
   "expires_in": 3600,
   "id_token": "..",
   "scope": "openid",
   "token_type": "bearer"
}