Skip to main content

Twitch Social Login with Web3Auth

info

Using Twitch with Web3Auth Guide

Create a Twitch app​

  1. Follow Twitch's registration instructions to (register your app)[https://dev.twitch.tv/console/apps/create].

  2. Paste the following as a Redirect URI into the "OAuth Redirect URLs" field.

    Twitch OAuth2.0 App Dashboard

  3. After creation of your Twitch app, click Manage

    Twitch OAuth2.0 App Manage

  4. Obtain the Client ID

    Twitch OAuth2.0 App Manage

Set up Twitch​

  1. Create a verifier for your Twitch application by selecting Twitch as the Login provider from this modal. Login Providers list on Web3Auth Dashboard
  2. Paste the Client ID from the Twitch App(above) to the Client ID field and click on Create. Twitch Client ID on Web3Auth Dashboard

Example​

import { Web3Auth } from "@web3auth/modal";
import { OpenloginAdapter } from "@web3auth/openlogin-adapter";

const clientId = "YOUR_WEB3AUTH_CLIENT_ID";
// get it from https://dashboard.web3auth.io by creating a Plug n Play project.

const chainConfig = {
  chainNamespace: "eip155",
  chainId: "0x1",
  rpcTarget: "https://rpc.ankr.com/eth",
  displayName: "Ethereum Mainnet",
  blockExplorerUrl: "https://etherscan.io",
  ticker: "ETH",
  tickerName: "Ethereum",
  logo: "https://images.toruswallet.io/ethereum.svg",
};

const privateKeyProvider = new EthereumPrivateKeyProvider({
  config: { chainConfig },
});

const web3auth = new Web3Auth({
  clientId,
  web3AuthNetwork: "sapphire_mainnet",
  privateKeyProvider: privateKeyProvider,
});

const openloginAdapter = new OpenloginAdapter({
  adapterSettings: {
    loginConfig: {
      // Twitch login
      twitch: {
        verifier: "w3a-twitch-demo", // Pass the Verifier name here
        typeOfLogin: "twitch", // Pass on the login provider of the verifier you've created
        clientId: "3k7e70gowvxjaxg71hjnc8h8ih3bpf", // Pass on the Twitch `Client ID` here
      },
    },
  },
});

web3auth.configureAdapter(openloginAdapter);

// Initialize Modal
await web3auth.initModal();

// Login with Twitch
await web3auth.connect();

Set up Twitch via Auth0​

  1. Create a verifier for your Auth0 application by selecting Auth0 as the Login provider from this modal. Twitch - Login Providers list on Web3Auth Dashboard

  2. Select the Twitch as the Authentication Type based on the dropdown. Twitch - Auth0 Authentication Type list on Web3Auth Dashboard

  3. Enter the Auth0 Client ID and Auth0 Domain from your Auth0 application. See how to create a new Auth0 application here.

    Twitch - Domain and Client ID from Auth0 Dashboard Twitch - Auth0 Client ID and Auth0 Domain on Web3Auth Dashboard

  4. Add the Twitch Social Connection to your Auth0 application.

  5. Click on the Create button to create Twitch Custom Authentication via Auth0 verifier.

Example​

import { Web3AuthNoModal } from "@web3auth/no-modal";
import { OpenloginAdapter } from "@web3auth/openlogin-adapter";
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";

const clientId =
  "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ";
// get it from https://dashboard.web3auth.io by creating a project.

const chainConfig = {
  chainNamespace: "eip155",
  chainId: "0x1",
  rpcTarget: "https://rpc.ankr.com/eth",
  displayName: "Ethereum Mainnet",
  blockExplorerUrl: "https://etherscan.io",
  ticker: "ETH",
  tickerName: "Ethereum",
  logo: "https://images.toruswallet.io/ethereum.svg",
};

const privateKeyProvider = new EthereumPrivateKeyProvider({
  config: { chainConfig },
});

const web3auth = new Web3AuthNoModal({
  clientId,
  web3AuthNetwork: "sapphire_mainnet",
  privateKeyProvider: privateKeyProvider,
});

const openloginAdapter = new OpenloginAdapter({
  privateKeyProvider,
  adapterSettings: {
    loginConfig: {
      jwt: {
        verifier: "w3a-auth0-jp-demo", // Pass the Verifier name here
        typeOfLogin: "jwt", // Pass on the login provider of the verifier you've created
        clientId: "N9jnKM2Fo8PFRj8rYM9I7rWX1FW6X5xx", // Pass on the Auth0 `Client ID` here
      },
    },
  },
});

web3auth.configureAdapter(openloginAdapter);
setWeb3auth(web3auth);

// Initialize
await web3auth.init();

// Login with Twitch
await web3auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, {
  loginProvider: "jwt",
  extraLoginOptions: {
    domain: "https://web3auth.jp.auth0.com", // Pass on the Auth0 `Domain` here
    verifierIdField: "sub", // Pass on the field name of the `sub` field in the JWT
    connection: "twitch", // Use this to skip Auth0 Modal for Twitch login
  },
});