Xumm OAuth2 Authorization Code PKCE flow

Part of the "Xumm Universal SDK", which is the preferred way of interacting with the Xumm ecosystem from JS/TS environments: https://www.npmjs.com/package/xumm - https://github.com/XRPL-Labs/Xumm-Universal-SDK

Xumm JS SDK for client side only OAuth2 PKCE (Authorization Code flow) auth

Questions? https://xumm.readme.io/discuss

Demo? https://oauth2-pkce-demo.xumm.dev

NPM: https://www.npmjs.com/package/xumm-oauth2-pkce

Constructor

new XummPkce('api-key-uuidv4', { options })

Options

interface XummPkceOptions {
  redirectUrl: string;      // Defaults to `document.location.href`, e.g. to add state params.
  rememberJwt: boolean;     // Defaults to `true`
  storage: Storage;         // Defaults to window.localStorage
  implicit: boolean;        // Defaults to `false`, `true` allows x-browser sign in, but it less secure
}

Samples:

Event based

Please note: please use the Event based sample (above) if possible: this is more compatible with future releases than the promise-based (await/async) method as displayed below.

See this example (source code) :)

Events (emitted)

• success = User signed in successfully, sdk.state() returns .me and .sdk objects
• retrieved = Retrieved existing session after e.g. browser refresh or mobile redirect, sdk.state() returns .me and .sdk objects
• error = Error, expected (e.g. user cancelled) or unexpected (...), returns argument error with an Error() object, sdk.state() returns null

Promise based sample

1const xumm = new XummPkce("uuid-uuid-uuid-uuid");
2
3const xummSignInHandler = (state) => {
4  if (state.me) {
5    const { sdk, me } = state;
6    console.log("state", me);
7    // Also: sdk » xumm-sdk (npm)
8  }
9};
10// To pick up on mobile client redirects:
11xumm.on("retrieved", async () => {
12  console.log("Retrieved: from localStorage or mobile browser redirect");
13  xummSignInHandler(await xumm.state());
14});
15
16// E.g. when clicking a button:
17document.getElementById("somebutton").onclick = () => {
18  xumm.authorize().then((session) => {
19    xummSignInHandler(session);
20  });
21};

CDN (browser):

A browserified version (latest) is available at JSDelivr & direclty from the xumm.app domain:

1<script src="https://xumm.app/assets/cdn/xumm-oauth2-pkce.min.js"></script>