Google Social Login with Web3Auth
Create a Google app
Follow Google’s instructions to set up an OAuth 2.0 app.
Paste the following URI as a redirect URI into the "Authorized redirect URIs" field.
Obtain the OAuth
Client ID
from your App on the Google Developer dashboard
Set up Google
Create a verifier for your Google application by first clicking on
Social Login Provider
and then selectingGoogle
as the Login provider from the dropdown list.Paste the Client ID from the Google App(above) to the
Client ID
field and click on Create.noteGoogle Client ID is the OAuth Client ID obtained from the Google Developer dashboard and it's a required field.
Example
- Modal
- NoModal
import { Web3Auth } from "@web3auth/modal";
import { OpenloginAdapter } from "@web3auth/openlogin-adapter";
const clientId = "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ";
// get it from https://dashboard.web3auth.io by creating a Plug n Play project.
const web3auth = new Web3Auth({
clientId,
web3AuthNetwork: "sapphire_mainnet",
chainConfig: {
chainNamespace: "eip155",
chainId: "0x1",
rpcTarget: "https://rpc.ankr.com/eth",
displayName: "Ethereum Mainnet",
blockExplorer: "https://goerli.etherscan.io",
ticker: "ETH",
tickerName: "Ethereum",
},
});
const openloginAdapter = new OpenloginAdapter({
adapterSettings: {
uxMode: "popup",
loginConfig: {
// Google login
google: {
verifier: "w3a-google-demo", // Pass the Verifier name here
typeOfLogin: "google", // Pass on the login provider of the verifier you've created
clientId: "519228911939-cri01h55lsjbsia1k7ll6qpalrus75ps.apps.googleusercontent.com", // Pass on the Google `Client ID` here
},
},
},
});
web3auth.configureAdapter(openloginAdapter);
// Initialize Modal
await web3auth.initModal();
// Login with Google
await web3auth.connect();
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",
blockExplorer: "https://goerli.etherscan.io",
ticker: "ETH",
tickerName: "Ethereum",
};
const web3auth = new Web3Auth({
clientId,
chainConfig,
web3AuthNetwork: "sapphire_mainnet",
});
const privateKeyProvider = new EthereumPrivateKeyProvider({
config: { chainConfig },
});
const openloginAdapter = new OpenloginAdapter({
privateKeyProvider,
adapterSettings: {
uxMode: "redirect",
loginConfig: {
google: {
verifier: "w3a-google-demo", // Pass the Verifier name here
typeOfLogin: "google", // Pass on the login provider of the verifier you've created
clientId: "519228911939-cri01h55lsjbsia1k7ll6qpalrus75ps.apps.googleusercontent.com", // Pass on the Google `Client ID` here
},
},
},
});
web3auth.configureAdapter(openloginAdapter);
setWeb3auth(web3auth);
// Initialize
await web3auth.init();
// Login with Google
await web3auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, {
loginProvider: "google",
});
Set up Google via Auth0
Create a verifier for your Auth0 application by selecting
Auth0
as the Login provider from this modal.Select the
Google
as the Authentication Type based on the dropdown.Enter the
Auth0 Client ID
andAuth0 Domain
from your Auth0 application. See how to create a new Auth0 application here.Add the Google Social Connection to your Auth0 application.
Click on the
Create
button to createGoogle
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",
blockExplorer: "https://goerli.etherscan.io",
ticker: "ETH",
tickerName: "Ethereum",
};
const web3auth = new Web3Auth({
clientId,
chainConfig,
web3AuthNetwork: "sapphire_mainnet",
});
const privateKeyProvider = new EthereumPrivateKeyProvider({
config: { chainConfig },
});
const openloginAdapter = new OpenloginAdapter({
privateKeyProvider,
adapterSettings: {
uxMode: "redirect",
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 Google
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: "google-oauth2", // Use this to skip Auth0 Modal for Google login
},
});