# Custom authentication in PnP React Native SDK > Web3Auth PnP React Native SDK - Using Custom Authentication | Embedded Wallets 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. This feature, with Multi-Factor Authentication turned off, can make Embedded Wallets invisible to the end user. :::note This is a paid feature and the minimum [pricing plan](https://web3auth.io/pricing.html) to use this SDK in a production environment is the **Growth Plan**. You can use this feature in Web3Auth Sapphire Devnet network for free. ::: ## Getting an Auth Connection ID :::info prerequisite To enable this, you need to [create a connection](/embedded-wallets/dashboard/authentication) from the **Authentication** tab of your project from the [Embedded Wallets developer dashboard](https://developer.metamask.io) with your desired configuration. ::: To configure a connection, you need to provide the particular details of the connection into our Embedded Wallets dashboard. This enables us to map a `authConnectionId with your connection details. This `authConnectionId helps us to identify the connection details while initializing the SDK. You can configure multiple connections for the same project, and you can also update the connection details anytime. :::tip Learn more about the [auth provider setup](/embedded-wallets/authentication) and the different configurations available for each connection. ::: ## Configuration :::warning **"Auth Connection"** is called **"Verifier"** in the Android SDK. It is the older terminology which we will be updating in the upcoming releases. Consequentially, you will see the terms **"Verifier ID"** and **"Aggregate Verifier"** used in the codebase and documentation referring to **"Auth Connection ID"** and **"Grouped Auth Connection"** respectively. ::: To use custom authentication (using supported Social providers or Login providers like Auth0, AWS Cognito, Firebase, or your own custom JWT login) you can add the configuration using `loginConfig` parameter during the initialization. The `loginConfig` parameter is a key value map. The key should be one of the `Web3AuthProvider` in its string form, and the value should be a `LoginConfigItem` instance. ### Parameters #### `LoginConfigItem` | Parameter | Description | | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `verifier` | The name of the verifier that you have registered on the Embedded Wallets dashboard. It's a mandatory field and accepts a `string` as a value. | | `typeOfLogin` | Type of login for this verifier. This value will affect the login flow. For example, if you choose `google`, a Google sign-in flow will be used. If you choose `jwt`, you should provide your own JWT token, and no sign-in flow will be presented. It's a mandatory field and accepts a `TypeOfLogin` value. | | `clientId` | The client ID provided by your login provider, for example, Google's Client ID or Web3Auth's client ID if using `jwt` as `typeOfLogin`. It's a mandatory field and accepts a `string` as a value. | | `name?` | Display name for the verifier. If null, the default name is used. It accepts a `string` as a value. | | `description?` | Description for the button. If provided, it renders as a full-length button; otherwise, an icon button is shown. It accepts a `string` as a value. | | `verifierSubIdentifier?` | The field in the JWT token that maps to the verifier ID. Ensure you selected the correct JWT verifier ID in the developer dashboard. It accepts a `string` as a value. | | `logoHover?` | Logo to be shown on mouse hover. It accepts a `string` as a value. | | `logoLight?` | Light logo for dark backgrounds. It accepts a `string` as a value. | | `logoDark?` | Dark logo for light backgrounds. It accepts a `string` as a value. | | `mainOption?` | Shows the login button on the main list. It accepts a `boolean` as a value. The default value is `false`. | | `showOnModal?` | Whether to show the login button on the modal. The default value is `true`. | | `showOnDesktop?` | Whether to show the login button on the desktop. The default value is `true`. | | `showOnMobile?` | Whether to show the login button on mobile. The default value is `true`. | | `jwtParameters?` | Custom JWT parameters to configure the login. Useful for Auth0 configuration. It accepts `JwtParameters` as a value. | #### `TypeOfLogin` ```typescript 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 ``` #### `extraLoginOptions` The `extraLoginOptions` parameter can be used to pass additional options required by specific login providers. | Parameter | Description | | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `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.auth0.com`. | | `client_id?` | Client ID in `string` format, provided by your login provider and used for the custom verifier. | | `leeway?` | The value used to account for clock skew in JWT expirations. The value is in seconds, ideally no more than 60 seconds or 120 seconds at max. It takes a `string` as a value. | | `verifierIdField?` | The field in JWT token which maps to verifier ID. Ensure you select the correct JWT verifier ID in the developer dashboard. It takes a `string` as a value. | | `isVerifierIdCaseSensitive?` | Boolean to confirm whether the verifier ID field is case-sensitive or not. | | `display?` | Allows developers to configure the display of UI. It takes a `string` as a value. | Prompt shown to the user during the authentication process. It takes a `string` as a value. | Maximum allowable elapsed time (in seconds) since authentication. If the last time user authenticated is greater than this value, the user must reauthenticate. It takes a `string` as a value. | | `ui_locales?` | The space-separated list of language tags, ordered by preference. For example `fr-CA fr en`. | | `id_token_hint?` | It denotes the previously issued ID token. It takes a `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 a `string` as a value. | | `acr_values?` | `acr_values` is a space-separated string that specifies the desired Authentication Context Class Reference values. | | `scope?` | The default scope to be used on authentication requests. The `defaultScope` defined in the Auth0Client is included along with this scope. Accepts a string value. | | `audience?` | The audience, presented as the `aud` claim in the access token, defines the intended consumer of the token. It takes a `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. Accepts a string value. | | `redirect_uri?` | It can be used to specify the default URL where your custom JWT verifier can redirect your browser with the result. If using Auth0, it must be allowlisted in the Allowed Callback URLs in your Auth0 application settings. Accepts a string value. | ## Single verifier To use custom authentication with a single verifier, add the configuration to the `loginConfig` parameter of the `SdkInitParams` object during initialization. The `loginConfig` parameter is a key-value map where the key should be one of the `LOGIN_PROVIDER` in its string form, and the value should be a `LoginConfig` object. ```javascript const web3auth = new Web3Auth(WebBrowser, { clientId: 'YOUR_WEB3AUTH_CLIENT_ID', // Pass your Web3Auth Client ID, ideally using an environment variable // Web3Auth's client ID network: WEB3AUTH_NETWORK.MAINNET, // or other networks loginConfig: { google: { verifier: 'google-verifier', // Get this from the MetaMask Developer Dashboard typeOfLogin: TypeOfLogin.GOOGLE, clientId: 'GOOGLE_CLIENT_ID', // Google's client ID }, jwt: { verifier: 'jwt-verifier', // Get this from the MetaMask Developer Dashboard typeOfLogin: TypeOfLogin.JWT, clientId: 'JWT_CLIENT_ID', // Custom JWT client ID }, }, }) ``` ### Example implementations #### Using Google login ```javascript web3auth.login({ loginProvider: LOGIN_PROVIDER.GOOGLE, redirectUrl: `${scheme}://auth`, extraLoginOptions: { login_hint: 'user@example.com', // Optional: pre-fill the email field }, }) ``` #### Using JWT login To use JWT for login (for example, Auth0): ```javascript web3auth.login({ loginProvider: LOGIN_PROVIDER.JWT, redirectUrl: `${scheme}://auth`, extraLoginOptions: { id_token: 'YOUR_JWT_ID_TOKEN', // JWT ID token domain: 'https://example.auth0.com', // Auth0 domain verifierIdField: 'sub', // The field in JWT token mapping to verifier id }, }) ``` ## Aggregate verifier You can use an aggregate verifier to combine multiple login methods, allowing users to log in using different providers but receive the same address. To use aggregate verifiers, set up the `loginConfig` object with multiple providers under a single verifier. ```javascript const web3auth = new Web3Auth(WebBrowser, { clientId: 'YOUR_WEB3AUTH_CLIENT_ID', // Pass your Web3Auth Client ID, ideally using an environment variable // Web3Auth's client id network: WEB3AUTH_NETWORK.MAINNET, // or other networks loginConfig: { google: { verifier: 'aggregate-verifier', verifierSubIdentifier: 'google-sub-id', typeOfLogin: TypeOfLogin.GOOGLE, clientId: 'GOOGLE_CLIENT_ID', }, auth0emailpasswordless: { verifier: 'aggregate-verifier', verifierSubIdentifier: 'auth0-sub-id', typeOfLogin: TypeOfLogin.JWT, clientId: 'AUTH0_CLIENT_ID', jwtParameters: { domain: 'https://example.auth0.com', verifierIdField: 'email', isVerifierIdCaseSensitive: false, }, }, }, }) ``` ### Example implementations #### Using Google and Auth0 combined login ```javascript web3auth.login({ loginProvider: LOGIN_PROVIDER.GOOGLE, // or LOGIN_PROVIDER.JWT redirectUrl: `${scheme}://auth`, }) ```