> 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

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

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**

web3authContext.tsx

```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

```

**Google [Implicit] + Auth0 [Implicit]**

App.tsx

```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',
    },
  })
}

```

**Google One Tap [JWT] + Auth0 [JWT]**

App.tsx

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

```

**Google [Implicit] + Firebase [JWT]**

App.tsx

```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,
    },
  })
}

```