Google Login with Web3Auth

Google Sign-In is a widely adopted authentication method that allows users to log in using their existing Google accounts. Web3Auth supports Google as a social login provider, enabling seamless onboarding and authentication experiences for users with Google credentials.

To integrate Google Sign-In with Web3Auth, developers must first configure a Google OAuth 2.0 Client ID in the Google Cloud Console.

Create a Google app

1. Follow Google’s instructions to set up an OAuth 2.0 app.

2. Paste the following URI as a redirect URI into the "Authorized redirect URIs" field.

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

   

3. Obtain the OAuth Client ID from the App on the Google Developer dashboard

Create a Google Connection

Enable on Dashboard

To use this feature, please enable Google from the Social Connections section in the Web3Auth Dashboard.

By default, Web3Auth uses its own pre-configured credentials for Google login.

Follow these steps to create a Google connection:

1. Visit the Web3Auth Dashboard.
2. Go to the Social Connections section.
3. Click on the Settings icon near the Google connection.
4. Enter the Auth Connection ID.
5. Enter the Google Client ID.
6. Finally, click on the Add Connection button.

Usage

Since, the Google Connection details are available from Dashboard, developers don't need to pass any additional parameters to the Web3AuthProvider.

Follow our Quickstart Guide to setup the basic flow.

Implicit Login

web3authContext.tsx

await connectTo(WALLET_CONNECTORS.AUTH, {
  authConnection: AUTH_CONNECTION.GOOGLE,
  authConnectionId: "w3a-google-demo",
});

JWT Login with Google SDK

App.tsx

const loginWithGoogle = async (response: CredentialResponse) => {
  const idToken = response.credential;

  await connectTo(WALLET_CONNECTORS.AUTH, {
    authConnectionId: "w3a-google-demo",
    authConnection: AUTH_CONNECTION.GOOGLE,
    idToken,
    extraLoginOptions: {
      isUserIdCaseSensitive: false,
    },
  });
};

...

<GoogleLogin
  onSuccess={loginWithGoogle}
  onError={() => {
    console.log("Login Failed");
  }}
  useOneTap
/>