Twitch sign-in with Embedded Wallets

Twitch authentication lets users authenticate with a Twitch account. Choose the default connection for the quickest setup, or configure a custom connection when you need your own Twitch application, consent screen, or identity provider.

Default Twitch sign-in

The default connection uses the Twitch OAuth credentials managed by Embedded Wallets. You don't need a Twitch developer application.

Caveats

• The Twitch consent screen identifies the OAuth application managed by Embedded Wallets, not your dapp.
• You can't change the Twitch application configuration, such as its scopes or branding, because you don't own the credentials.
• The default connection and a custom connection are separate connections, so they produce different wallet addresses for the same person unless you link them with a group connection.

Configure the default connection

1. Open your project in the MetaMask Developer Dashboard.
2. Select Social Connections.
3. Enable Twitch.

The SDK reads the connection from the dashboard. You don't need to add Twitch credentials to your SDK configuration.

Custom Twitch sign-in

Use a custom connection when the Twitch authorization belongs to your dapp or an identity platform you control. You can register a Twitch client ID on the social connection, or run Twitch through Auth0 or your own backend.

Firebase and Amazon Cognito

Firebase Authentication and Amazon Cognito don't offer Twitch as a first-party social provider. Use Auth0, a native Twitch client ID, or your own JWT.

Preserve wallet addresses

Decide between the default and a custom connection before you onboard users. Moving from the default Twitch connection to a custom Twitch, Auth0, or JWT connection changes every user's wallet address unless both connections are in a group connection with matching user identifiers.

Your Twitch application

1. Register a Twitch application.

2. Add https://auth.web3auth.io/auth as an OAuth Redirect URL.

   

3. Open Manage on the application and copy the Client ID.

   

4. In the MetaMask Developer Dashboard, open Social Connections, select the settings icon next to Twitch, and enter an Auth Connection ID and the Twitch Client ID.

Call Embedded Wallets with AUTH_CONNECTION.TWITCH and that Auth Connection ID.

Auth0

1. Configure Twitch as a social connection in Auth0.
2. Create an Auth0 connection in the MetaMask Developer Dashboard.
3. For an implicit flow, call Embedded Wallets with the Auth0 connection ID and set the Auth0 connection name to twitch.
4. For a JWT flow, authenticate with the Auth0 SDK, retrieve its raw ID token, and pass that token to Embedded Wallets.

Your own backend

1. Complete Twitch OAuth in your client and send the result to your backend.
2. Exchange the authorization code with Twitch's token endpoint and validate the user identity before trusting it.
3. Issue a fresh JWT with an iat no more than 60 seconds old and expose the signing public key through a JSON Web Key Set (JWKS) endpoint.
4. Create a custom JWT connection that validates your issuer, audience, JWKS, and user identifier.
5. Pass your JWT and custom connection ID to Embedded Wallets.

Don't send a Twitch client secret to a client application.

Group Twitch connections

A group connection gives the same person one wallet address across several login methods.

Default Twitch, a native Twitch client ID, and Twitch through Auth0 are separate connections. They produce different wallet addresses unless you group them and every connection in the group uses the same JWT user identifier (email or an aligned sub).

Pass both the child connection ID and grouped connection ID when you bypass the modal:

await connectTo(WALLET_CONNECTORS.AUTH, {
  authConnection: AUTH_CONNECTION.CUSTOM,
  authConnectionId: '<TWITCH_AUTH_CONNECTION_ID>',
  groupedAuthConnectionId: '<GROUPED_AUTH_CONNECTION_ID>',
  idToken,
})

Usage examples

The implicit examples open a Twitch or Auth0 authorization flow. The JWT examples assume your Auth0 or backend integration has already returned a fresh ID token.

Default implicit flow

React

import { AUTH_CONNECTION, WALLET_CONNECTORS } from '@web3auth/modal'
import { useWeb3AuthConnect } from '@web3auth/modal/react'

const { connectTo } = useWeb3AuthConnect()

await connectTo(WALLET_CONNECTORS.AUTH, {
  authConnection: AUTH_CONNECTION.TWITCH,
})

Vue

import { AUTH_CONNECTION, WALLET_CONNECTORS } from '@web3auth/modal'
import { useWeb3AuthConnect } from '@web3auth/modal/vue'

const { connectTo } = useWeb3AuthConnect()

await connectTo(WALLET_CONNECTORS.AUTH, {
  authConnection: AUTH_CONNECTION.TWITCH,
})

JavaScript

import { AUTH_CONNECTION, WALLET_CONNECTORS } from '@web3auth/modal'

await web3auth.connectTo(WALLET_CONNECTORS.AUTH, {
  authConnection: AUTH_CONNECTION.TWITCH,
})

React Native

import { AUTH_CONNECTION, useWeb3AuthConnect } from '@web3auth/react-native-sdk'

const { connectTo } = useWeb3AuthConnect()

await connectTo({
  authConnection: AUTH_CONNECTION.TWITCH,
})

Android

val response = web3Auth.connectTo(
  LoginParams(AuthConnection.TWITCH)
)

iOS

let response = try await web3Auth.connectTo(
    loginParams: LoginParams(authConnection: .TWITCH)
)

Flutter

final response = await Web3AuthFlutter.login(
  LoginParams(loginProvider: Provider.twitch),
);

Unity

var options = new LoginParams
{
    loginProvider = Provider.TWITCH
};

web3Auth.login(options);

Unreal Engine

FWeb3AuthLoginParams LoginParams;
LoginParams.LoginProvider = TEXT("twitch");

UWeb3AuthSDK::GetInstance()->Login(LoginParams);

Native custom implicit flow

Use these examples after you add your own client ID on the social connection in the dashboard. For Android and iOS, add the connection to authConnectionConfig during initialization. Flutter, Unity, and Unreal Engine currently use their platform's loginConfig; configure it by following the custom authentication guide for Flutter, Unity, or Unreal Engine.

React

await connectTo(WALLET_CONNECTORS.AUTH, {
  authConnection: AUTH_CONNECTION.TWITCH,
  authConnectionId: '<AUTH_CONNECTION_ID>',
})

Vue

await connectTo(WALLET_CONNECTORS.AUTH, {
  authConnection: AUTH_CONNECTION.TWITCH,
  authConnectionId: '<AUTH_CONNECTION_ID>',
})

JavaScript

await web3auth.connectTo(WALLET_CONNECTORS.AUTH, {
  authConnection: AUTH_CONNECTION.TWITCH,
  authConnectionId: '<AUTH_CONNECTION_ID>',
})

React Native

await connectTo({
  authConnection: AUTH_CONNECTION.TWITCH,
  authConnectionId: '<AUTH_CONNECTION_ID>',
})

Android

val response = web3Auth.connectTo(
  LoginParams(
    authConnection = AuthConnection.TWITCH,
    authConnectionId = "<AUTH_CONNECTION_ID>"
  )
)

iOS

let response = try await web3Auth.connectTo(
    loginParams: LoginParams(
        authConnection: .TWITCH,
        authConnectionId: "<AUTH_CONNECTION_ID>"
    )
)

Flutter

final response = await Web3AuthFlutter.login(
  LoginParams(loginProvider: Provider.twitch),
);

Unity

var options = new LoginParams
{
    loginProvider = Provider.TWITCH
};

web3Auth.login(options);

Unreal Engine

Configure the custom social connection in Blueprint by following the Unreal Engine custom authentication guide.

Auth0 implicit flow

These examples use the Auth0 custom connection configured for your SDK. Replace the connection ID and domain with your Auth0 values. For Android and iOS, add the connection to authConnectionConfig during initialization. Flutter, Unity, and Unreal Engine currently use their platform's loginConfig; configure it by following the custom authentication guide for Flutter, Unity, or Unreal Engine.

React

await connectTo(WALLET_CONNECTORS.AUTH, {
  authConnection: AUTH_CONNECTION.CUSTOM,
  authConnectionId: '<AUTH0_CONNECTION_ID>',
  extraLoginOptions: {
    connection: 'twitch',
  },
})

Vue

await connectTo(WALLET_CONNECTORS.AUTH, {
  authConnection: AUTH_CONNECTION.CUSTOM,
  authConnectionId: '<AUTH0_CONNECTION_ID>',
  extraLoginOptions: {
    connection: 'twitch',
  },
})

JavaScript

await web3auth.connectTo(WALLET_CONNECTORS.AUTH, {
  authConnection: AUTH_CONNECTION.CUSTOM,
  authConnectionId: '<AUTH0_CONNECTION_ID>',
  extraLoginOptions: {
    connection: 'twitch',
  },
})

React Native

await connectTo({
  authConnection: AUTH_CONNECTION.CUSTOM,
  authConnectionId: '<AUTH0_CONNECTION_ID>',
  extraLoginOptions: {
    connection: 'twitch',
  },
})

Android

val response = web3Auth.connectTo(
  LoginParams(
    authConnection = AuthConnection.CUSTOM,
    authConnectionId = "<AUTH0_CONNECTION_ID>",
    extraLoginOptions = ExtraLoginOptions(
      domain = "https://<AUTH0_DOMAIN>",
      connection = "twitch"
    )
  )
)

iOS

let response = try await web3Auth.connectTo(
    loginParams: LoginParams(
        authConnection: .CUSTOM,
        authConnectionId: "<AUTH0_CONNECTION_ID>",
        extraLoginOptions: ExtraLoginOptions(
            domain: "https://<AUTH0_DOMAIN>",
            connection: "twitch"
        )
    )
)

Flutter

final response = await Web3AuthFlutter.login(
  LoginParams(
    loginProvider: Provider.jwt,
    extraLoginOptions: ExtraLoginOptions(
      domain: 'https://<AUTH0_DOMAIN>',
      verifierIdField: 'sub',
      connection: 'twitch',
    ),
  ),
);

Unity

var options = new LoginParams
{
    loginProvider = Provider.JWT,
    extraLoginOptions = new ExtraLoginOptions
    {
        domain = "https://<AUTH0_DOMAIN>",
        verifierIdField = "sub",
        connection = "twitch"
    }
};

web3Auth.login(options);

Unreal Engine

The current Unreal Engine SDK documentation provides this flow through Blueprint configuration, not a verified C++ example. Configure the Auth0 connection by following the Unreal Engine custom authentication guide.

JWT flow

Obtain a fresh ID token from your identity aggregator or backend before calling Embedded Wallets. The token issuer and claims must match the custom connection in the dashboard.

React

const idToken = await getIdToken()

await connectTo(WALLET_CONNECTORS.AUTH, {
  authConnection: AUTH_CONNECTION.CUSTOM,
  authConnectionId: '<CUSTOM_CONNECTION_ID>',
  idToken,
})

Vue

const idToken = await getIdToken()

await connectTo(WALLET_CONNECTORS.AUTH, {
  authConnection: AUTH_CONNECTION.CUSTOM,
  authConnectionId: '<CUSTOM_CONNECTION_ID>',
  idToken,
})

JavaScript

const idToken = await getIdToken()

await web3auth.connectTo(WALLET_CONNECTORS.AUTH, {
  authConnection: AUTH_CONNECTION.CUSTOM,
  authConnectionId: '<CUSTOM_CONNECTION_ID>',
  idToken,
})

React Native

const idToken = await getIdToken()

await connectTo({
  authConnection: AUTH_CONNECTION.CUSTOM,
  authConnectionId: '<CUSTOM_CONNECTION_ID>',
  idToken,
})

Android

val response = web3Auth.connectTo(
  LoginParams(
    authConnection = AuthConnection.CUSTOM,
    authConnectionId = "<CUSTOM_CONNECTION_ID>",
    idToken = idToken
  )
)

iOS

let response = try await web3Auth.connectTo(
    loginParams: LoginParams(
        authConnection: .CUSTOM,
        authConnectionId: "<CUSTOM_CONNECTION_ID>",
        idToken: idToken
    )
)

Flutter

final response = await Web3AuthFlutter.login(
  LoginParams(
    loginProvider: Provider.jwt,
    extraLoginOptions: ExtraLoginOptions(
      id_token: idToken,
    ),
  ),
);

Unity

var options = new LoginParams
{
    loginProvider = Provider.JWT,
    extraLoginOptions = new ExtraLoginOptions
    {
        id_token = idToken
    }
};

web3Auth.login(options);

Unreal Engine

The current Unreal Engine SDK documentation doesn't provide a verified C++ JWT example. Configure the JWT connection and login in Blueprint by following the Unreal Engine custom authentication guide.

Node.js

const result = await web3auth.connect({
  authConnectionId: '<CUSTOM_CONNECTION_ID>',
  idToken,
})