HTML/CSS/JS App Code Sample

First of all, before adding any code to the Web3 app, register the app and configure user onboarding options and other settings using the Arcana Developer Dashboard: https://dashboard.arcana.network.

Next, install the auth package, integrate the HTML/CSS/JS app, and then add code in the app to onboard users. Only authenticated users can access the Arcana wallet and sign blockchain transactions.

Check out the code sandbox for the sample vanilla HTML/CSS/JS app. This is a very basic vanilla HTML/CSS/JS app that uses Parcel. It integrates with the Arcana Auth SDK and uses the plug-and-play login UI for onboarding users.

Registration & Configuration

The following Arcana Developer Dashboard screen shows the app 'Testnet' configuration set up to onboard users via multiple authentication providers: Google, Twitch, and passwordless login. For details, see how to configure authentication providers.

After configuring the app, copy the Client ID assigned to the app and displayed in the dashboard on the top right of the screen. It will be required during app integration with the Arcana Auth SDK.

Integrate App

In the sample code, refer to the src/index.js file. It shows how AuthProvider is instantiated. Before you deploy and run this test app, make sure it is registered and has a Client ID assigned to it. Use this Client ID when you create the AuthProvider.

src/index.js

let provider;
const clientId = "xar_test_11111111718953094BbeeeeeB9484cAfd2"; //replace with the app clientID via the Dashboard
const auth = new AuthProvider(`${clientId}`, {
  network: "testnet", //defaults to 'testnet'
  position: "right", //defaults to right
  theme: "light", //defaults to dark
  alwaysVisible: true, //defaults to true, wallet always visible after user logs in
  chainConfig: {
    chainId: '137', //Polygon, defaults to 'Ethereum'
    rpcUrl: "https://rpc.ankr.com/polygon_mumbai" //defaults to 'https://rpc.ankr.com/eth'
  }
});
...

Next, initialize the AuthProvider:

src/index.js

try {
  await auth.init();
  console.log("Init auth complete!");
  console.log({ provider });
} catch (e) {
  console.log(e);
}

Onboard Users

After integrating the app with the Arcana Auth SDK, instantiating the AuthProvider, add code to onboard users via the plug-and-play login UI offered by the Arcana Auth SDK in your HTML/CSS/JS app. Use the connect function to bring up the built-in, plug-and-play login UI. It will display only those authentication providers that the developer has configured earlier using the Arcana Developer Dashboard.

src/indexp.js

try {
  await auth.connect();
} catch (e) {
  console.log(e);
}

Once a user logs in to the HTML/CSS/JS app and authenticates, the Arcana wallet will be accessible and can be used for signing blockchain transactions.

An authenticated app user can access the Arcana wallet UI to perform various Web3 blockchain operations such as adding tokens, checking the wallet balance, switching networks, etc. See Arcana wallet User Guide for more details.

Use Web3 Wallet Operations

Developers can add code to programmatically call the Web3 wallet operations for authenticated users in the HTML/CSS/JS app, as required. See Arcana wallet Developer's Guide and the Arcana Developer Dashboard User Guide for more details.

Use the latest Arcana Auth SDK

Check the package.json file in the code sandbox sources and ensure that you are using the latest auth package.

The current Arcana Auth SDK release is: v1.0.10

---

Last update: April 11, 2024 by shaloo, shaloo