Facebook Social Login with Web3Auth

info

Using Facebook with Web3Auth Guide

Create a Facebook app

1. Follow Facebook's instructions to create a new app.

2. When creating an app, make sure to select Consumer from this screen to use Facebook Login.

3. On the next screen, you'll be presented with different products you can integrate into your Facebook app. Click "Set Up" in the card representing the Facebook Login capability.

   

4. Paste the following as a redirect URI into the "Valid OAuth Redirect URIs" field.

   • https://auth.web3auth.io/auth

   

5. Obtain the "App ID" and "App Secret" from the Settings > Basic screen.

   

Set up Facebook

1. Create a verifier for your Facebook application by selecting Facebook as the Login provider from this modal.
2. Paste the App ID and App Secret from the Facebook App(above) to the Client ID and Client Secret fields respectively and click on Create.

Example

Modal

import { Web3Auth } from "@web3auth/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",
  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: {
      // Facebook login
      facebook: {
        verifier: "w3a-facebook-demo", // Pass the Verifier name here
        typeOfLogin: "facebook", // Pass on the login provider of the verifier you've created
        clientId: "215892741216994", // Pass on the Facebook `Client ID` here
      },
    },
  },
});

web3auth.configureAdapter(openloginAdapter);

// Initialize Modal
await web3auth.initModal();

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

NoModal

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",
  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: {
      facebook: {
        verifier: "w3a-facebook-demo", // Pass the Verifier name here
        typeOfLogin: "facebook", // Pass on the login provider of the verifier you've created
        clientId: "215892741216994", // Pass on the Facebook `Client ID` here
      },
    },
  },
});

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

// Initialize
await web3auth.init();

// Login with Facebook
await web3auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, {
  loginProvider: "facebook",
});

Set up Facebook via Auth0

1. Create a verifier for your Auth0 application by selecting Auth0 as the Login provider from this modal.

2. Select the Facebook as the Authentication Type based on the dropdown.

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

   

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

5. Click on the Create button to create Facebook 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",
  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-demo", // Pass the Verifier name here
        typeOfLogin: "jwt", // Pass on the login provider of the verifier you've created
        clientId: "hUVVf4SEsZT7syOiL0gLU9hFEtm2gQ6O", // Pass on the Auth0 `Client ID` here
      },
    },
  },
});

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

// Initialize
await web3auth.init();

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