@white-matrix/chainide-sso-sdk

chainide-sso-sdk

Install

yarn add @white-matrix/chainide-sso-sdk

Usage

Warp SSOProvider in root

import React from "react";
import ReactDOM from "react-dom/client";
import {
  SSOEnv,
  SSOLanguageType,
  SSOProvider
} from '@white-matrix/chainide-sso-sdk';

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <SSOProvider
      accessTokenStorageKey="access_token"
      language="en-US" // en-Us or zh
      env="dev"        // dev or main
      loginToastWhenSuccess={() => {
        // show toast
        // toast.success(t('tip.success.login'));
      }}
    >
        <App />
    </SSOProvider>
  </React.StrictMode>
);

Log in/out

import { useSSOStore } from '@white-matrix/chainide-sso-sdk';

const { ssoLogin, ssoLogout, userInfo } = useSSOStore();
return (
    <div>
        <button onClick={()=>{
            if(userInfo) {
                ssoLogout();
            } else {
                ssoLogin();
            }
        }}>
            { userInfo ? "Log out" : "Log in" }
        </button>
    </div>
)

Get user info

If the user information has a value, it means the user has logged in

import { useSSOStore } from "@white-matrix/chainide-sso-sdk";

const { userInfo } = useSSOStore();

Get sso user profile page link

import { useSSOStore } from '@white-matrix/chainide-sso-sdk';

const { ssoProfilePageHref } = useSSOStore();
return (
    <a href={ssoProfilePageHref} target="_blank"> Profile </a>
)

refresh token in request

import axios, { AxiosRequestConfig } from "axios";
import { ssoRefreshToken } from "@white-matrix/chainide-sso-sdk";
import { cloneDeep } from "lodash";
import { toast } from "react-toastify";

const instance = axios.create({
  baseURL: "xxxxx",
  headers: {
    "Content-Type": "application/json",
  },
});

let reqQueue: any[] = [];
let isRefreshingToken = false;
instance.interceptors.response.use(
  (response) => {
    if (response.data) {
      return response.data;
    }
    return response;
  },
  (error) => {
    const config = error.config as AxiosRequestConfig;
    const status = error?.response?.status;
    if ([401, 403].includes(status)) {
      // access token expires
      if (!isRefreshingToken) {
        isRefreshingToken = true;
        ssoRefreshToken()
          .then(() => {
            for (const req of reqQueue) {
              req();
            }
          })
          .finally(() => {
            reqQueue = [];
            isRefreshingToken = false;
          });
      }

      return new Promise((resolve) => {
        // save request in reqQueue
        reqQueue.push(() => {
          if (config.headers) {
            config.headers.Authorization = `Bearer ${
              store.get(EStorageKeys.ACCESS_TOKEN) as string
            }`;
          }
          resolve(instance(cloneDeep(config)));
        });
      });
    } else {
      throw error;
    }
  }
);