> For the complete documentation index, see [llms.txt](/llms.txt).

# Custom Authentication

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 MFA turned off, can even 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.

## Get an Auth Connection ID[​](#get-an-auth-connection-id "Direct link to Get an Auth Connection ID")

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.

## Modal custom authentication[​](#modal-custom-authentication "Direct link to Modal custom authentication")

The basic custom authentication is available directly in the modal. You can configure each of the auth providers in the modal to direct to your `authConnectionId`.

note

You can only configure implicit sign-in via modal, for JWT-based logins, you need to create your own UI and use the `connectTo` function.

For the modal custom authentication, you need to pass the `modalConfig` object to the `Web3AuthOptions` object within the constructor.

tip

Learn more about the `modalConfig` object in the [Whitelabel](/embedded-wallets/sdk/js/advanced/whitelabel/) section.

### Usage[​](#usage "Direct link to Usage")

- Single connections
- Grouped connections

```
import { Web3Auth, WALLET_CONNECTORS, WEB3AUTH_NETWORK } from '@web3auth/modal'

const web3auth = new Web3Auth({
  clientId: 'YOUR_WEB3AUTH_CLIENT_ID', // Pass your Web3Auth Client ID, ideally using an environment variable
  web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
  modalConfig: {
    connectors: {
      [WALLET_CONNECTORS.AUTH]: {
        label: 'auth',
        loginMethods: {
          google: {
            name: 'google login',
            authConnectionId: 'w3a-google-demo',
          },
          facebook: {
            name: 'facebook login',
            authConnectionId: 'w3a-facebook-demo',
          },
          discord: {
            name: 'discord login',
            authConnectionId: 'w3a-discord-demo',
          },
          twitch: {
            name: 'twitch login',
            authConnectionId: 'w3a-twitch-demo',
          },
          twitter: {
            name: 'twitter login',
            // it will hide the twitter option from the Web3Auth modal.
            showOnModal: false,
          },
          email_passwordless: {
            name: 'email passwordless login',
            authConnectionId: 'w3a-email_passwordless-demo',
          },
          sms_passwordless: {
            name: 'sms passwordless login',
            authConnectionId: 'w3a-sms_passwordless-demo',
          },
        },
        // setting it to false will hide all social login methods from modal.
        showOnModal: true,
      },
    },
  },
})

// Initialize web3auth
await web3auth.init()

```

```
import { Web3Auth, WALLET_CONNECTORS, WEB3AUTH_NETWORK } from '@web3auth/modal'

const web3auth = new Web3Auth({
  clientId: 'YOUR_WEB3AUTH_CLIENT_ID', // Pass your Web3Auth Client ID, ideally using an environment variable
  web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
  modalConfig: {
    connectors: {
      [WALLET_CONNECTORS.AUTH]: {
        label: 'auth',
        loginMethods: {
          google: {
            name: 'google login',
            authConnectionId: 'w3a-google',
            groupedAuthConnectionId: 'aggregate-sapphire',
          },
          facebook: {
            name: 'facebook login',
            authConnectionId: 'w3a-facebook',
            groupedAuthConnectionId: 'aggregate-sapphire',
          },
          email_passwordless: {
            name: 'email passwordless login',
            authConnectionId: 'w3a-email-passwordless',
            groupedAuthConnectionId: 'aggregate-sapphire',
          },
        },
      },
    },
  },
})

// Initialize web3auth
await web3auth.init()

```

## Advanced custom authentication[​](#advanced-custom-authentication "Direct link to Advanced custom authentication")

The more advanced custom authentication is available via the `connectTo` function. This allows you to any service you want and tie it to your Web3Auth Integration. **This method allows you to make Web3Auth totally invisible to your end users and have a fully customized experience all across.**

You can utilise this function to enable multiple types of connections like:

- Implicit Sign-in connections
- JWT sign-in connections
- Grouped auth connections

<details class="details_lb9f alert alert--info details_b_Ee" data-collapsed="true"><summary><code>connectTo</code> Function Reference</summary><div><div class="collapsibleContent_i85q"><div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><div class="token-line" style="color:#F8F8F2"><span class="token generic-function function" style="color:rgb(80, 250, 123)">connectTo</span><span class="token generic-function generic class-name operator">&lt;</span><span class="token generic-function generic class-name constant" style="color:rgb(189, 147, 249)">T</span><span class="token generic-function generic class-name"> </span><span class="token generic-function generic class-name keyword" style="color:rgb(189, 147, 249);font-style:italic">extends</span><span class="token generic-function generic class-name"> </span><span class="token generic-function generic class-name constant" style="color:rgb(189, 147, 249)">WALLET_CONNECTOR_TYPE</span><span class="token generic-function generic class-name operator">&gt;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">  connector</span><span class="token operator">:</span><span class="token plain"> </span><span class="token constant" style="color:rgb(189, 147, 249)">T</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">  params</span><span class="token operator">?</span><span class="token operator">:</span><span class="token plain"> LoginParamMap</span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token constant" style="color:rgb(189, 147, 249)">T</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">Promise</span><span class="token operator">&lt;</span><span class="token plain">IProvider </span><span class="token operator">|</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">null</span><span class="token operator">&gt;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">export</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">type</span><span class="token plain"> </span><span class="token class-name">LoginParamMap</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token constant" style="color:rgb(189, 147, 249)">WALLET_CONNECTORS</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token constant" style="color:rgb(189, 147, 249)">AUTH</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token operator">:</span><span class="token plain"> Partial</span><span class="token operator">&lt;</span><span class="token plain">AuthLoginParams</span><span class="token operator">&gt;</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">    </span><span class="token operator">...</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><br></div></code></pre></div></div><h4 class="anchor anchorTargetStickyNavbar_Vzrq" id="authloginparams"><code>AuthLoginParams</code><a href="#authloginparams" class="hash-link" aria-label="Direct link to authloginparams" title="Direct link to authloginparams" translate="no">​</a></h4><div class="theme-tabs-container tabs-container tabList_LQQP"><ul role="tablist" aria-orientation="horizontal" class="tabs_HotJ tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_IdCf tabs__item--active">Table</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_IdCf">Interface</li></ul><div><div role="tabpanel" class="tabItem_Ymn6"><table><thead><tr><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td><code>loginHint?</code></td><td>Helps pass over the login hint to the auth provider. This is used especially for <code>email_passwordless</code> and <code>sms_passwordless</code> logins.</td></tr><tr><td><code>idToken?</code></td><td>Pass over the JWT ID token directly to Web3Auth for JWT authentication.</td></tr><tr><td><code>authConnection?</code></td><td>The auth provider to use for login (for example, "google", "facebook").</td></tr><tr><td><code>authConnectionId?</code></td><td>The ID configured in your Embedded Wallets dashboard for the connection.</td></tr><tr><td><code>groupedAuthConnectionId?</code></td><td>The grouped Auth Connection ID to be used for login.</td></tr><tr><td><code>extraLoginOptions?</code></td><td>Custom OAuth options (for example, login_hint, domain).</td></tr></tbody></table></div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><div class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">export</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">type</span><span class="token plain"> </span><span class="token class-name">AuthLoginParams</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> </span><span class="token maybe-class-name">LoginParams</span><span class="token plain"> </span><span class="token operator">&amp;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">  loginHint</span><span class="token operator">?</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">  idToken</span><span class="token operator">?</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">export</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">type</span><span class="token plain"> </span><span class="token class-name">LoginParams</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token comment" style="color:rgb(98, 114, 164)">/**</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">* Any custom state you wish to pass along. This will be returned to you post redirect.</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">* Use this to store data that you want to be available to the dapp after login.</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">*/</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">appState</span><span class="token operator">?</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token comment" style="color:rgb(98, 114, 164)">/**</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">* The auth connection to be used for login.</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">*/</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">authConnection</span><span class="token operator">:</span><span class="token plain"> </span><span class="token constant" style="color:rgb(189, 147, 249)">AUTH_CONNECTION_TYPE</span><span class="token plain"> </span><span class="token operator">|</span><span class="token plain"> </span><span class="token constant" style="color:rgb(189, 147, 249)">CUSTOM_AUTH_CONNECTION_TYPE</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token comment" style="color:rgb(98, 114, 164)">/**</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">* The auth connection id to be used for login.</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">*/</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">authConnectionId</span><span class="token operator">?</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token comment" style="color:rgb(98, 114, 164)">/**</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">* The grouped auth connection id to be used for login.</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">*/</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">groupedAuthConnectionId</span><span class="token operator">?</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token comment" style="color:rgb(98, 114, 164)">/**</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">* You can set the `mfaLevel` to customize when mfa screen should be shown to user.</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">* It currently accepts 4 values:-</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">* - `'default'`: Setting mfa level to `default` will present mfa screen to user on every third login.</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">* - `'optional'`: Setting mfa level to `default` will present mfa screen to user on every login but user can skip it.</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">* - `'mandatory'`: Setting mfa level to `mandatory` will make it mandatory for user to setup mfa after login.</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">* - `'none'`: Setting mfa level to `none` will make the user skip the mfa setup screen</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">*</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">* Defaults to `none`</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">* @defaultValue `none`</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">*/</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">mfaLevel</span><span class="token operator">?</span><span class="token operator">:</span><span class="token plain"> </span><span class="token maybe-class-name">MfaLevelType</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token comment" style="color:rgb(98, 114, 164)">/**</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">* This option is for internal use only in torus wallet and has no effect</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">* on user's login on other dapps.</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">*</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">* Defaults to false</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">* @defaultValue false</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">* @internal</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">*/</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">getWalletKey</span><span class="token operator">?</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">boolean</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token comment" style="color:rgb(98, 114, 164)">/**</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">* extraLoginOptions can be used to pass standard oauth login options to</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">* loginProvider.</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">*</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">* For ex: you will have to pass `login_hint` as user's email and `domain`</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">* as your app domain in `extraLoginOptions` while using `email_passwordless`</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">* loginProvider</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">*/</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">extraLoginOptions</span><span class="token operator">?</span><span class="token operator">:</span><span class="token plain"> </span><span class="token maybe-class-name">ExtraLoginOptions</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token comment" style="color:rgb(98, 114, 164)">/**</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">* Custom Logins can get a dapp share returned to them post successful login.</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">* This is useful if the dapps want to use this share to allow users to login seamlessly</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">* dappShare is a 24 word seed phrase</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">*/</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">dappShare</span><span class="token operator">?</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token comment" style="color:rgb(98, 114, 164)">/**</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">* This curve will be used to determine the public key encoded in the jwt token which returned in</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">* `getUserInfo` function after user login.</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">* You can use that public key from jwt token as a unique user identifier in your backend.</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">*</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">* - `'secp256k1'`: secp256k1 based pub key is added as a wallet public key in jwt token to use.</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">* - `'ed25519'`: ed25519 based pub key is added as a wallet public key in jwt token to use.</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">*</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">* Note: This parameter won't change format of private key returned by auth. Private key returned</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">* by auth is always `secp256k1`.</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">*</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">*</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">* @defaultValue secp256k1</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">*/</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">curve</span><span class="token operator">?</span><span class="token operator">:</span><span class="token plain"> </span><span class="token constant" style="color:rgb(189, 147, 249)">SUPPORTED_KEY_CURVES_TYPE</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token comment" style="color:rgb(98, 114, 164)">/**</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">* Allows the dapp to set a custom redirect url for the manage mfa flow.</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">*</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token comment" style="color:rgb(98, 114, 164)">*/</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">dappUrl</span><span class="token operator">?</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><br></div></code></pre></div></div></div></div></div><h4 class="anchor anchorTargetStickyNavbar_Vzrq" id="auth-connection-types">Auth connection types<a href="#auth-connection-types" class="hash-link" aria-label="Direct link to Auth connection types" title="Direct link to Auth connection types" translate="no">​</a></h4><div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><div class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">export</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> </span><span class="token constant" style="color:rgb(189, 147, 249)">AUTH_CONNECTION</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token constant" style="color:rgb(189, 147, 249)">GOOGLE</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'google'</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token constant" style="color:rgb(189, 147, 249)">TWITTER</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'twitter'</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token constant" style="color:rgb(189, 147, 249)">FACEBOOK</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'facebook'</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token constant" style="color:rgb(189, 147, 249)">DISCORD</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'discord'</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token constant" style="color:rgb(189, 147, 249)">FARCASTER</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'farcaster'</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token constant" style="color:rgb(189, 147, 249)">APPLE</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'apple'</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token constant" style="color:rgb(189, 147, 249)">GITHUB</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'github'</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token constant" style="color:rgb(189, 147, 249)">REDDIT</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'reddit'</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token constant" style="color:rgb(189, 147, 249)">LINE</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'line'</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token constant" style="color:rgb(189, 147, 249)">KAKAO</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'kakao'</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token constant" style="color:rgb(189, 147, 249)">LINKEDIN</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'linkedin'</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token constant" style="color:rgb(189, 147, 249)">TWITCH</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'twitch'</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token constant" style="color:rgb(189, 147, 249)">TELEGRAM</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'telegram'</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token constant" style="color:rgb(189, 147, 249)">WECHAT</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'wechat'</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token constant" style="color:rgb(189, 147, 249)">EMAIL_PASSWORDLESS</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'email_passwordless'</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token constant" style="color:rgb(189, 147, 249)">SMS_PASSWORDLESS</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'sms_passwordless'</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">  </span><span class="token constant" style="color:rgb(189, 147, 249)">CUSTOM</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'custom'</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><br></div></code></pre></div></div><h4 class="anchor anchorTargetStickyNavbar_Vzrq" id="advanced-options-extraloginoptions">Advanced options (<code>extraLoginOptions</code>)<a href="#advanced-options-extraloginoptions" class="hash-link" aria-label="Direct link to advanced-options-extraloginoptions" title="Direct link to advanced-options-extraloginoptions" translate="no">​</a></h4><p>For custom integrations (like Auth0, AWS Cognito), you can provide additional options:</p><div class="theme-tabs-container tabs-container tabList_LQQP"><ul role="tablist" aria-orientation="horizontal" class="tabs_HotJ tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_IdCf tabs__item--active">Table</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_IdCf">Interface</li></ul><div><div role="tabpanel" class="tabItem_Ymn6"><table><thead><tr><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td><code>isUserIdCaseSensitive</code></td><td>Whether the user ID field is case sensitive [Default: true]</td></tr><tr><td><code>domain</code></td><td>Auth provider domain (for example, "example.auth0.com")</td></tr><tr><td><code>client_id</code></td><td>Client ID from your auth provider</td></tr><tr><td><code>scope</code></td><td>OAuth scopes (for example, "email profile openid")</td></tr><tr><td><code>response_type</code></td><td>Response type for OAuth flow</td></tr><tr><td><code>login_hint</code></td><td>Pre-fill user identifier</td></tr></tbody></table></div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><div class="token-line" style="color:#F8F8F2"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">export</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">type</span><span class="token plain"> </span><span class="token class-name">ExtraLoginOptions</span><span class="token plain"> </span><span class="token operator">=</span><span class="token plain"> Auth0ClientOptions</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">export</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">interface</span><span class="token plain"> </span><span class="token class-name">Auth0ClientOptions</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">extends</span><span class="token plain"> </span><span class="token class-name">BaseLoginOptions</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token doc-comment comment" style="color:rgb(98, 114, 164)">/**</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token doc-comment comment" style="color:rgb(98, 114, 164)"> * Your Auth0 account domain such as `'example.auth0.com'`,</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token doc-comment comment" style="color:rgb(98, 114, 164)"> * `'example.eu.auth0.com'` or , `'example.mycompany.com'`</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token doc-comment comment" style="color:rgb(98, 114, 164)"> * (when using [custom domains](https://auth0.com/docs/custom-domains))</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token doc-comment comment" style="color:rgb(98, 114, 164)"> */</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">domain</span><span class="token operator">?</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token doc-comment comment" style="color:rgb(98, 114, 164)">/**</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token doc-comment comment" style="color:rgb(98, 114, 164)"> * The Client ID found on your Application settings page</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token doc-comment comment" style="color:rgb(98, 114, 164)"> */</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">client_id</span><span class="token operator">?</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token doc-comment comment" style="color:rgb(98, 114, 164)">/**</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token doc-comment comment" style="color:rgb(98, 114, 164)"> * The field in jwt token which maps to user id</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token doc-comment comment" style="color:rgb(98, 114, 164)"> */</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">userIdField</span><span class="token operator">?</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token doc-comment comment" style="color:rgb(98, 114, 164)">/**</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token doc-comment comment" style="color:rgb(98, 114, 164)"> * Whether the user id field is case sensitive</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token doc-comment comment" style="color:rgb(98, 114, 164)"> * </span><span class="token doc-comment comment keyword" style="color:rgb(189, 147, 249);font-style:italic">@defaultValue</span><span class="token doc-comment comment" style="color:rgb(98, 114, 164)"> true</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token doc-comment comment" style="color:rgb(98, 114, 164)"> */</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">isUserIdCaseSensitive</span><span class="token operator">?</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">boolean</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">id_token</span><span class="token operator">?</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">access_token</span><span class="token operator">?</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token doc-comment comment" style="color:rgb(98, 114, 164)">/**</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token doc-comment comment" style="color:rgb(98, 114, 164)"> * The route for user info endpoint. This will be padded to domain</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token doc-comment comment" style="color:rgb(98, 114, 164)"> * </span><span class="token doc-comment comment keyword" style="color:rgb(189, 147, 249);font-style:italic">@defaultValue</span><span class="token doc-comment comment" style="color:rgb(98, 114, 164)"> userinfo</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token doc-comment comment" style="color:rgb(98, 114, 164)"> * */</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">user_info_route</span><span class="token operator">?</span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">string</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token doc-comment comment" style="color:rgb(98, 114, 164)">/**</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token doc-comment comment" style="color:rgb(98, 114, 164)"> * The flow type for email_passwordless login</span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token doc-comment comment" style="color:rgb(98, 114, 164)"> */</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain">flow_type</span><span class="token operator">?</span><span class="token operator">:</span><span class="token plain"> </span><span class="token constant" style="color:rgb(189, 147, 249)">EMAIL_FLOW_TYPE</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><br></div></code></pre></div></div></div></div></div></div></div></details>

### Implicit logins[​](#implicit-logins "Direct link to Implicit logins")

Implicit logins are the easiest way to authenticate users with your custom authentication services. Web3Auth currently supports implicit logins for the following providers directly:

- Google
- Facebook
- Discord
- Twitch
- Auth0 (Custom)

In addition to these you can also use any other provider (like Auth0, AWS Cognito, Azure AD) by providing the particular details of their login within the `extraLoginOptions` object within the `connectTo` function.

#### Usage[​](#usage-1 "Direct link to Usage")

- Google
- Facebook
- Discord
- Twitch
- Auth0 Google
- Auth0 SPA
- AWS Cognito

```
// web3auth instance already initialized
await web3auth.connectTo(WALLET_CONNECTORS.AUTH, {
  authConnection: AUTH_CONNECTION.GOOGLE,
  authConnectionId: "w3a-google-demo",
});

```

```
// web3auth instance already initialized
await web3auth.connectTo(WALLET_CONNECTORS.AUTH, {
  authConnection: AUTH_CONNECTION.FACEBOOK,
  authConnectionId: "w3a-facebook-demo",
});

```

```
// web3auth instance already initialized
await web3auth.connectTo(WALLET_CONNECTORS.AUTH, {
  authConnection: AUTH_CONNECTION.DISCORD,
  authConnectionId: "w3a-discord-demo",
});

```

```
// web3auth instance already initialized
await web3auth.connectTo(WALLET_CONNECTORS.AUTH, {
  authConnection: AUTH_CONNECTION.TWITCH,
  authConnectionId: "w3a-twitch-demo",
});

```

```
// web3auth instance already initialized
await web3auth.connectTo(WALLET_CONNECTORS.AUTH, {
  authConnection: AUTH_CONNECTION.CUSTOM,
  authConnectionId: "w3a-auth0-demo",
  extraLoginOptions: {
    connection: "google-oauth2",
  },
});

```

```
// web3auth instance already initialized
await web3auth.connectTo(WALLET_CONNECTORS.AUTH, {
  authConnection: AUTH_CONNECTION.CUSTOM,
  authConnectionId: "w3a-auth0-demo",
});

```

```
// web3auth instance already initialized
await web3auth.connectTo(WALLET_CONNECTORS.AUTH, {
  authConnection: AUTH_CONNECTION.CUSTOM,
  authConnectionId: "w3a-cognito-demo",
  extraLoginOptions: {
    clientId: import.meta.env.VITE_COGNITO_CLIENT_ID,
    domain: "https://shahbaz-web3auth.auth.ap-south-1.amazoncognito.com",
    verifierIdField: "email",
    response_type: "token",
    scope: "email profile openid",
  },
});

```

### JWT login[​](#jwt-login "Direct link to JWT login")

JWT login is a way to authenticate users with your custom authentication services. With this method, Web3Auth just takes into account the `idToken` passed over to the `connectTo` function and uses it to authenticate the user. You can utilise this method with any authentication service that is OAuth 2.0 Compatible.

warning

If you have not configured on the dashboard, whether you user ID is case sensitive or not, then you need to pass the `isUserIdCaseSensitive` option to the `extraLoginOptions`.

#### Usage[​](#usage-2 "Direct link to Usage")

- Google One Tap
- Auth0 JWT login
- Firebase JWT login
- Custom JWT login

```
const loginWithGoogle = async (response: CredentialResponse) => {
  const idToken = response.credential;

  await web3auth.connectTo(WALLET_CONNECTORS.AUTH, {
    authConnectionId: "w3a-google-demo",
    authConnection: AUTH_CONNECTION.GOOGLE,
    idToken,
    extraLoginOptions: {
      isUserIdCaseSensitive: false,
    },
  });
};

...

<GoogleLogin
  onSuccess={loginWithGoogle}
  onError={() => {
    console.log("Login Failed");
  }}
  useOneTap
/>

```

```
const { getIdTokenClaims, loginWithPopup } = useAuth0()

const loginWithAuth0 = async () => {
  try {
    await loginWithPopup()

    const idToken = (await getIdTokenClaims())?.__raw.toString()
    if (!idToken) {
      throw new Error('No id token found')
    }

    await web3auth.connectTo(WALLET_CONNECTORS.AUTH, {
      authConnectionId: 'w3a-auth0-demo',
      authConnection: AUTH_CONNECTION.CUSTOM,
      idToken,
      extraLoginOptions: {
        isUserIdCaseSensitive: false,
      },
    })
  } catch (err) {
    console.error(err)
  }
}

```

```
const loginWithFirebaseGithub = async () => {
  try {
    const app = initializeApp(firebaseConfig)
    const auth = getAuth(app)
    const githubProvider = new GithubAuthProvider()

    const result = await signInWithPopup(auth, githubProvider)

    const idToken = await result.user.getIdToken(true)

    await web3auth.connectTo(WALLET_CONNECTORS.AUTH, {
      authConnectionId: 'w3a-firebase-demo',
      authConnection: AUTH_CONNECTION.CUSTOM,
      idToken,
      extraLoginOptions: {
        isUserIdCaseSensitive: false,
      },
    })
  } catch (error) {
    console.error('Firebase authentication error:', error)
  }
}

```

```
const getIdToken = async () => {
  // Get ID Token from server
  const res = await fetch('http://localhost:8080/api/token', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
  })
  const data = await res.json()
  return data?.token
}

const loginWithJWT = async () => {
  try {
    const idToken = await getIdToken()

    await web3auth.connectTo(WALLET_CONNECTORS.AUTH, {
      authConnection: AUTH_CONNECTION.CUSTOM,
      authConnectionId: 'w3a-node-demo',
      idToken,
      extraLoginOptions: {
        isUserIdCaseSensitive: false,
      },
    })
  } catch (err) {
    console.error(err)
  }
}

```

### Grouped auth connections[​](#grouped-auth-connections "Direct link to Grouped auth connections")

Grouped auth connections allows you to group multiple auth connections together and use them as a single connection. This is useful when you want to authenticate the user with multiple providers and require the same user wallet address to be generated.

For example, you can group Google and email passwordless providers together and use them as a single connection. Now, if your user logs in with Google Auth or even with email passwordless using the same email, they will get the same wallet address.

Prerequisites

You need to configure a grouped connection, by combining your single connections in the Embedded Wallets dashboard before using this feature.

- Google [Implicit] + Auth0 [Implicit]
- Google One Tap [JWT] + Auth0 [JWT]
- Google [Implicit] + Firebase [JWT]

```
const loginWithGoogle = async () => {
  await web3auth.connectTo(WALLET_CONNECTORS.AUTH, {
    groupedAuthConnectionId: 'aggregate-sapphire',
    authConnectionId: 'w3a-google',
    authConnection: AUTH_CONNECTION.GOOGLE,
  })
}

const loginWithAuth0Google = async () => {
  await web3auth.connectTo(WALLET_CONNECTORS.AUTH, {
    groupedAuthConnectionId: 'aggregate-sapphire',
    authConnectionId: 'w3a-a0-google',
    authConnection: AUTH_CONNECTION.CUSTOM,
    extraLoginOptions: {
      connection: 'google-oauth2',
    },
  })
}

const loginWithAuth0GitHub = async () => {
  await web3auth.connectTo(WALLET_CONNECTORS.AUTH, {
    groupedAuthConnectionId: 'aggregate-sapphire',
    authConnectionId: 'w3a-a0-github',
    authConnection: AUTH_CONNECTION.CUSTOM,
    extraLoginOptions: {
      connection: 'github',
    },
  })
}

```

```
const loginWithGoogle = async (response: CredentialResponse) => {
  const idToken = response.credential

  await web3auth.connectTo(WALLET_CONNECTORS.AUTH, {
    groupedAuthConnectionId: 'aggregate-sapphire',
    authConnectionId: 'w3a-google',
    authConnection: AUTH_CONNECTION.GOOGLE,
    idToken,
    extraLoginOptions: {
      isUserIdCaseSensitive: false,
      verifierIdField: 'email',
    },
  })
}

const loginWithAuth0 = async () => {
  try {
    await loginWithPopup()
    const idToken = (await getIdTokenClaims())?.__raw.toString()
    if (!idToken) {
      throw new Error('No id token found')
    }

    await web3auth.connectTo(WALLET_CONNECTORS.AUTH, {
      groupedAuthConnectionId: 'aggregate-sapphire',
      authConnectionId: 'w3a-a0-github',
      authConnection: AUTH_CONNECTION.CUSTOM,
      idToken,
      extraLoginOptions: {
        isUserIdCaseSensitive: false,
        verifierIdField: 'email',
      },
    })
  } catch (err) {
    console.error(err)
  }
}

```

```
const loginWithGoogle = async () => {
  await web3auth.connectTo(WALLET_CONNECTORS.AUTH, {
    groupedAuthConnectionId: 'aggregate-sapphire',
    authConnectionId: 'w3a-google',
    authConnection: AUTH_CONNECTION.GOOGLE,
  })
}

const loginWithFirebaseGithub = async () => {
  const app = initializeApp(firebaseConfig)
  const auth = getAuth(app)
  const githubProvider = new GithubAuthProvider()

  const result = await signInWithPopup(auth, githubProvider)

  const idToken = await result.user.getIdToken(true)

  await web3auth.connectTo(WALLET_CONNECTORS.AUTH, {
    groupedAuthConnectionId: 'aggregate-sapphire',
    authConnectionId: 'w3a-firebase',
    authConnection: AUTH_CONNECTION.CUSTOM,
    idToken,
    extraLoginOptions: {
      isUserIdCaseSensitive: false,
    },
  })
}

```
