Custom Authentication with PnP Web Modal SDK
Custom Authentication is a way to authenticate users with your custom authentication service. For example, while authenticating with Google, you can use your own Google Client ID to authenticate users directly.
To enable this, you need to Create a Verifier from the Custom Authentication tab of your project from the Web3Auth Developer Dashboard with your desired configuration.
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.
For Custom JWT-based authentication services, you need to use the
Web3Auth Plug and Play NoModal SDK
, since the Web3Auth Modal will only
help you configure the social logins present within the Modal UI.
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
- Yarn
- pnpm
npm install --save @web3auth/openlogin-adapter
yarn add @web3auth/openlogin-adapter
pnpm add @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.
Checkout the openlogin-adapter
SDK Reference for more details
on different configurations, you can pass for customizations.
Further, the loginConfig
parameter of the adapterSettings
configuration helps us to customize
the social logins. Since we're using the @web3auth/modal
, ie. the Plug and Play Modal SDK, the
loginConfig
should correspond to the socials mentioned in the modal.
loginConfig
The loginConfig
parameter of adapterSettings
in openlogin-adapter
contains the following
properties:
- Table
- Type Declarations
loginConfig: { "identifier of social login": { params } }
params
Parameter | Description |
---|---|
verifier | The name of the verifier that you have registered on the Web3Auth Dashboard. It's a mandatory field, and accepts string as a value. |
typeOfLogin | Type 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. |
clientId | Client 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. |
export type LoginConfig = Record<
string,
{
verifier: string;
/**
* The type of login. Refer to enum `LOGIN_TYPE`
*/
typeOfLogin: TypeOfLogin;
/**
* Display Name. If not provided, we use the default for openlogin app
*/
name?: string;
/**
* Description for button. If provided, it renders as a full length button. else, icon button
*/
description?: string;
/**
* Custom client_id. If not provided, we use the default for openlogin app
*/
clientId?: string;
verifierSubIdentifier?: string;
/**
* Logo to be shown on mouse hover. If not provided, we use the default for openlogin app
*/
logoHover?: string;
/**
* Logo to be shown on dark background (dark theme). If not provided, we use the default for openlogin app
*/
logoLight?: string;
/**
* Logo to be shown on light background (light theme). If not provided, we use the default for openlogin app
*/
logoDark?: string;
/**
* Show login button on the main list
*/
mainOption?: boolean;
/**
* Whether to show the login button on modal or not
*/
showOnModal?: boolean;
/**
* Whether to show the login button on desktop
*/
showOnDesktop?: boolean;
/**
* Whether to show the login button on mobile
*/
showOnMobile?: boolean;
/**
* 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.
*/
showOnSocialBackupFactor?: boolean;
/**
* Custom jwt parameters to configure the login. Useful for Auth0 configuration
*/
jwtParameters?: JwtParameters;
}
>;
export type TypeOfLogin =
| "google"
| "facebook"
| "reddit"
| "discord"
| "twitch"
| "apple"
| "github"
| "linkedin"
| "twitter"
| "weibo"
| "line"
| "email_password"
| "passwordless"
| "jwt"
| "farcaster"
| "webauthn";
Example
Since we're using the @web3auth/modal
ie. the Plug and Play Modal SDK, the loginConfig
should
correspond to the socials mentioned in the modal.
Single Verifier
- Discord
- Twitch
- Github
- Apple
- Line
import OpenloginAdapter from "@web3auth/openlogin-adapter";
const openloginAdapter = new OpenloginAdapter({
adapterSettings: {
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);
import OpenloginAdapter from "@web3auth/openlogin-adapter";
const openloginAdapter = new OpenloginAdapter({
adapterSettings: {
loginConfig: {
// 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
},
},
},
privateKeyProvider,
});
web3auth.configureAdapter(openloginAdapter);
import OpenloginAdapter from "@web3auth/openlogin-adapter";
const openloginAdapter = new OpenloginAdapter({
adapterSettings: {
loginConfig: {
// Discord login
discord: {
verifier: "YOUR_DISCORD_VERIFIER_NAME", // Please create a verifier on the developer dashboard and pass the name here
typeOfLogin: "discord", // Pass on the login provider of the verifier you've created
clientId: "DISCORD_CLIENT_ID_1234567890", //use your app client id you got from discord
},
},
},
privateKeyProvider,
});
web3auth.configureAdapter(openloginAdapter);
import OpenloginAdapter from "@web3auth/openlogin-adapter";
const openloginAdapter = new OpenloginAdapter({
adapterSettings: {
loginConfig: {
// Facebook login
facebook: {
verifier: "YOUR_TWITCH_VERIFIER_NAME", // Please create a verifier on the developer dashboard and pass the name here
typeOfLogin: "twitch", // Pass on the login provider of the verifier you've created
clientId: "TWITCH_CLIENT_ID_1234567890", //use your app client id you got from twitch
},
},
},
privateKeyProvider,
});
web3auth.configureAdapter(openloginAdapter);
import OpenloginAdapter from "@web3auth/openlogin-adapter";
const openloginAdapter = new OpenloginAdapter({
adapterSettings: {
loginConfig: {
// Twitter login
twitter: {
verifier: "YOUR_AUTH0_VERIFIER_NAME", // Since twitter login is not supported directly, you can use Auth0 as a verifier
typeOfLogin: "twitter",
clientId: "YOUR_AUTH0_CLIENT_ID", //use your app client id from Auth0, since twitter login is not supported directly
jwtParameters: {
domain: "YOUR_AUTH0_DOMAIN",
verifierIdField: "YOUR_AUTH0_VERIFIER_ID_FIELD",
isVerifierIdCaseSensitive: true, // only if the verifier id is case sensitive
},
},
},
},
privateKeyProvider,
});
web3auth.configureAdapter(openloginAdapter);
import OpenloginAdapter from "@web3auth/openlogin-adapter";
const openloginAdapter = new OpenloginAdapter({
adapterSettings: {
loginConfig: {
// LinkedIn login
linkedin: {
verifier: "YOUR_AUTH0_VERIFIER_NAME", // Since linkedin login is not supported directly, you can use Auth0 as a verifier
typeOfLogin: "linkedin",
clientId: "YOUR_AUTH0_CLIENT_ID", //use your app client id from Auth0, since linkedin login is not supported directly
jwtParameters: {
domain: "YOUR_AUTH0_DOMAIN",
verifierIdField: "YOUR_AUTH0_VERIFIER_ID_FIELD",
isVerifierIdCaseSensitive: true, // only if the verifier id is case sensitive
},
},
},
},
privateKeyProvider,
});
web3auth.configureAdapter(openloginAdapter);
import OpenloginAdapter from "@web3auth/openlogin-adapter";
const openloginAdapter = new OpenloginAdapter({
adapterSettings: {
loginConfig: {
// Github login
github: {
verifier: "YOUR_AUTH0_VERIFIER_NAME", // Since github login is not supported directly, you can use Auth0 as a verifier
typeOfLogin: "github",
clientId: "YOUR_AUTH0_CLIENT_ID", //use your app client id from Auth0, since github login is not supported directly
jwtParameters: {
domain: "YOUR_AUTH0_DOMAIN",
verifierIdField: "YOUR_AUTH0_VERIFIER_ID_FIELD",
isVerifierIdCaseSensitive: true, // only if the verifier id is case sensitive
},
},
},
},
privateKeyProvider,
});
web3auth.configureAdapter(openloginAdapter);
import OpenloginAdapter from "@web3auth/openlogin-adapter";
const openloginAdapter = new OpenloginAdapter({
adapterSettings: {
loginConfig: {
// Apple login
apple: {
verifier: "YOUR_AUTH0_VERIFIER_NAME", // Since apple login is not supported directly, you can use Auth0 as a verifier
typeOfLogin: "apple",
clientId: "YOUR_AUTH0_CLIENT_ID", //use your app client id from Auth0, since apple login is not supported directly
jwtParameters: {
domain: "YOUR_AUTH0_DOMAIN",
verifierIdField: "YOUR_AUTH0_VERIFIER_ID_FIELD",
isVerifierIdCaseSensitive: true, // only if the verifier id is case sensitive
},
},
},
},
privateKeyProvider,
});
web3auth.configureAdapter(openloginAdapter);
import OpenloginAdapter from "@web3auth/openlogin-adapter";
const openloginAdapter = new OpenloginAdapter({
adapterSettings: {
loginConfig: {
// Line login
line: {
verifier: "YOUR_AUTH0_VERIFIER_NAME", // Since line login is not supported directly, you can use Auth0 as a verifier
typeOfLogin: "line",
clientId: "YOUR_AUTH0_CLIENT_ID", //use your app client id from Auth0, since line login is not supported directly
jwtParameters: {
domain: "YOUR_AUTH0_DOMAIN",
verifierIdField: "YOUR_AUTH0_VERIFIER_ID_FIELD",
isVerifierIdCaseSensitive: true, // only if the verifier id is case sensitive
},
},
},
},
privateKeyProvider,
});
web3auth.configureAdapter(openloginAdapter);
Aggregate Verifier
import OpenloginAdapter from "@web3auth/openlogin-adapter";
const openloginAdapter = new OpenloginAdapter({
adapterSettings: {
loginConfig: {
// Google login
google: {
verifier: "YOUR_AGGREGATE_VERIFIER_NAME", // Please create an aggregate verifier on the developer dashboard and pass the name here
verifierSubIdentifier: "YOUR_SUB_VERIFIER_NAME", // Pass in the sub verifier name here
typeOfLogin: "google", // Pass on the login provider of the verifier you've created
clientId: "YOUR_GOOGLE_CLIENT_ID", // based on sub verifier, pass in the clientId of the login provider here - Please note this differs from the Web3Auth ClientID.
},
github: {
verifier: "YOUR_AGGREGATE_VERIFIER_NAME", // Please create an aggregate verifier on the developer dashboard and pass the name here
verifierSubIdentifier: "YOUR_SUB_VERIFIER_NAME", // Pass in the sub verifier name here
typeOfLogin: "github", // Pass on the login provider of the verifier you've created
clientId: "YOUR_GITHUB_CLIENT_ID", // based on sub verifier, pass in the clientId of the login provider here - Please note this differs from the Web3Auth ClientID.
jwtParameters: {
domain: "YOUR_AUTH0_DOMAIN",
verifierIdField: "YOUR_AUTH0_VERIFIER_ID_FIELD",
isVerifierIdCaseSensitive: true, // only if the verifier id is case sensitive, else remove this line
},
},
},
},
privateKeyProvider,
});
web3auth.configureAdapter(openloginAdapter);