Integrate Vanilla HTML/CSS/JS App

In this guide, you will learn how to integrate a vanilla HTML/CSS/JS app with the Arcana Auth SDK.

Prerequisites

Developers need to first log into the Arcana Developer Dashboard: https://dashboard.arcana.network
Use the Arcana Developer Dashboard to register and configure app settings before integrating with the Arcana Auth SDK.
Click on the Social Auth tab in the Arcana Developer Dashboard. Configure and select one or more supported authentication providers for onboarding the app users.

Configure Authentication Providers

You may be required to configure additional provider details for different authentication providers. In the case of Google, the developer must use Google Developer Console to set up the app and generate a Google assigned client ID for Google OAuth. This Google ClientID will be configured in the Arcana Developer Dashboard Social Auth settings before integrating the app.

For details, see how to configure authentication providers.
Save the Client ID assigned to the app displayed in the Arcana Developer Dashboard. It is required while integrating the app with the Arcana Auth SDK and creating the AuthProvider.

Steps

Integrating a vanilla HTML/CSS/JS app with the Arcana Auth SDK is simple!

Follow these two steps:

Step 1: Install `auth` package

npm

npm install --save @arcana/auth

yarn

yarn add @arcana/auth

CDN

<script src="https://cdn.jsdelivr.net/npm/@arcana/auth"></script>
<script src="https://unpkg.com/@arcana/auth"></script>

Step 2: Initialize the Arcana Auth SDK

Import auth and create a 'new' AuthProvider. During instantiation of the AuthProvider, specify the unique Client ID value assigned to the app after registering and configuring it using the Arcana Developer Dashboard. Also, specify the Arcana wallet visibility mode via the alwaysVisible parameter to manage the wallet user experience.

const { AuthProvider } = window.arcana.auth // From CDN
//or
import { AuthProvider } from '@arcana/auth' //From npm

const auth = new AuthProvider("xar_test_445007f942xxxxxxxxxxxxxxxxxx484cAfd2", { //Must provide [xar_test_xxx] or [xar_live_xxx] clientId, the unique App Identifier via Arcana Dashboard
  position: 'left', //defaults to right
  theme: 'light', //defaults to dark
  alwaysVisible: false, //defaults to true, wallet always visible
  setWindowProvider: true, //defaults to false, window.ethereum not set
  chainConfig: {
    chainId: '137', //defaults to Ethereum
    rpcUrl: 'https://polygon-rpc.com', //defaults to 'https://rpc.ankr.com/eth'
  },
})

Initialize the newly instantiated AuthProvider.

try {
  await auth.init()
} catch (e) {
  // Handle exception case
}

Initialize First!

The app must use wait until the init call is complete before invoking any of the other Arcana Auth SDK functions such as onboarding users by triggering user login, obtaining the standard Ethereum provider, adding/switching networks in the wallet, etc.

After successful initialization, use AuthProvider functions. For e.g., an app with custom login UI can call loginWithSocial function when a user clicks the custom login button.

const arcanaProvider = await auth.loginWithSocial('google')

When using the ethers or web3js libraries in a Web3 app, you can access the standard EIP-1193 Ethereum provider:

// ethers
const provider = new ethers.providers.Web3Provider(arcanaProvider)

// web3js
const provider = new Web3(arcanaProvider)

That is all!

The vanilla HTML/CSS/JS app is now successfully integrated with the Arcana Auth SDK. Refer to the Auth Examples for working integration examples.

What's Next?

After integrating an app with the Arcana Auth SDK, developers can add code to onboard users and enable Web3 wallet operations for authenticated users to sign blockchain transactions.

Integrate Vanilla HTML/CSS/JS App

Prerequisites

Steps

Step 1: Install auth package

Step 2: Initialize the Arcana Auth SDK

What's Next?

See also

Step 1: Install `auth` package