Using SDK 4.x with Sapphire

[louwrens]

We’re stuck on node>=16 and the react native SDK 5.x requires node>=18, is there a way to use Sapphire with SDK 4.x?

• SDK Version: “4.0.0”
• Expo or Bare Version: Expo
• Screenshots of error: N/A
• Related to Custom Authentication? N/A

I though that OPENLOGIN_NETWORK.TESTNET and OPENLOGIN_NETWORK.MAINNET would refer to Sapphire, but it turns out not?

const web3auth = new Web3Auth(WebBrowser, EncryptedStorage, {
  clientId,
  network: OPENLOGIN_NETWORK.TESTNET,
  loginConfig: {
    jwt: {
      verifier,
      clientId,
      typeOfLogin: LOGIN_PROVIDER.JWT,
    },
  },
});

[vjgee]

@louwrens Welcome Aboard!

Your request has been forwarded to our Dev team and we will get back with further updates.

[maharshi]

Hi @louwrens, unfortunately you will have to upgrade in order to use the sapphire networks. And no, OPENLOGIN_NETWORK.TESTNET and OPENLOGIN_NETWORK.MAINNET do not refer to sapphire ones, these refer to the legacy testnet and legacy mainnet respectively.
Please plan on upgrading to the latest version of the SDK for latest features and security updates.

[louwrens]

Makes sense, I’m struggling to find an example of using custom JWT auth with sdk 5.0.0 - do you perhaps have an example? I can’t seem to reverse engineer the fields required for the login method in sdk 5.0…

[maharshi]

@louwrens I am trying to get more information about the new SDK from the product team. Please expect a reply in few days.

[louwrens]

No problem, I managed to get it working… for future reference this is how it can look:

import {
  LoginParams,
  UX_MODE,
  OpenLoginOptions,
  LoginConfig,
  TypeOfLogin,
  THEME_MODES,
  OPENLOGIN_NETWORK_TYPE,
  WhiteLabelData,
} from "@toruslabs/openlogin-utils";
import Web3Auth, { LOGIN_PROVIDER } from "@web3auth/react-native-sdk";
import * as SecureStore from "expo-secure-store";
import * as WebBrowser from "expo-web-browser";

export interface Web3AuthConfig {
  clientId: string;
  network: OPENLOGIN_NETWORK_TYPE;
  verifier: string;
  redirectUrl: string;
}

const createWeb3AuthProvider = (web3Auth: Web3AuthConfig) => {
  const loginConfig: LoginConfig = {
    jwt: {
      verifier: web3Auth.verifier,
      typeOfLogin: "jwt" as TypeOfLogin,
      clientId: web3Auth.clientId,
    },
  };

  const initParams: OpenLoginOptions = {
    clientId: web3Auth.clientId,
    network: web3Auth.network as OPENLOGIN_NETWORK_TYPE,
    redirectUrl: web3Auth.redirectUrl,
    uxMode: UX_MODE.REDIRECT,
    loginConfig,
    whiteLabel: {
      appName: "",
      appUrl: "",
      mode: THEME_MODES.dark,
      theme: {
        primary: Colors["electric-violet"],
        red: Colors["coral-red"],
        success: Colors.starship,
        warning: Colors.rose,
        error: Colors.rose,
        info: Colors["pacific-blue"],
        white: Colors.white,
      },
    } as WhiteLabelData,
  };
  return new Web3Auth(WebBrowser, SecureStore, initParams);
};

const web3Auth = {} as Web3AuthConfig;

const web3AuthProvider = createWeb3AuthProvider(web3Auth);
const accessToken = "";
await web3AuthProvider.login({
  loginProvider: LOGIN_PROVIDER.JWT,
  mfaLevel: "none",
  extraLoginOptions: {
    redirectUrl: web3Auth.redirectUrl,
    id_token: accessToken,
    verifierIdField: "sub",
  },
} as LoginParams);