Google

In this guide, you will learn how to enable Google authentication and onboard dApp users.

Prerequisites

Make sure you can access the Arcana Developer Dashboard: https://dashboard.arcana.network
Install the @arcana/auth package. For details, see Arcana Auth Quick Start Guide.

Note that some steps are performed using Google Console, and others using Arcana Dashboard. After that simply integrate your dApp with the Arcana Auth SDK to trigger Google login and onboard users.

To enable social authentication via Google in the Web3 applications, developers must perform these three steps before integrating with the Arcana Auth SDK.

Step 1: Use Arcana Dashboard

Go to the Arcana Dashboard: https://dashboard.arcana.network

Register your dApp by creating a new dApp entry and specifying a name using the 'Create New App' wizard.

Registering the Application

If you have already registered your dApp using Arcana Dashboard and obtained an Client ID, you may skip this step.

You can use defaults for other settings or change them as per your use case. Refer to the how to configure dApp guide for details.

Go to the Configure->Social Auth configuration section and copy the redirect URI value displayed there. This will be used in the next step to generate Google Client ID.

Do not close the dashboard browser tab. Open another tab and continue with the next step. Then come back to the Dashboard tab and complete Google Client ID settings.

Step 2: Use Google Developer Console

Go to the Google Cloud Console. Create a new OAuth 2.0 credential for your dApp.

In the Google Cloud Console, select the option to set up credentials for a web application.

Specify the redirect URI value to the one that you saved in the previous step from the Auth tab of the Arcana Network Dashboard.

Redirect URI

The redirect URI refers to the endpoint to which the Google OAuth 2.0 server can send authentication responses. These endpoints must adhere to Google’s validation rules.

Complete the steps in Google Cloud Console for creating a new OAuth 2.0 credential. It will generate a unique ClientID.

Save the Client ID assigned by Google. It will be required in the next step.

Step 3: Update Arcana Dashboard

Revisit the Arcana Developer Dashboard portal. Click on your app entry and visit the application dashboard. Click Configure->Social Auth in the LHS navigation bar. Refer to the "Google" settings and paste the Client ID assigned by Google Cloud Console in the previous step.

Save the settings on the dashboard. Arcana Network assigns an Client ID to every registered and configured dApp. If you plan to integrate with Arcana SDKs, you need to save this Client ID.

You are all set with the Google configuration. Integrate the Web3 application with the Arcana Auth SDK and call the user onboarding function when the user chooses to log in.

Tip

The Client ID is displayed on the top right of your dashboard.

You can revisit the Arcana Dashboard later to view and modify configuration settings.

Step 4: Integrate and Use Arcana Auth SDK

Use instructions here to integrate your application with the Arcana Auth SDK. After integration, use the following code to trigger Google login to onboard users:

await auth.loginWithSocial('google')

Check if a user is logged in:

const connected = await auth.isLoggedIn()

Use other Auth SDK functions in your dApp. See Auth SDK Usage Guide for details.

Add code in the application to log out an authenticated user:

await auth.logout()

That is all!

Your dApp is all set for onboarding users via the Google authentication mechanism.

What's Next?

After enabling user sign-in via Google, you can allow authenticated users to access the Arcana wallet for signing blockchain transactions on any EVM-compatible network.