Skip to main content

Custom Authentication in PnP React Native SDK

Custom Authentication is a way to authenticate users with your own custom authentication service. For example, while authenticating with Google, you have the ability to use your own Google Client ID and Dashboard to authenticate users directly. To login using your own custom JWT issuers like Auth0, AWS Cognito, or Firebase, you can add the your configuration to the loginConfig field of the SdkInitParams object. The loginConfig field is a key value map. The key should be one of the LOGIN_PROVIDER in its string form, and the value should be a JS Object specified below.

First, configure your own verifier in the Web3Auth Dashboard to use custom authentication.

note

This is a paid feature and the minimum pricing plan to use this SDK in a production environment is the Growth Plan. You can use this feature in the development environment for free.

Create Custom Verifier

Check out how to create a Custom Verifier on the Web3Auth Dashboard.

using dapp share
  • dApp Share is only returned for the Custom verifiers.
  • Also, 2FA should be enabled for the account using it. Use mfaLevel = MFALevel.MANDATORY in the LoginParams during login. See MFA for more details.

Then, you should specify the details of your verifier in the value of the LoginConfig map, the details of this map are as follows.

LoginConfig​

Arguments​

ParameterDescription
verifierThe name of the verifier that you have registered on the Web3Auth Dashboard. It's a mandatory field, and accepts string as a value.
typeOfLoginType of login of this verifier, this value will affect the login flow that is adapted. For example, if you choose google, a Google sign-in flow will be used. If you choose jwt, you should be providing your own JWT token, no sign-in flow will be presented. It's a mandatory field, and accepts TypeOfLogin as a value.
clientIdClient id provided by your login provider used for custom verifier. e.g. Google's Client ID or Web3Auth's client Id if using 'jwt' as TypeOfLogin. It's a mandatory field, and accepts string as a value.
name?Display name for the verifier. If null, the default name is used. It accepts string as a value.
description?Description for the button. If provided, it renders as a full length button. else, icon button. It accepts string as a value.
verifierSubIdentifier?The field in JWT token which maps to verifier id. Please make sure you selected correct JWT verifier id in the developer dashboard. It accepts string as a value.
logoHover?Logo to be shown on mouse hover. It accepts string as a value.
logoLight?Light logo for dark background. It accepts string as a value.
logoDark?Dark logo for light background. It accepts string as a value.
mainOption?Show login button on the main list. It accepts oolean as a value. Default value is false.
showOnModal?Whether to show the login button on modal or not. Default value is true.
showOnDesktop?Whether to show the login button on desktop. Default value is true.
showOnMobile?Whether to show the login button on mobile. Default value is true.
jwtParametersCustom jwt parameters to configure the login. Useful for Auth0 configuration. It accepts JwtParameters as a value.

typeOfLogin​

export type TypeOfLogin =
  | "google"
  | "facebook"
  | "reddit"
  | "discord"
  | "twitch"
  | "apple"
  | "github"
  | "linkedin"
  | "twitter"
  | "weibo"
  | "line"
  | "email_password"
  | "passwordless"
  | "jwt";

export const LOGIN_PROVIDER = {
  GOOGLE: "google",
  FACEBOOK: "facebook",
  REDDIT: "reddit",
  DISCORD: "discord",
  TWITCH: "twitch",
  APPLE: "apple",
  LINE: "line",
  GITHUB: "github",
  KAKAO: "kakao",
  LINKEDIN: "linkedin",
  TWITTER: "twitter",
  WEIBO: "weibo",
  WECHAT: "wechat",
  EMAIL_PASSWORDLESS: "email_passwordless",
  SMS_PASSWORDLESS: "sms_passwordless",
  JWT: "jwt",
} as const;

Example​

import * as WebBrowser from "@toruslabs/react-native-web-browser";
// or  import * as WebBrowser from "expo-web-browser"; (for expo)

const web3auth = new Web3Auth(WebBrowser, {
  clientId: "BC5bANkU4-fil7C5s1uKzRfF0VGqbuaxDQiLnQ8WgF7SEA32lGegAhu7dk4dZf3Rk397blIvfWytXwsRvs9dOaQ",
  network: Network.TESTNET,
  loginConfig: {
    google: {
      verifier: "verifier-name", // get it from web3auth dashboard
      typeOfLogin: TypeOfLogin.GOOGLE,
      clientId: "google_client_id", // google's client id
    },
  },
});

ExtraLoginOptions for special login methods​

In addition to the LoginConfig you can pass extra options to the login function to configure the login flow for cases requiring additional info for enabling login. The ExtraLoginOptions accepts the following parameters:

ParameterDescription
additionalParams?Additional params in [key: string] format for OAuth login, use id_token(JWT) to authenticate with web3auth.
domain?Your custom authentication domain in string format. For example, if you are using Auth0, it can be example.au.auth0.com.
client_id?Client id in string format, provided by your login provider used for custom verifier.
leeway?The value used to account for clock skew in JWT expirations. The value is in the seconds, and ideally should no more than 60 seconds or 120 seconds at max. It takes string as a value.
verifierIdField?The field in JWT token which maps to verifier id. Please make sure you selected correct JWT verifier id in the developer dashboard. It takes string as a value.
isVerifierIdCaseSensitive?boolean to confirm Whether the verifier id field is case sensitive or not.
display?Allows developers the configure the display of UI. It takes string as a value.
prompt?Prompt shown to the user during authentication process. It takes string as a value.
max_age?Max time allowed without reauthentication. If the last time user authenticated is greater than this value, then user must reauthenticate. It takes string as a value.
ui_locales?The space separated list of language tags, ordered by preference. For instance fr-CA fr en.
id_token_hint?It denotes the previously issued ID token. It takes string as a value.
id_token?JWT (ID Token) to be passed for login.
login_hint?It is used to send the user's email address during Email Passwordless login. It takes string as a value.
acr_values?acc_values
scope?The default scope to be used on authentication requests. The defaultScope defined in the Auth0Client is included along with this scope. It takes string as a value.
audience?The audience, presented as the aud claim in the access token, defines the intended consumer of the token. It takes string as a value.
connection?The name of the connection configured for your application. If null, it will redirect to the Auth0 Login Page and show the Login Widget. It takes string as a value.
redirect_uri?It can be used to specify the default url, where your custom jwt verifier can redirect your browser to with the result. If you are using Auth0, it must be whitelisted in the Allowed Callback URLs in your Auth0's application.

Using Auth0 Login​

Auth0 has a special login flow, called the SPA flow. This flow requires a client_id and domain to be passed, and Web3Auth will get the JWT id_token from Auth0 directly. You can pass these configurations in the ExtraLoginOptions object in the login function.

const web3auth = new Web3Auth(WebBrowser, {
  clientId: "YOUR_CLIENT_ID", // web3auth's client id
  network: OPENLOGIN_NETWORK.TESTNET, // or other networks
  loginConfig: {
    jwt: {
      verifier: "verifier-name", // get it from web3auth dashboard for auth0 configuration
      typeOfLogin: "jwt",
      clientId: "your auth0 client id", // get it from auth0 dashboard
    },
  },
});
web3auth.login({
  loginProvider: LOGIN_PROVIDER.JWT,
  redirectUrl: resolvedRedirectUrl, // redirect url after login
  extraLoginOptions: {
    domain: "example.com", // domain of your auth0 app
    verifierIdField: "sub", // The field in jwt token which maps to verifier id.
  },
});

Custom JWT Login​

If you're using any other provider like Firebase/ AWS Cognito or deploying your own Custom JWT server, you need to put the jwt token into the id_token field of the extraLoginOptions.

const web3auth = new Web3Auth(WebBrowser, {
  clientId: "YOUR_CLIENT_ID", // web3auth's client id
  network: Network.TESTNET,
  loginConfig: {
    jwt: {
      verifier: "verifier-name", // get it from web3auth dashboard
      typeOfLogin: TypeOfLogin.JWT,
      clientId: "YOUR_CLIENT_ID", // web3auth's client id
    },
  },
});
web3auth.login({
  loginProvider: LoginProvider.JWT,
  redirectUrl: resolvedRedirectUrl, // redirect url after login
  extraLoginOptions: {
    id_token: "your JWT id token",
    verifierIdField: "sub", // auth0 generally uses sub as unique identifier
  },
});

Email Passwordless​

To use the EMAIL_PASSWORDLESS login, you need to put the email into the login_hint field of the extraLoginOptions.

web3auth.login({
  loginProvider: LoginProvider.EMAIL_PASSWORDLESS,
  redirectUrl: resolvedRedirectUrl,
  extraLoginOptions: {
    login_hint: "hello@web3auth.io",
  },
});