Skip to content

Deploying Web3 App

In this guide you will learn how the Web3 app developers can deploy apps integrated with the Arcana Auth SDK and configure them to use the Arcana Testnet or Mainnet protocols. Developers can choose to configure and deploy one instance of the app (say, under active development) using the Arcana Testnet settings while simultaneously deploying a stable version of their app (say, one validated on Testnet and ready for users) using the Arcana Mainnet settings.

Already using Arcana Auth SDK?

If your app is already integrated with an older version of the Arcana Auth SDK, v1.0.3 or earlier, use the appropriate Migration Guide to upgrade to the latest Arcana Auth SDK v1.0.4.

Prerequisites

  • Make sure the app is registered and configured via the Arcana Developer Dashboard.

  • After successful registration, a unique Client ID is assigned to the app. It will be required later for integrating the app with the Arcana Auth SDK. Also, a default 'Testnet' configuration profile is associated with every newly registered app. To learn more about various configuration settings, see how to use the Arcana Developer Dashboard to configure app settings.

  • Integrating an app with the Arcana Auth SDK may vary slightly depending on the app type, whether it is a vanilla HTML/CSS/JS app, a React app, or a React app using wallet connectors such as Wagmi, RainbowKit or Web3-React wallet connector frameworks. Follow the instructions in the respective integration guides and choose carefully depending on the app type.

    Caution

    Integrating an app may require installing the Arcana Auth SDK via say only the Arcana auth package, both auth and app type package such as auth-react, auth-wagmi or auth-web3-react. After installing, the developer must instantiate the appropriate AuthProvider, the React component ProvideAuth, the Wagmi/Web3-React ArcanaConnector, as the case may be.

Deploying App (Testnet Configuration)

Before deploying an app that uses the Arcana Testnet configurations, make sure that during the app integration with the Arcana Auth SDK a new AuthProvider is created using the correct Client ID assigned to the 'Testnet' configuration profile.

import {AuthProvider, CHAIN} from "@arcana/auth";

const provider = new AuthProvider(
  "87f34a9c7879cd4b726ba36a99e164837d70143a", {  // testnet Client ID
  network: 'testnet',  //change it to 'mainnet' to use Arcana Mainnet
  chainConfig: {
    rpcUrl: 'https://rpc-mumbai.maticcvigil.com',  // RPC URL of the selected chain in the wallet network dropdown UI
    chainId: CHAIN.POLYGON_MUMBAI_TESTNET,      // selected chain in the wallet network dropdown UI
  },
  alwaysVisible: true,
  setWindowProvider: true,
  debug: true,
  position: 'right',
  theme: 'dark',
});

network parameter

As of release v1.0.4 of the Arcana Auth SDK, it is not required to set the network parameter anymore. Depending on which Client ID is specified (Testnet ID, Mainnet ID), the appropriate network is selected automatically.

Initialize the newly created AuthProvider before adding code in the integrated app to onboard users.

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

Only authenticated users are allowed to sign blockchain transactions and perform Web3 wallet operations using the Arcana wallet. To onboard app users, developers can use plug-and-play auth via connect method or build custom login UI by plugging in Arcana Auth SDK loginWithSocial and loginWithLink methods. For details, see how to onboard users. You can also plug in additional business logic and utilize the Arcana wallet programmatically for allowing authenticated users to sign blockchain transactions.

Run your App

After registering the app, configuring it for the 'Testnet' configuration profile, integrating the app with the Arcana Auth SDK by using the 'Testnet' Client ID, and finally adding code to onboard users, other business logic, your app is ready to be deployed. Bring up the app and allow users to log in and use Arcana Testnet.

An authenticated app user will see the following wallet UI when using the Arcana Testnet.

Testnet Wallet

Monitor Testnet Usage

Visit the app dashboard screen to view the 'Testnet' configuration profile and monitor Arcana Testnet usage. The figure below shows one new user for the test app.

Testnet App Identifier

Deploying App (Mainnet Configuration)

Before deploying the app on the Arcana Mainnet, make sure that there exists a 'Mainnet' configuration profile for the app. By default, when you register an app, only the 'Testnet' configuration profile is created. See how to create the 'Mainnet' configuration profile section in the Arcana Developer Dashboard User Guide.

Check Mainnet Configuration Profile

You can check if a 'Mainnet' configuration profile is already created for your app by visiting the Manage Apps screen on the Arcana Developer Dashboard. Refer to the app card. Each card displays Testnet and Mainnet buttons. If the Mainnet button is disabled it means you have not created a 'Mainnet' profile for your app yet.

Once you have created the 'Mainnet' configuration profile for your app, please note that a new Client ID is associated with it that must be used while integrating the app with the Arcana Auth SDK. While creating a new AuthProvider, do remember to update your integration code with the new Client ID that is assigned to the 'Mainnet' configuration profile.

import {AuthProvider, CHAIN} from "@arcana/auth";

const provider = new AuthProvider(
  "d7c88d9b033d100e4200d21a5c4897b896e60063", {  //mainnet Client ID
  network: 'mainnet',  // change it to 'testnet' to use Arcana Testnet
  chainConfig: {
    rpcUrl: 'https://polygon-rpc.com/',  // RPC URL of the selected chain in the wallet network dropdown UI
    chainId: CHAIN.POLYGON_MAINNET,      // selected chain in the wallet network dropdown UI
  },
  alwaysVisible: true,
  setWindowProvider: true,
  debug: true,
  position: 'right',
  theme: 'dark',
});

network parameter

As of release v1.0.4 of the Arcana Auth SDK, it is not required to set the network parameter anymore. Depending on which Client ID is specified (Testnet ID, Mainnet ID), the appropriate network is selected automatically.

Initialize the newly created AuthProvider before adding code in the integrated app to onboard users.

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

Only authenticated users are allowed to sign blockchain transactions and perform Web3 wallet operations using the Arcana wallet. To onboard app users, developers can use plug-and-play auth via connect method or build custom login UI by plugging in Arcana Auth SDK loginWithSocial and loginWithLink methods. For details, see how to onboard users. You can also plug in additional business logic and utilize the Arcana wallet programmatically for allowing authenticated users to sign blockchain transactions.

Run your App

After registering the app, configuring it for the 'Mainnet' configuration profile, integrating the app with the Arcana Auth SDK by using the 'Mainnet' Client ID, and finally adding code to onboard users, other business logic, your app is ready to be deployed. Bring up the app and allow users to log in and use Arcana Mainnet.

An authenticated app user will see the following wallet UI when using the Arcana Mainnet.

Testnet Wallet

Monitor Mainnet Usage

Visit the app dashboard screen to view the 'Mainnet' configuration profile and monitor Arcana Mainnet usage. Note that Arcana Mainnet usage is tracked in terms of MAU and billed. The figure below shows one new user for the test app deployed on Mainnet.

The figure below shows one new user for the test app deployed on Mainnet.

Mainnet App Usage

That is all!

See Also


Last update: May 26, 2023 by shaloo, shalz