Skip to main content

Custom Authentication with PnP Web Modal 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.

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.

warning

For a Custom JWT based authentication services you need to use the Web3Auth Plug and Play No Modal SDK, since the Web3Auth Modal will only help you configure the social logins present within the Modal UI.

For enabling this, you need Create a Verifier from the Custom Auth section of the Web3Auth Developer Dashboard with your desired configuration.

tip

If you want to know more about setting up a verifier and how to use it, please refer to the Custom Authentication Documentation.

Installing Openlogin Adapter​

Social logins in Web3Auth are enabled by the openlogin-adapter. Natively, it is already present and preconfigured within the Plug and Play SDK, but for custom configurations, you need to install the adapter package.

npm install --save @web3auth/openlogin-adapter

Configuring Openlogin Adapter​

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.

tip

Checkout the openlogin-adapter SDK Reference for more details on different configurations you can pass for customisations.

Further, the loginConfig parameter of the adapterSettings configuration helps us to customise the social logins. Since we're using the @web3auth/modal, ie. the Plug and Play Modal SDK, the loginConfig should be corresponding to the socials mentioned in the modal. This means you can use your own authentication services for the following services:

google | facebook | discord | twitch |

info

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

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.

Example​

Since we're using the @web3auth/modal ie. the Plug and Play Modal SDK, the loginConfig should be corresponding to the socials mentioned in the modal. Here, we're customising Google and Facebook to be custom verified, rest all other socials will be default.

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);