HTML/CSS/JS App Code Sample

You need to first configure user onboarding options and other settings using the https://dashboard.arcana.network. After that, install Arcana Auth SDK and integrate your HTML/CSS/JS app.

Here is a very basic vanilla HTML/CSS/JS app that uses Parcel. It integrates with Arcana Auth SDK and uses the plug-and-play feature to allow user onboarding and signing of blockchain transactions.

Check out the code sandbox for the sample vanilla HTML/CSS/JS app.

Registration & Configuration

The following dashboard screen shows that a test deployment of an app is configured to onboard users via Google, Twitch, and passwordless login. Follow the instructions in the how to configure your app guide for details.

After configuring your app, copy and use the Client ID assigned to the app and displayed in the dashboard on the top RHS.

Integrate Auth SDK

In the sample code, refer to the src/index.js file. It shows how AuthProvider is instantiated. Before you run this test app, you need to register your app and obtain the Arcana Client ID assigned to your app via the dashboard. This Client ID is used during the instantiation of the AuthProvider.

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: CHAIN.POLYGON_MAINNET, //defaults to CHAIN.ETHEREUM_MAINNET
    rpcUrl: "https://polygon-rpc.com" //defaults to 'https://rpc.ankr.com/eth'
  }
});
...

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

Use Auth Plug-&-Play User Authentication

After integrating the Auth SDK and instantiating the AuthProvider, plug in the user authentication and other Auth SDK functions in your HTML/CSS/JS app. Use the Arcana Auth SDK 'connect' method to bring up the user authentication plug-and-play UI. It will show up only those social authentication providers that the developer has configured earlier using the Arcana Developer dashboard.

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 show up.

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

Developers can plug in other Auth SDK features programmatically within the HTML/CSS/JS app as required. See Arcana Wallet Developer's Guide and Dashboard User Guide for more details.