Skip to content

Arcana Developer Dashboard Users Guide

The Arcana Developer Dashboard allows Web3 app developers to configure user onboarding settings and tailor the blockchain signing experience for an app that integrates with the Arcana Auth SDK.

Developers must first register the app by using the Arcana Developer Dashboard and obtain a unique Client ID that is required to integrate the app with the Arcana Auth SDK.

By default, each newly registered app is associated with a 'Testnet' configuration profile. When the app is deployed, it is set to use the Arcana Testnet.

This guide will walk you through the various configuration options available on the Arcana Developer Dashboard to tailor the Arcana Auth SDK usage. For instructions on how to install Arcana Auth SDK and integrate your application, refer to the Arcana Auth Quick Start Guide.

Prerequisites

  • To use the Arcana Developer Dashboard, developers must have an account with one of the supported social providers. Or they can use the passwordless sign-in option.

    • Google
    • Discord
    • Twitter
    • GitHub

Arcana Developer Dashboard Features

Login

Go to https://dashboard.arcana.network and select a login option on the welcome screen.

Welcome screen

Tip

The Arcana Auth protocol aggregates multiple login identities 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.

Register Application

All the apps registered against the developer's account show up as cards in the Manage Apps screen of the Arcana Developer Dashboard.

New app card

Click on the Create New App wizard, the first card on the Manage Apps screen, to register a new app. create new app wizard icon

Click the wizard and specify the name of the app to be registered in the App Name field. When you click Create, the app is registered for using the Arcana Testnet by default.

Register dApp

Tip

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

After successfully registering an app, the app dashboard screen is displayed automatically. It shows the Arcana Testnet usage statistics for the app. By default, every newly registered app is associated with the 'Testnet' configuration profile. Use Configure in the LHS menu to view and edit configuration settings.

New app dashboard

Configure Application

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 (Available only after the 'Mainnet' profile is created)

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.

By default, passwordless login is always enabled in the Arcana Auth SDK.

  • 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

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

Mainnet Keyspace options

Available only for 'Mainnet' Configuration Profile

The 'Keyspace' tab is visible only if a developer chooses to create a 'Mainnet' configuration profile for the app.

It is possible to use App-Specific Keys (default) at the start and change the keyspace type later to Global Keys. However, transitioning between the two will cause the user's wallet address to change.

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

Configuring the Arcana wallet

Arcana Auth SDK allows developers to manage the app user experience for signing blockchain transactions with Arcana wallet.

The user experience with the Arcana wallet is configured programmatically through the alwaysVisible option. Install the Arcana Auth SDK and as part of the integration, add code in the app to create a new AuthProvider instance. Specify the appropriate wallet visibility mode via the alwaysVisible option. See the Arcana wallet configuration guide for details.

Client ID

The Client ID assigned to your application can be found on the top right of the Arcana Developer Dashboard screen. App Client Identifier

Manage Configurations

Every application that is registered using the Arcana Developer Dashboard is represented by a single card displayed in the 'Manage Apps' screen, next to the 'Create New App' wizard. Click on the application card to view the application dashboard screen. By default, the application dashboard screen shows application usage details for the 'Testnet' configuration profile and some links to the Arcana Auth documentation.

To view configuration details for an application, use the LHS navigation menu and click Configure to view/edit the application configuration settings as described in an earlier section of this guide.

Each application can only be associated with two configuration profiles, 'Testnet' and 'Mainnet'. Both these configurations are maintained separately and each is associated with a unique Client ID.

New App config card

Testnet

By default, all newly registered applications are enabled for using the Arcana 'Testnet'. Developers can view or edit the default configuration settings by clicking 'Testnet' on the application card displayed in the 'Manage Apps' dashboard screen. This will bring up the application dashboard screen with various navigation options in the LHS pane.

After validation on the 'Testnet', the application can be configured to use the Arcana 'Mainnet'. To do this, developers must create a corresponding 'Mainnet' configuration profile.

Mainnet

To use the Arcana Mainnet, the developers must first create a 'Mainnet' configuration profile using the Arcana Developer Dashboard.

A newly registered application does not have any 'Mainnet' profile associated with it, it has to be explicitly created by the developer. The application card displayed in the 'Manage Apps' screen will show the 'Mainnet' configuration as disabled for all newly registered apps. To create a 'Mainnet' configuration profile, the developer must use the application dashboard screen displaying the Testnet profile, use the LHS navigation pane and select the Social Auth settings.

In the social authentication settings screen, refer to the dropdown on the top right next to 'Testnet'. Use this dropdown to select and switch to the 'Mainnet' configuration.

Testnet Mainnet Selection

When 'Mainnet' is selected from the dropdown, a new 'Mainnet' profile creation wizard gets activated and displays a pop-up screen asking the developer to choose one of the options to create the 'Mainnet' configuration. You can either copy the exact 'Testnet' configuration or create a new blank configuration for 'Mainnet' settings.

Switch to Mainnet Profile

After the selection is made and the developer confirms, the 'Mainnet' profile is created and automatically registered with Arcana.

Mainnet Client ID

The newly created 'Mainnet' configuration profile is associated with a brand new unique Client ID. Developers must specify this new Client ID while integrating the application with the Arcana Auth SDK and deploying it on Arcana 'Mainnet'.

Copying Testnet Profile

If the developer chooses to create the 'Mainnet' profile by copying the 'Testnet' profile, there is an additional setup required to enable the configured social providers. Once the 'Mainnet' profile is created, visit the application dashboard screen and copy the Redirect URI' displayed for the 'Mainnet' profile. You need to update thisRedirect URI` value using the respective social provider's developer console, similar to the one added that you added earlier in the case of the 'Testnet' profile.

Example: Copying Google Profile

If Google is enabled in your app's 'Testnet' profile, then during the configuration of the social provider with the Google Developer console, the Testnet redirect URI was added. Copy the 'Mainnet' profile redirect URI value from the Arcana Developer Dashboard and update them in the Google Console OAuth settings.

Make sure that you add the 'Mainnet' redirect URI value for the other social providers that are enabled in the 'Testnet' profile. This is required for enabling your app to use the Arcana Mainnet.

The figure below shows how the 'redirect URI' is updated in a scenario where Google and Twitch were configured for the 'Testnet' configuration profile and that profile was copied to create a 'Mainnet' profile.

Update redirect URI

'Mainnet' configuration requires an additional setting which is not available for the 'Testnet' configuration profile. This additional setting, Keyspace, is used to allow Web3 application users to share the same wallet address across multiple applications that are deployed on the Arcana Mainnet.

Configure Mainnet Keyspace

To deploy an application on the Arcana Mainnet, developers need to create a 'Mainnet' profile and configure the keyspace option. Setting up keyspace is mandatory irrespective of whether the developer chooses to copy the 'Testnet' profile as the 'Mainnet' configuration or creates a new one.

There are two keyspace options: App-specific and Global Keys.

You can either use the default, highly secure App-specific keyspace option or Global keyspace depending upon the desired level of security and user experience required for the application.

Mainnet Keyspace options

Use global keyspace if you want to enable the kind of Web3 user experience whereby the same wallet address is assigned to the user across different application logins in the Arcana ecosystem. It is less secure than the default App-specific keyspace option whereby a user will see different wallet addresses across the different applications.

Select Global Keyspace and click Verify. This will bring up a verification form. Fill out the verification form, and click Submit.

Global Keyspace Verify

You can check the status of Global Keyspace verification by using the Keyspace screen. After submitting the form, you will see the status as In Review.

Mainnet Global keyspace in review

The status will change to Approved once verification is complete. You can integrate your application with the Arcana Auth SDK but do not deploy it until the verification is complete. Otherwise, users that log in before verification is complete may see different wallet addresses after the process is complete.

Mainnet Global keyspace approved

Now your application is configured to use the Arcana Mainnet. You can further edit configuration settings for Mainnet by using the LHS navigation pane and selecting Configure.

Mainnet Profile entry

Switch Profiles

There are multiple ways to switch an application from using Testnet to Mainnet.

  • To switch from Testnet to the Mainnet profile, use the application dashboard screen, and select Configuration >> Social Auth in the LHS navigation pane. Refer to the dropdown next to 'Testnet' on the top RHS of the screen and choose 'Mainnet'. If there is a preexisting 'Mainnet profile, the app is automatically switched to it. You can view the social authentication settings and the assigned Client ID for the 'Mainnet' profile. If there is no 'Mainnet' profile associated with the app, then on selecting 'Mainnet' from the dropdown, the app wizard gets activated and assists in creating a 'Mainnet' configuration profile for the application. Once the profile is created, a new Client ID is automatically assigned and the configuration switches to 'Mainnet'.

    Select Testnet or Mainnet

  • If a 'Mainnet' configuration profile is already created for an application, you can also switch between Testnet/Mainnet configuration profiles by using the 'Manage Apps' dashboard screen. Simply select the application card and click on 'Testnet' or 'Mainnet'. This will bring up the application dashboard screen for the selected configuration profile.

    Switch to Testnet

Caution

Depending upon whether the 'Testnet' Client ID value or the 'Mainnet' Client ID value is used to integrate an application with the Arcana Auth SDK, deployment of the app happens on the respective Arcana Network. "Testnet" usage is not billed but if an application chooses 'Mainnet' while integrating with the Arcana Auth SDK, it will be billed in the forthcoming releases.

Switch Applications

Developers can switch from one application configuration profile screen to another application by using the 'Manage Apps' screen and clicking on the requisite application card.

Alternatively, you can use the LHS navigation pane in the configuration screen and click on the dropdown next to the application name in the top left. The dropdown displays a list of all the applications registered by the developer and a link to navigate to the Manage Apps dashboard screen. Select a different application from the drop-down list and you will be switched to a different application dashboard screen.

Switch Application

Monitor Usage

Developers can monitor their registered application usage statistics via the Arcana Developer Dashboard. The Manage Apps screen displays the account-level usage metrics. Application-specific usage details are available on the application dashboard screen.

Account Usage Metrics

The Manage Apps screen displays Monthly Active Users (MAU) for the developer account. This is an aggregate score across all the applications that are registered for a developer account and configured to use the Arcana Mainnet. Any application using the 'Testnet' are not billed and not included in this overall account usage statistic.

App usage metrics

Caution

The billing data is only applicable for Mainnet usage and will be made available in the forthcoming releases.

Usage per Application

Arcana Network maintains per-application usage statistics separately for both the 'Testnet' and 'Mainnet' configuration profiles.

In the Manage Apps dashboard screen, all registered applications are listed as cards. Each application card displays the 'Total Users' statistic. This refers to the total monthly active application users that are utilizing the Arcana Testnet/Mainnet. To view per application usage details, you need to select 'Testnet' or 'Mainnet' profile and look at the application dashboard screen that displays the following usage statistics:

  • Number of logged-in users

Use the 'Daily' and 'Monthly' tabs to see the respective usage statistics.

Application Usage Stats Testnet

You can use the dropdown in the top right of the application dashboard screen to select Testnet/Mainnet usage details.

Application Usage Stats Mainnet

Billing

Arcana tracks the Mainnet app usage for every developer account in terms of MAU. Invoices are generated at the end of each month and the chargeable amount is auto-deducted using the payment method configured by the developer in their profile section. See billing and pricing for details.

To begin using the Arcana Auth SDK, the app developers don't need to update the profile details including the billing information. Once the apps consume the free tier of Arcana Mainnet usage, the developer must provide the billing details via the profile section of the Arcana Developer Dashboard. Otherwise, the registered apps will be suspended and users will not be allowed to log in to any app that is registered using the developer account.

Set up Payment Method

Click on the user icon on the top right of the Arcana Developer Dashboard screen. Select Profile in the dropdown.

Application Usage Stats Mainnet

You will see the developer's Arcana account profile details. The developer account name and public identifier (email) are automatically retrieved based on the account used to log into the Arcana Developer Dashboard.

Developers are required to update the following profile details and then click Save.

  • Organization
  • Billing Address Details
  • Payment Method

Application Usage Stats Mainnet Billing Profile

Payment Method

By default, the 'Payment Method' section is disabled.

Enter the billing address details and click Save. The payment method section is enabled for input only after the billing address details are provided.

View Invoices

Click on the user icon on the top right of the Arcana Developer Dashboard screen. Select Invoices in the dropdown.

Application Usage Stats Mainnet

On the Invoices page, you will see the details of the current pending dues followed by the billing history of previous invoices that can be downloaded for reference.

Application Usage Stats Mainnet

View Billing Notifications

Click the bell icon to view all notifications for the developer account. Check the billing notifications list for details.

Developer account notifications

Delete Application

To de-register an application the developers must delete the entry using the Arcana Developer Dashboard. Go to the 'Manage Apps' dashboard page which lists all the registered applications.

Manage Apps Screen

Select the application you wish to de-register and choose Delete.

Delete App

FAQ: Arcana Developer Dashboard

New users can get help with Arcana Auth SDK configuration and Arcana Developer Dashboard usage by consulting the Arcana Developer Dashboard FAQ or contacting 📨 support@arcana.network.


Last update: May 25, 2023 by shaloo, shalz