Skip to content

Latest commit

 

History

History
134 lines (106 loc) · 5.5 KB

using-authgear-without-sdk-client-side.md

File metadata and controls

134 lines (106 loc) · 5.5 KB
description
Integrate Authgear on the client side in mobile apps without SDK

Using Authgear without SDK (Client side)

Authgear is built based on OIDC 2.0 standard, you can integrate it into any application framework without SDK.

Supported grant types

Authorization Code Flow with Proof Key for Code Exchange (PKCE)

For public clients like mobile apps and SPAs, PKCE flow should be used. It uses code_challenge_method & code_challenge parameters in the authentication requests and the code_verifier parameter in the code exchange step. It ensures that the application that starts the code flow is the same one that finishes it.

OpenID Connect Configurations

This endpoint serves as a JSON document containing the OpenID Connect configuration of your Authgear project. That includes the authorization endpoint, the token endpoint, and the JWKs endpoint. The URL looks like:

https://AUTHGEAR_ENDPOINT/.well-known/openid-configuration

Initiate Signup and Login

To singup or login, redirect the user to the /authorize endpoint. The URL should look like this:

https://AUTHGEAR_ENDPOINT/oauth2/authorize
?response_type=code
&client_id=CLIENT_ID
&redirect_uri=REDIRECT_URL
&scope=openid+offline_access+https://authgear.com/scopes/full-userinfo
&code_challenge_method=S256
&code_challenge=CODE_CHALLENGE
&state=abc

Code Example

{% tabs %} {% tab title="curl" %}

curl -X GET 'https://AUTHGEAR_ENDPOINT/oauth2/authorize' \
--data-urlencode 'response_type=code' \
--data-urlencode 'client_id=CLIENT_ID' \
--data-urlencode 'redirect_uri=REDIRECT_URL' \
--data-urlencode 'scope=openid offline_access https://authgear.com/scopes/full-userinfo' \
--data-urlencode 'code_challenge_method=S256' \
--data-urlencode 'code_challenge=CODE_CHALLENGE' \
--data-urlencode 'state=abc'

{% endtab %}

{% tab title="JavaScript" %}

const randomData = secureRandomBytes(32); // (1)
const code_verifier = base64url(randomData); // (2) 
const hash = await sha256(utf8(code_verifier));
const code_challenge = base64url(hash);

// (1) A 32-byte long secure random data using secure random number generator
// (2) this string must be between 43 and 126 bytes long

const params = new URLSearchParams();
params.set("response_type", "code");
params.set("client_id", "CLIENT_ID");
params.set("redirect_uri", "REDIRECT_URL");
params.set("scope", ["openid", "offline_access", "https://authgear.com/scopes/full-userinfo"].join(" "));
params.set("code_challenge_method", "S256");
params.set("code_challenge", code_verifier);
params.set("state", "abc");

const endpoint = new URL("https://AUTHGEAR_ENDPOINT/oauth2/authorize");
const authorizationURL = endpoint.toString() + "?" + params.toString();

{% endtab %} {% endtabs %}

  • “S256” is supported in code_challenge_method.
  • The code_verifier is a string of length between 43 and 128 generated on the client side. It should be unique for each authorization request. The code_challenge is a SHA-256 hash of the verifier.
  • The state parameter is optional. Authgear will include the value of the state parameter when redirecting the user back to the client application. Learn more at how-to-use-the-oauth-2.0-state-parameter.md
  • After login, the user will be redirected to [redirect_uri]?code=[AUTH_CODE], the AUTH_CODE is needed in the next step
  • See the supported scopes at supported-scopes.md

Handling Callback

After receiving the AUTH_CODE in your application, make a POST request to the /token endpoint.

{% tabs %} {% tab title="curl" %}

curl -X POST 'https://AUTHGEAR_ENDPOINT/oauth2/token' \
-H 'Content-Type: application/x-www-form-urlencoded' \
-d 'grant_type=authorization_code' \
-d 'client_id=CLIENT_ID' \
-d 'code=AUTH_CODE' \
-d 'redirect_uri=REDIRECT_URL' \
-d 'code_verifier=CODE_VERIFIER'

{% endtab %}

{% tab title="JavaScript" %}

const tokenEndpoint = new URL("https://AUTHGEAR_ENDPOINT/oauth2/token");
const form = new URLSearchParams();
form.set("grant_type", "authorization_code");
form.set("client_id", "CLIENT_ID");
form.set("code", AUTH_CODE); //Authorization code returned from authgear server
form.set("redirect_uri", "REDIRECT_URL");
form.set("code_verifier", code_verifier);
const response = await fetch(tokenEndpoint.toString(), {
  method: "POST",
  headers: {
    "Content-Type": "application/x-www-form-urlencoded",
  },
  body: form,
});
const responseJSON = await response.json();

{% endtab %} {% endtabs %}

  • Include the code_verifier used for generating the code_challenge to prove both requests come from the same client.
  • The response may contain the ID token, the access token and the refresh token depending on the scope supplied by the previous step.

Logout

When the user logs out, revoke the refresh token by making a POST request to the revocation_endpoint with the refresh token in the body in application/x-www-form-urlencoded as content-type. The endpoint looks like https://AUTHGEAR_ENDPOINT/oauth2/revoke, it can be found in OpenID Connect configuration document.

Then clear the access token and refresh token stored locally in your app.

Verifying JWT Access Token

Include the access token in the Authorization headers of the frontend requests to verify your user’s identity. Follow this guide to learn about validating the JWT in your application server jwt.md