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, bothauth
and app type package such asauth-react
,auth-wagmi
orauth-web3-react
. After installing, the developer must instantiate the appropriateAuthProvider
, the React componentProvideAuth
, the Wagmi/Web3-ReactArcanaConnector
, 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.
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.
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.
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.
That is all!