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.
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.
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
- 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
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
|
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:
- Table
- Type Declarations
loginConfig: { "identifier of social login": { params } }
params
Parameter | Type | Description | Mandatory |
---|---|---|---|
verifier | string | Identifier for the Verifier you created on the Web3Auth Developer Dashboard | Yes |
typeOfLogin | TypeOfLogin | Choose your type of social login. Select from the list: google , facebook , twitter , reddit , discord , twitch , apple , line , github , kakao , linkedin , weibo , wechat | Yes |
name | string | Display Name. If not provided, we use the default for openlogin app | No |
description? | string | Description for button. If provided, it renders as a full length button. else, icon button | No |
clientId? | string | Custom client_id for the corresponding social provider. This is needed for connecting to your account. If not provided, we use the default for openlogin app | No |
verifierSubIdentifier? | string | Sub identifier - used in case of creation of aggregate verifiers | No |
logoHover? | string | Logo to be shown on mouse hover. If not provided, we use the default for openlogin app | No |
logoLight? | string | Logo to be shown on dark background (dark theme). If not provided, we use the default for openlogin app | No |
logoDark? | string | Logo to be shown on light background (light theme). If not provided, we use the default for openlogin app | No |
mainOption? | boolean | Whether to show the login button on modal or not | No |
showOnModal? | boolean | Whether to show the login button on modal or not | No |
showOnModal? | boolean | Whether to show the login button on desktop | No |
showOnMobile? | boolean | Whether to show the login button on mobile | No |
jwtParameters? | JwtParameters | Custom jwt parameters to configure the login. Useful for Auth0 configuration | No |
declare 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;
/**
* Custom jwt parameters to configure the login. Useful for Auth0 configuration
*/
jwtParameters?: JwtParameters;
}
>;
declare type TypeOfLogin =
| "google"
| "facebook"
| "reddit"
| "discord"
| "twitch"
| "apple"
| "github"
| "linkedin"
| "twitter"
| "weibo"
| "line"
| "email_password"
| "passwordless"
| "jwt";
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.
- Discord
- Twitch
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);
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: {
// 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: {
clientId, //Optional - Provide only if you haven't provided it in the Web3Auth Instantiation Code
uxMode: "popup",
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: {
clientId, //Optional - Provide only if you haven't provided it in the Web3Auth Instantiation Code
uxMode: "popup",
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);