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

# Group connections

Group connections link multiple login methods to the same onchain user identity. Users who sign in with different authentication providers (for example, Google and email passwordless) access the same wallet address.

note

Configure the individual login connections you want to group before creating a group connection.

## Set up a group connection[​](#set-up-a-group-connection "Direct link to Set up a group connection")

tip

Use the **Group Connections** tab in the [MetaMask Developer Dashboard](https://developer.metamask.io) to create group connections.

1. Go to the [MetaMask Developer Dashboard](https://developer.metamask.io).
2. Select your project and go to the **Group Connections** section.
3. Click **Create Group**.
4. Enter a group name.
5. Select the first and second social connections to include.
6. Click **Create Group**.

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

Group connection details are pulled from the dashboard automatically. You don't need to pass any additional parameters to the `Web3AuthProvider`.

tip

Follow our [quickstart](/quickstart/?product=EMBEDDED%5FWALLETS&walletAggregatorOnly=NO&framework=REACT&stepIndex=0) to set up the basic flow.

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

web3authContext.tsx

```
import { WALLET_CONNECTORS, WEB3AUTH_NETWORK } from '@web3auth/modal'
import { type Web3AuthContextConfig } from '@web3auth/modal/react'

const web3AuthContextConfig: Web3AuthContextConfig = {
  web3AuthOptions: {
    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',
            },
          },
        },
      },
    },
  },
}

export default web3AuthContextConfig

```

App.tsx

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

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

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

```

App.tsx

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

  await 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 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)
  }
}

```

App.tsx

```
const loginWithGoogle = async () => {
  await 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)

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

```