Skip to main content

Openlogin Adapter for Social Logins

@web3auth/openlogin-adapter​

The default adapter of Web3Auth is the openlogin-adapter. This adapter is a wrapper around the openlogin library from Web3Auth and enables the social login features. By default, Web3Auth has certain configurations set to enable a quick integration, however, for customizing features, like Whitelabel, Custom Authentication, etc. you need to configure the Openlogin Adapter. With the Openlogin Adapter package installed and instantiated, you can explore several options and customize the login experience of the user as per your needs.

Basic Details​

Adapter Name: openlogin​

Package Name: @web3auth/openlogin-adapter​

authMode: WALLET, DAPP​

chainNamespace: EIP155, SOLANA​

Default: YES​

Installation​

npm install --save @web3auth/openlogin-adapter

Instantiation​

Import the OpenloginAdapter class from @web3auth/openlogin-adapter​

import { OpenloginAdapter } from "@web3auth/openlogin-adapter";

Assign the OpenloginAdapter class to a variable​

const openloginAdapter = new OpenloginAdapter(OpenloginAdapterOptions);

This OpenloginAdapter constructor takes an object with OpenloginAdapterOptions as input.

Arguments​

OpenloginAdapterOptions​

Parametertype
adapterSettings?OpenLoginOptions
loginSettings?LoginSettings
privateKeyProvider?PrivateKeyProvider

Openlogin Adapter Settings​

adapterSettings​

OpenLoginOptions​
VariableTypeDescriptionMandatoryDefault Value
clientIdstringClient ID for web3auth. Obtain your clientId from the Web3Auth Developer Dashboard. Not required if you're passing the clientId in the web3auth core constructor.YesN/A
networkOPENLOGIN_NETWORK_TYPESpecify the network your project is deployed on.YesN/A
buildEnv?BUILD_ENV_TYPEThis parameter will be used to change the build environment of openlogin sdk.No'production'
redirectUrl?stringredirectUrl is the dapp's URL where the user will be redirected after login. Register this URL on the Web3Auth Developer Dashboard initialization will give an error.NoN/A
uxMode?stringTwo uxModes are supported:
  • 'POPUP': In this uxMode, a popup will be shown to the user for login.
  • 'REDIRECT': In this uxMode, the user will be redirected to a new window tab for login.
No'POPUP'
replaceUrlOnRedirect?booleanreplaceUrlOnRedirect removes the params from the redirected URL after loginNotrue
loginConfig?LoginConfigloginConfig enables you to pass your own login verifiers configuration for various loginProviders. loginConfig is a key value map where each key should be a valid loginProvider and the value should be a custom configuration for that loginProvider.NoN/A
whiteLabel?WhiteLabelDataOptions for whitelabling default openlogin modal.NoN/A
storageKey?enum (session and local)setting to "local" will persist the social login session across browser tabs.No'local'
sessionTime?numberDetermine the session length in seconds. By default, the value is set at 86400 seconds, ie. 7 days.No86400
mfaSettings?MfaSettingsThis parameter will be used to enable mfa factors and set priority on UI listing. List of factors available
  • backUpShareFactor
  • socialFactor
  • passwordFactor
  • deviceShareFactor
Nofalse
useMpc?booleanThis parameter will be used to use openlogin mpcNofalse

Login Settings​

loginSettings​

warning

While you can pass your chainConfig to OpenloginAdapter, it is not required for web3auth/no-modal ie. The Web3Auth Plug and Play No Modal package, since you can directly pass loginParams over to the connectTo function.

Either way, both of these methods will work the same. Please note that the connectTo function params will override the OpenloginAdapter settings.

Read more about how to pass loginParams to connectTo in its respective section: web3auth/no-modal

LoginSettings​
VariableDescription
loginProviderSets the OAuth login method to be used. You can use any of the valid loginProvider from the supported list.

The list of available options: google, facebook, reddit, discord, twitch, apple, line, github, kakao, linkedin, twitter, weibo, wechat, email_passwordless, sms_passwordless, jwt
mfaLevel?You can set the mfaLevel to customize when mfa screen should be shown to user. It currently accepts 4 values:
  • 'default' Setting mfa level to default will present mfa screen to user on every third login.
  • 'optional' Setting mfa level to default will present mfa screen to user on every login but user can skip it.
  • 'mandatory' Setting mfa level to mandatory will make it mandatory for user to setup mfa after login.
  • 'none' Setting mfa level to none will make the user skip the mfa setup screen
extraLoginOptions?This can be used to pass standard oauth login options to loginProvider. For ex: you will have to pass login_hint as user's email and domain as your app domain in extraLoginOptions while using email_passwordless loginProvider. It accepts ExtraLoginOptions as a value.
dappShare?Custom logins can get a dApp share returned to them post successful login. This is useful if the dapps want to use this share to allow users to login seamlessly. dappShare is a 24 word seed phrase. It accepts string as a value.
curve?This curve will be used to determine the public key encoded in the jwt token which returned in getUserInfo function after user login. You can use that public key from jwt token as a unique user identifier in your backend.
  • 'secp256k1': secp256k1 based pub key is added as a wallet public key in jwt token to use.
  • 'ed25519': ed25519 based pub key is added as a wallet public key in jwt token to use.
Note: This parameter won't change format of private key returned by openlogin. Private key returned by openlogin is always secp256k1. It accepts SUPPORTED_KEY_CURVES_TYPE as a value.
appState?Any custom state you wish to pass along. This will be returned to you post redirect. Use this to store data that you want to be available to the dApp after login. It accepts string as a value.
redirectUrl?App's URL where user will be redirected after login. Register this URL in the developer dashboard, else initialization will give error. It accepts string as a value.

Multi-Factor Authentication​

At Web3Auth, we prioritize your security by offering Multi-Factor Authentication (MFA). MFA is an extra layer of protection that verifies your identity when accessing your account. To ensure ownership, you must provide two or more different backup factors. You have the option to choose from the device, social, backup factor (seed phrase), and password factors to guarantee access to your Web3 account. Once you create a recovery factor, MFA is enabled, and your keys are divided into three shares for off-chain multi-sig, making the key self-custodial. With backup factors, you can easily recover your account if you lose access to your original device or help log into a new device.

For a dApp, we provide various options to set up Multi-Factor Authentication. You can customize the MFA screen by setting the mfaLevel argument. You can enable or disable a backup factor and change their order. Currently, there are four values for mfaLevel:

  • default: presents the MFA screen every third login
  • optional: presents the MFA screen on every login, but you can skip it
  • mandatory: make it mandatory to set up MFA after login
  • none: skips the MFA setup screen

We offer the following backup factors under mfaSettings:

  • deviceShareFactor,
  • backUpShareFactor,
  • socialBackupFactor, and
  • passwordFactor.

Example​

const openloginAdapter = new OpenloginAdapter({
  loginSettings: {
    mfaLevel: "optional", // default, optional, mandatory, none
  },
  adapterSettings: {
    // SCALE and above plan only feature
    mfaSettings: {
      deviceShareFactor: {
        enable: true,
        priority: 1,
        mandatory: true,
      },
      backUpShareFactor: {
        enable: true,
        priority: 2,
        mandatory: false,
      },
      socialBackupFactor: {
        enable: true,
        priority: 3,
        mandatory: false,
      },
      passwordFactor: {
        enable: true,
        priority: 4,
        mandatory: false,
      },
    },
  },
});

Whitelabel​

Web3Auth's Social Logins and Email Login run using the OpenLogin Flow. The whole OpenLogin user experience can also be whitelabeled using OpenLogin Adapter settings. For this, you need to pass on the whiteLabel configuration parameter to the adapterSettings property of the openlogin-adapter.

whiteLabel?: WhiteLabelData;​

The whitelabel parameter takes WhitelabelData as input. The WhitelabelData object takes the following parameters:

WhiteLabelData

ParameterDescription
appName?App name to be displayed in the User Flow Screens. It accepts string as a value.
appUrl?App URL to be displayed in the User Flow Screens. It accepts string as a value.
logoLight?App logo to be shown on the light background (light theme). It accepts string as a value.
logoDark?App logo to be shown on the dark background (dark theme). It accepts string as a value.
defaultLanguage?Default Language to use.
Choose from:
  • en - English
  • de - German
  • ja - Japanese
  • ko - Korean
  • zh - Mandarin
  • es - Spanish
  • fr - French
  • pt - Portuguese
  • nl - Dutch
  • tr - Turkish
. Default language is en
mode?Choose between auto, light or dark background modes. Default is auto.
theme?Used to customize the theme of the login modal with the following options
'primary' - To customize the primary color of the modal's content. It accepts Record as a value.
tncLink?Language specific link for terms and conditions on torus-website. See (examples/vue-app) to configure e.g. tncLink: {en: "http://example.com/tnc/en", ja: "http://example.com/tnc/ja"}
privacyPolicy?Language specific link for privacy policy on torus-website. See (examples/vue-app) to configure e.g. privacyPolicy: { en: "http://example.com/tnc/en", ja: "http://example.com/tnc/ja", }

Example​

import { OpenloginAdapter } from "@web3auth/openlogin-adapter";

const openloginAdapter = new OpenloginAdapter({
  adapterSettings: {
    clientId, //Optional - Provide only if you haven't provided it in the Web3Auth Instantiation Code
    network: "sapphire_mainnet", // Optional - Provide only if you haven't provided it in the Web3Auth Instantiation Code
    uxMode: "popup",
    whiteLabel: {
      appName: "W3A Heroes",
      appUrl: "https://web3auth.io",
      logoLight: "https://web3auth.io/images/web3auth-logo.svg",
      logoDark: "https://web3auth.io/images/web3auth-logo---Dark.svg",
      defaultLanguage: "en", // en, de, ja, ko, zh, es, fr, pt, nl, tr
      mode: "dark", // whether to enable dark mode. defaultValue: auto
      theme: {
        primary: "#00D1B2",
      },
      useLogoLoader: true,
    },
  },
  privateKeyProvider,
});
web3auth.configureAdapter(openloginAdapter);

Custom Authentication​

While instantiating the Openlogin Adapter, you can pass some configuration objects to the constructor. One of these configurations is the adapterSettings configuration which enables you to make changes in the adapter, enabling you to do things like Whitelabeling and Custom Authentication among other things.

loginConfig​

The loginConfig parameter of adapterSettings in openlogin-adapter contains the following properties:

loginConfig: { "identifier of social login": { params } }

params

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 boolean 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.
showOnSocialBackupFactor?If we are using social logins as a backup factor, then this option will be used to show the type of social login on the social backup login screen.
jwtParameters?Custom jwt parameters to configure the login. Useful for Auth0 configuration. It accepts JwtParameters as a value.

Custom Authentication within Web3Auth Modal​

When we're using the @web3auth/modal, ie. the Plug and Play Modal SDK, the loginConfig should correspond to the socials mentioned in the modal. This means you can use your own authentication services for the following services:

google | facebook | twitter | reddit | discord | twitch | apple | line | github | kakao | linkedin | weibo | wechat | passwordless

info

You can customize all or a few of the social logins and others will remain default. You can also remove the ones you don't want using the whitelabeling option.

Example​

import OpenloginAdapter from "@web3auth/openlogin-adapter";

const openloginAdapter = new OpenloginAdapter({
  adapterSettings: {
    clientId, //Optional - Provide only if you haven't provided it in the Web3Auth Instantiation Code
    uxMode: "popup",
    loginConfig: {
      // Google login
      google: {
        verifier: "YOUR_GOOGLE_VERIFIER_NAME", // Please create a verifier on the developer dashboard and pass the name here
        typeOfLogin: "google", // Pass on the login provider of the verifier you've created
        clientId: "GOOGLE_CLIENT_ID.apps.googleusercontent.com", // Pass on the clientId of the login provider here - Please note this differs from the Web3Auth ClientID. This is the JWT Client ID
      },
    },
  },
  privateKeyProvider,
});
web3auth.configureAdapter(openloginAdapter);

Logging in through your Custom JWT Token​

When we are using @web3auth/no-modal, ie. Web3Auth Plug and Play No Modal SDK, we have the option to use the connectTo function, which enables you to customize the login process according to the parameters you have for your custom authentication service.

connectTo()​

To log a user in the Web3Auth Plug and Play No Modal SDK, you need to call the connectTo() function. This function helps you customize the login process according to your own needs, by taking the following parameters:

VariableDescription
walletNameWallet Adapter you want to use for logging in your user. It accepts WALLET_ADAPTER_TYPE.
loginParams?Login Parameters specific to your wallet adapter.
tip

Know more about the connectTo function in the Usage SDK Reference

Further, to enable Custom Authentication, the loginParams parameter takes in another object called extraLoginOptions which contains the following properties:

ExtraLoginOptions​
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.

Example​

import { OpenloginAdapter } from "@web3auth/openlogin-adapter";

const openloginAdapter = new OpenloginAdapter({
  adapterSettings: {
    clientId, //Optional - Provide only if you haven't provided it in the Web3Auth Instantiation Code
    network: "sapphire_mainnet", // Optional - Provide only if you haven't provided it in the Web3Auth Instantiation Code
    uxMode: "popup",
    loginConfig: {
      jwt: {
        verifier: "YOUR-VERIFIER-NAME-ON-WEB3AUTH-DASHBOARD",
        typeOfLogin: "jwt",
        clientId: "YOUR-CLIENTID-FROM-LOGIN-PROVIDER",
      },
    },
  },
  privateKeyProvider,
});

web3auth.configureAdapter(openloginAdapter);
import { WALLET_ADAPTERS } from "@web3auth/base";
// inside your async function with on click handler
const web3authProvider = await web3auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, {
  loginProvider: "google",
});

Initialization​

Finally, once all the configurations are set, you need to initialize the Openlogin Adapter.

web3auth.configureAdapter(openloginAdapter);

Change Adapter Settings​

You can change the adapter settings by calling the setAdapterSettings() function on the adapter instance. This function takes the below-mentioned parameters as well as Openlogin Adapter Settings.

Arguments​

Parametertype
clientId?string
sessionTime?number
chainConfig?CustomChainConfig
web3AuthNetwork?OPENLOGIN_NETWORK_TYPE

Example​

@web3auth/modal​

const openloginAdapter = new OpenloginAdapter({
  adapterSettings: {
    uxMode: "redirect", // "redirect" | "popup"
    whiteLabel: {
      logoLight: "https://web3auth.io/images/w3a-L-Favicon-1.svg",
      logoDark: "https://web3auth.io/images/w3a-D-Favicon-1.svg",
      defaultLanguage: "en", // en, de, ja, ko, zh, es, fr, pt, nl, tr
      mode: "dark", // whether to enable dark, light or auto mode. defaultValue: auto [ system theme]
    },
    // SCALE and above plan only feature
    mfaSettings: {
      deviceShareFactor: {
        enable: true,
        priority: 1,
        mandatory: true,
      },
      backUpShareFactor: {
        enable: true,
        priority: 2,
        mandatory: false,
      },
      socialBackupFactor: {
        enable: true,
        priority: 3,
        mandatory: false,
      },
      passwordFactor: {
        enable: true,
        priority: 4,
        mandatory: false,
      },
    },
    loginConfig: {
      // Add login configs corresponding to the providers on modal
      // Google login
      google: {
        verifier: "YOUR_GOOGLE_VERIFIER_NAME", // Please create a verifier on the developer dashboard and pass the name here
        typeOfLogin: "google", // Pass on the login provider of the verifier you've created
        clientId: "GOOGLE_CLIENT_ID.apps.googleusercontent.com", // Pass on the clientId of the login provider here - Please note this differs from the Web3Auth ClientID. This is the JWT Client ID
      },
      // Facebook login
      facebook: {
        verifier: "YOUR_FACEBOOK_VERIFIER_NAME", // Please create a verifier on the developer dashboard and pass the name here
        typeOfLogin: "facebook", // Pass on the login provider of the verifier you've created
        clientId: "FACEBOOK_CLIENT_ID_1234567890", // Pass on the clientId of the login provider here - Please note this differs from the Web3Auth ClientID. This is the JWT Client ID
      },
      // Add other login providers here
    },
  },
  loginSettings: {
    mfaLevel: "mandatory",
  },
});
web3auth.configureAdapter(openloginAdapter);

// You can change the adapter settings by calling the `setAdapterSettings()` function on the adapter instance.

openloginAdapter.setAdapterSettings({
  web3AuthNetwork: "sapphire_mainnet",
  sessionTime: 3600, // 1 hour in seconds
  chainConfig: {
    chainNamespace: CHAIN_NAMESPACES.EIP155,
    chainId: "0x1",
    rpcTarget: "https://rpc.ankr.com/eth", // This is the public RPC we have added, please pass on your own endpoint while creating an app
  },
  clientId,
  redirectUrl: "http://localhost:3000",
});

web3auth/no-modal​

const openloginAdapter = new OpenloginAdapter({
  adapterSettings: {
    network: "sapphire_mainnet",
    uxMode: "popup",
    whiteLabel: {
      appName: "W3A Heroes",
      appUrl: "https://web3auth.io",
      logoLight: "https://web3auth.io/images/w3a-L-Favicon-1.svg",
      logoDark: "https://web3auth.io/images/w3a-D-Favicon-1.svg",
      defaultLanguage: "en", // en, de, ja, ko, zh, es, fr, pt, nl, tr
      mode: "auto", // whether to enable dark mode. defaultValue: false
      theme: {
        primary: "#768729",
      },
      useLogoLoader: true,
    },
    // SCALE and above plan only feature
    mfaSettings: {
      deviceShareFactor: {
        enable: true,
        priority: 1,
        mandatory: true,
      },
      backUpShareFactor: {
        enable: true,
        priority: 2,
        mandatory: false,
      },
      socialBackupFactor: {
        enable: true,
        priority: 3,
        mandatory: false,
      },
      passwordFactor: {
        enable: true,
        priority: 4,
        mandatory: false,
      },
    },
    loginConfig: {
      jwt: {
        verifier: "web3auth-auth0-demo",
        typeOfLogin: "jwt",
        clientId: "294QRkchfq2YaXUbPri7D6PH7xzHgQMT",
      },
    },
  },
});
web3auth.configureAdapter(openloginAdapter);

// You can change the adapter settings by calling the `setAdapterSettings()` function on the adapter instance.

openloginAdapter.setAdapterSettings({
  web3AuthNetwork: "sapphire_mainnet",
  sessionTime: 3600, // 1 hour in seconds
  chainConfig: {
    chainNamespace: CHAIN_NAMESPACES.EIP155,
    chainId: "0x1",
    rpcTarget: "https://rpc.ankr.com/eth", // This is the public RPC we have added, please pass on your own endpoint while creating an app
  },
  clientId,
  redirectUrl: "http://localhost:3000",
});