Skip to content

Register & Configure App

In this tutorial, you will learn how to register and configure a Web3 app before integrating it with the Arcana Auth SDK.

Client ID

Each registered app is assigned a unique identifier, Client ID, required to integrate an app with the Arcana Auth SDK.

Prerequisites

  • To use the Arcana Developer Dashboard, developers can sign in using one of the supported social providers or opt for passwordless sign-in.

    • Google
    • GitHub
    • Twitch
    • Discord

Steps

1. Log into Dashboard

Go to https://dashboard.arcana.network and login using one of the available options.

Welcome screen

Aggregate Login

The Arcana Auth protocol aggregates multiple login identities for the user across social providers under a single identifiable Arcana account. This enables developers to log into the Arcana Developer Dashboard through any of the supported social providers and access the same Arcana developer account and app settings.

2. Register App

After logging in, the Manage Apps dashboard screen is displayed.

List Registered Apps

Each app registered for a developer account is represented by a card in the Manage Apps screen of the Arcana Developer Dashboard.

Manage Apps Screen

Initiate App Registration

In the 'Manage Apps' dashboard, click Create New App wizard to register a new app. Wizard: Register App

Registration Settings

To register a new app, the developer needs to provide the following settings:

  • App name
  • Chain Type: EVM, Solana, MultiversX
  • Default Blockchain
  • Wallet UI Mode

App Name

Add a unique name for the app. It can be edited later. After registration, a unique Client ID is associated with each app name. This Client ID is never changed, even if the app name is altered.

All emails related to a registered app billing or user login will mention the latest app name as displayed in the dashboard. Once an app is deleted, the Client ID is no longer valid. Creating a new app with the same name and registering it with Arcana will result in a new Client ID associated with the same name.

Edit App Name

To edit the name of a registered app entry, use the pen icon. Click Enter in the editable text field to save the changes.

Chain Type

Developers need to decide at the time of registration whether the app will use the EVM chains or one of the non-EVM chains supported by the Arcana Auth SDK.

Non-EVM Chains

When registering an app through Arcana Developer Dashboard, the choice of chain type (EVM, MultiversX, or Solana) is final. App developers can't change it later. They can switch the default chain within the same type. For example, a Solana app on Testnet can switch to Solana Mainnet or Solana Dev but not to MultiversX or an EVM chain.

Default Blockchain

The chain marked as default is the one that is selected and displayed in the wallet once the user logs into an app that is integrated with the Arcana Auth.

The default chain can be changed programmatically via the app developer once the user approves switching of the chain. Also, the user can change the default chain anytime by using the wallet UI. Chains can be switched to any one of the ones displayed in the pre-configured list in the wallet UI or in the app chain settings displayed in the dashboard.

Wallet UI Mode

The wallet UI mode setting allows the developers to choose whether they want to enable the built-in Arcana wallet UI in the context of their app or build a custom wallet UI for the app users. Note, this is a one-time setting at the time of registering the app.

By default, Arcana wallet UI is enabled for all registered apps. Selecting Custom Wallet UI option disables the built-in Arcana wallet UI altogether.

Custom Wallet UI

This is a one-time setting. It cannot be changed again later once the app is registered. When selecting the custom wallet UI option, developers must build a custom wallet UI and programmatically wire it to the appropriate JSON-RPC Web3 wallet operations. Also, there are no notifications generated by the Arcana Auth SDK when a custom wallet UI is selected. The developers must add requisite logic and code to get the user approvals for blockchain operations.

Confirm Registration

After providing all the required inputs, click Create to register the app.

Register dApp

After registration, the app dashboard shows Testnet usage stats for the newly registered app. By default, the app is set for Testnet use, and a unique Client ID is assigned for the Testnet profile. This Testnet Client ID restricts the app deployment to theArcana Testnet.

Click Configure in the LHS menu to view and edit Arcana Auth usage configuration settings.

New app dashboard

Mainnet Deployment

To deploy the app on Arcana Mainnet, the developers must create the Mainnet configuration profile, and obtain the Client ID associated with the Mainnet profile. Use this new Client ID to integrate the app with the Arcana Auth. Only then the app can be deployed on the Arcana Mainnet. For details, see Testnet > Mainnet Migration Guide

3. Configure Auth Usage

Click Configure in the LHS navigation of the app configuration screen in the Arcana Developer Dashboard to bring up app configuration settings:

  • Branding
  • Social Auth
  • Chain Management
  • Arcana Wallet
  • Keyspace
  • Gasless

Use the defaults or provide inputs for various settings as per your application use case. These settings control Arcana Auth SDK usage, user onboarding, and blockchain transaction signing experience.

config details

Click on the tabs below to see the various configuration settings in each category.

Use branding settings to manage the look and feel of the embedded Arcana wallet that shows up in an application context. By default, the Arcana wallet displays The default branding logo logo and uses the dark theme.

  • Upload Logo: Upload light and dark theme branding/logo images that are displayed in the Arcana wallet UI.
  • Wallet Theme: You can change the default 'dark' theme.

    Branding

Use the social authentication settings to manage the user onboarding experience. Only the social providers that are configured for an application will be made available in the Arcana Auth SDK as user onboarding options. Developers can enable multiple providers for an app and allow users to choose anyone to onboard the app. For details on how to configure authentication providers, see configuring social providers.

Enable Google, Discord for Onboarding Users

To enable Google and Discord login options for an app, configure these social providers in the Arcana Developer Dashboard. You can leave other social provider entries blank.

Password-less Onboarding

All apps using Arcana Auth SDK automatically have passwordless login. No need to set it up on the dashboard. If an app is registered without an authentication provider, users get only the passwordless login option. They can onboard the app by entering the OTP sent to their email.

  • Redirect URI: Displays the URL auto-generated for each registered app by Arcana. This is required to complete OAuth verification via the selected authentication providers.
  • Social Auth: Select and configure authentication providers for onboarding app users.

    Social OAuth

Keyspace Global Keys: No social provider setup needed

When utilizing global keys in the Mainnet configuration profile, developers do not need to configure the social login section in the Arcana Developer Dashboard or set up provider-specific OAuth settings to obtain a clientID. If you are using a copy of the Testnet configuration profile as the Mainnet configuration profile, remove the Social Auth section settings altogether. Simply use the Arcana assigned Client ID for integrating the app with the Arcana Auth SDK.

Use the chain management section to specify the subset of chains from the list of supported blockchains that are configured for the Arcana wallet out of the box. This specified subset will be displayed in the Arcana wallet UI when a user logs into an app that is integrated with the Arcana Auth SDK. Developers can also specify which chain will be the default and show up in the wallet 'Network' dropdown list on the top.

Chain Management Settings

Add Chains: Click Add Chains to add a new blockchain to the Arcana wallet. Make sure it is one of the supported blockchains for the Arcana Auth product.

Set Default Chain

For details, see how to manage chains.

Use the Arcana wallet section to specify additional, optional security settings.

  • Wallet: Website Domain - Set the website domain used by the server, to secure and restrict Arcana wallet from loading anywhere else other than the specified domain. Arcana uses the frame-ancestor CSP for restricted domains.

    Social OAuth

Use the Keyspace section to select the App-specific (default) or Global Keys feature. Global keys are less secure as compared to app-specific keys but allow app users to have the same wallet address across different applications in the Arcana ecosystem. Learn more about App-specific and global keys and how to use the Arcana Developer DashboardUser Guide to configure keyspace.

Keyspace options

Use the 'Gasless' section to configure gasless transactions for app users.

Developers must explicitly set up gas tanks per blockchain network to enable paymasters to bear gas fees for sponsored transactions for that specific chain. The gas tanks should have sufficient crypto assets deposited to fund the app user's transactions. Also, developers must whitelist one or more app operations for gasless transactions. Only the gas fees for the whitelisted operations will be paid via the gas tank as long as there is sufficient credit in the gas tank.

For all the non-whitelisted app operations, or in case the gas tank assets run out, the transaction gas fees will have to be paid by the individual user via the user's smart contract wallet associated with the app.

Gasless transactions require enabling SCW user accounts or 'gasless accounts' that are different from the typical EOA user accounts.

Developers can pause and resume gas tanks.

Set up Gas Tanks

For details, see how to configure gasless transactions in apps integrating with the Arcana Auth SDK.

Make sure you save the configuration settings before leaving the Arcana Developer Dashboard page in your browser.

You can reconfigure Web3 app settings for Arcana Auth SDK usage anytime later by using the Arcana Developer Dashboard.

That is all! ๐ŸŽ‰

You have successfully registered and configured your application.

What's next?

See how to configure Arcana Auth SDK usage for details.

Once you set up the app, install appropriate Arcana Auth SDK package as per the app type, and integrate the app. The integration method varies with the app type. As part of integration, initialize the SDK and call appropriate functions for onboarding and allowing authenticated users to sign blockchain transactions.

Save Client ID

A unique Client ID is assigned to every registered app. It is displayed on the top right of the dashboard screen. Copy and use it to integrate the app with the Arcana Auth SDK.

App unique identifier

See Also


Last update: October 2, 2023 by DocX, shaloo, shalz