Integrate Gasless App

In this guide, you will learn how to integrate a vanilla HTML/CSS/JS app with the Arcana Auth SDK and enable gasless transactions through the Arcana wallet.

Prerequisites

Log in to the Arcana Developer Dashboard: https://dashboard.arcana.network
Use the Arcana Developer Dashboard to register the app before configuring and 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.
Make sure you configure gasless operations through the dashboard. See how to set up gas tanks and deposit funds to enable gasless transactions in apps that are integrated with the Arcana Auth SDK.

Gasless Transactions

The Arcana Auth SDK has a built-in gasless feature that can be used to enable gasless transactions in the Arcana wallet for apps that integrate with the SDK.

If you are looking at only enabling gasless transactions in third-party browser-based wallets and do not require social login, Gasless Standalone SDK (Coming soon!).

Steps

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

Follow these two steps:

Step 1: Install `auth` package

npmyarnCDN

npm install --save @arcana/auth

yarn add @arcana/auth

<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 after app registration through the Arcana Developer Dashboard earlier. 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", // App client ID
  { 
    position: 'left',         // default: right
    theme: 'light',           // default: dark
    alwaysVisible: false,     // default: true, wallet always visible
    setWindowProvider: true,  // default: false, window.ethereum not set
    connectOptions: {
      compact: true           // default: false, regular plug-and-play login UI
    },
    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 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 initializing the AuthProvider, you can call any of its exported functions. See Arcana Auth SDK Reference Guide for details.

That is all!

The vanilla HTML/CSS/JS app is now successfully integrated with the Arcana Auth SDK.

Zero Gas Fees

All authenticated users have instant access to the Arcana wallet within the app context.

If the developer has correctly set up the gas tanks, whitelisted gasless operations and deposited funds in the gas tanks, then the user will not have to pay any gas fees for whitelisted app operations.

When gas tanks run out of funds, the gas fees are charged to the user's SCW account. If there is insufficient balance in the user's SCW account when gas tanks run out of funds, the transaction will fail.

For more details, see how gasless transactions work and the Gasless Transactions FAQ.

Refer to the Auth Examples for gasless transaction 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 Gasless 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