Single Sign-On

1. Configuration - Set the network

2. /login page - add login button and send to Pangea Passport

3. /callback page - receive callback

4. / home page - check for logged in users

Examples below are for a Reactjs website.

1. Configuration - Set the network

Configure to use a specific network (in this case, the Pangea demo network). Run this at the javascript root of your app (e.g. App.tsx in Reactjs) so they are set before used

import { api } from '@tonomy/tonomy-id-sdk';

//Testnet Configuration
api.setSettings({
    ssoWebsiteOrigin: "https://accounts.testnet.pangea.web4.world",
    blockchainUrl: "https://blockchain-api-testnet.pangea.web4.world"
});

//Mainnet Configuration
api.setSettings({
    ssoWebsiteOrigin: "https://accounts.pangea.web4.world",
    blockchainUrl: "https://blockchain-api.pangea.web4.world"
});

2. Login page

On your login page set it to call the ExternalUser.loginWithPangea function when pressed. Set your /callback page path as shown below. This is where your the user will be redirect to in your application, after they complete the login process.

async function onButtonPress() {
    await api.ExternalUser.loginWithTonomy({ callbackPath: '/callback' });
}

Request data sharing

During the login process, you can additionally request information from the user account by adding a dataRequest object when calling the loginWithPangea function.

await api.ExternalUser.loginWithTonomy({ callbackPath: '/callback', dataRequest: { username: true } });

Currently, only the username is able to be requested. We are working on supporting more data sharing options soon including basic personal information (name, date of birth, etc...) and sharing of data between applications.

Styling the Pangea login button

To use the Pangea login button styles, import the stylesheet and use the class tonomy-login-button on your button.

import "@tonomy/tonomy-id-sdk/build/api/tonomy.css";

or

<link href="https://unpkg.com/@tonomy/tonomy-id-sdk/build/api/tonomy.css" />

3. Callback page

In your /callback page, call the ExternalUser.verifyLoginRequest() function when the page renders. This will catch the login parameters from the URL and return a logged in user object.

// call this when the page loads
// e.g. in useEffect() in Reactjs
const user = await api.ExternalUser.verifyLoginRequest();

4. Home page

On your home page or when your app first loads (App.tsx in reactjs), check if the user is already logged in.

import { api, SdkError, SdkErrors } from '@tonomy/tonomy-id-sdk';

// call this when the page loads
// e.g. in useEffect() in Reactjs
try {
    const user = await api.ExternalUser.getUser();
} catch (e) {
    if (e instanceof SdkError) {
        switch (e.code) {
            case SdkErrors.AccountNotFound:
                // User has not logged in yet
            case SdkErrors.UserNotLoggedIn:
                // User logged in but key has expired. User needs to login again
            default:
                // unexpected error!
        }
    }
}