Integrate Solana App

In this guide, you will learn how to integrate a vanilla HTML/CSS/JS app with the Arcana Auth SDK and perform transactions through the Arcana wallet on Solana blockchain.

Prerequisites

• Log in to the Arcana Developer Dashboard: https://dashboard.arcana.network

• Use the Arcana Developer Dashboard to register the app before configuring the settings and integrating with the Arcana Auth SDK.

• Click on the Social Auth tab in the Arcana Developer Dashboard. Configure and select one or more supported authentication providers for onboarding the app users.

  Configure Authentication Providers

  You may be required to configure additional provider details for different authentication providers. In the case of Google, the developer must use Google Developer Console to set up the app and generate a Google assigned client ID for Google OAuth. This Google ClientID will be configured in the Arcana Developer Dashboard Social Auth settings before integrating the app.

  For details, see how to configure authentication providers.

• Save the Client ID assigned to the app displayed in the Arcana Developer Dashboard. It is required while integrating the app with the Arcana Auth SDK and creating the AuthProvider.

• Make sure you configure the required Solana chains through the dashboard. See how to set up Solana blockchain transactions through the Arcana wallet in apps that are integrated with the Arcana Auth SDK.

Non-EVM Chains

The decision to select Solana (non-EVM chain) is made at the time of registering the app by creating an app entry through the dashboard. Once selected, it cannot be reconfigured or switched to any other non-EVM chain. However, the default chain can be changed later to say Solana Testnet or Solana Dev.

Steps

Integrating a vanilla HTML/CSS/JS app with the Arcana Auth SDK to enable Solana blockchain transactions through the Arcana wallet is simple!

Follow these two steps:

Step 1: Install auth package

npmyarnCDN

npm install --save @arcana/auth

yarn add @arcana/auth

<script src="https://cdn.jsdelivr.net/npm/@arcana/auth"></script>
<script src="https://unpkg.com/@arcana/auth"></script>

Step 2: Initialize the Arcana Auth SDK

Import auth and create a 'new' AuthProvider. During instantiation of the AuthProvider, specify the unique Client ID value assigned to the app after registering it through the Arcana Developer Dashboard. Also, specify the Arcana wallet visibility mode via the alwaysVisible parameter to manage the wallet user experience.

const { AuthProvider } = window.arcana.auth // From CDN
//or
import { AuthProvider } from '@arcana/auth' //From npm

const auth = new AuthProvider(
  "xar_live_445007f942xxxxxxxxxxxxxxxxxx484cAfd2", // App client ID
  { 
    position: 'left',         // default: right
    theme: 'light',           // default: dark
    alwaysVisible: false,     // default: true, wallet always visible
    setWindowProvider: true,  // default: false, window.ethereum not set
    connectOptions: {
      compact: true           // default: false, regular plug-and-play login UI
    },
    chainConfig: { // Note: These values override dashboard settings during app registration
      chainId: '1',                    // defaults to Solana Mainnet, use '2' for Testnet, '3' Devnet
      rpcUrl: 'https://api.mainnet-beta.solana.com', // defaults to 'https://api.mainnet-beta.solana.com'
      // Use 'https://api.testnet.solana.com' and https://api.devnet.solana.com' for Testnet, Devnet
    },
})

Initialize the newly instantiated AuthProvider.

try {
  await auth.init()
} catch (e) {
  // Handle exception case
}

Initialize First!

The app must wait until the init call is complete before invoking any of the other Arcana Auth SDK functions such as onboarding users by triggering user login, obtaining the standard Ethereum provider, adding/switching networks in the wallet, etc.

After initializing the AuthProvider, you can call any of its exported functions. See Arcana Auth SDK Reference Guide for details.

try {
  await auth.init()
} catch (e) {
  // Handle exception case
}

Initialize Solana Providers

Solana apps can use the auth.provider to make standard JSON RPC calls in the context of an authenticated user.

const { AuthProvider } = window.arcana.auth // From CDN
//or
import { AuthProvider } from '@arcana/auth' //From npm

const auth = new AuthProvider(
  "xar_live_445007f942xxxxxxxxxxxxxxxxxx484cAfd2", // App client ID
  { 
    position: 'left',         // default: right
    theme: 'light',           // default: dark
    alwaysVisible: false,     // default: true, wallet always visible
    setWindowProvider: true,  // default: false, window.ethereum not set
    connectOptions: {
      compact: true           // default: false, regular plug-and-play login UI
    },
    chainConfig: { // Note: These values override dashboard settings during app registration
      chainId: '1',                    // defaults to Solana Mainnet, use '2' for Testnet, '3' Devnet
      rpcUrl: 'https://api.mainnet-beta.solana.com', // defaults to 'https://api.mainnet-beta.solana.com'
      // Use 'https://api.testnet.solana.com' and https://api.devnet.solana.com' for Testnet, Devnet
    },
})

try {
  await auth.init()
} catch (e) {
  // Handle exception case
}

const provider = auth.provider;

Use the Solana provider for issuing Solana Web3 wallet operations in the context of an authenticated user.

const { AuthProvider } = window.arcana.auth // From CDN
//or
import { AuthProvider } from '@arcana/auth' //From npm

const auth = new AuthProvider(
  "xar_test_445007f942xxxxxxxxxxxxxxxxxx484cAfd2", // App client ID
  { 
    position: 'left',         // default: right
    theme: 'light',           // default: dark
    alwaysVisible: false,     // default: true, wallet always visible
    setWindowProvider: true,  // default: false, window.ethereum not set
    connectOptions: {
      compact: true           // default: false, regular plug-and-play login UI
    },
    chainConfig: { // Note: These values override dashboard settings during app registration
      chainId: '1',                    // defaults to Solana Mainnet, use '2' for Testnet, '3' Devnet
      rpcUrl: 'https://api.mainnet-beta.solana.com', // defaults to 'https://api.mainnet-beta.solana.com'
      // Use 'https://api.testnet.solana.com' and https://api.devnet.solana.com' for Testnet, Devnet
    },
})

try {
  await auth.init()
} catch (e) {
  // Handle exception case
}

const solanaP = auth.solana;

That is all!

The vanilla HTML/CSS/JS app is now successfully integrated with the Arcana Auth SDK for enabling Solana blockchain transactions through the Arcana wallet once the user onboards the app.

Refer to the Auth Examples for Solana integration examples.

What's Next?

After integrating an app with the Arcana Auth SDK, developers can add code to onboard users and enable Web3 wallet operations for authenticated users to sign transactions on the Solana blockchain.

See also

• Access Ethereum providers web3.js, ethers.js
• Onboard users
• Arcana Auth SDK Errors
• Arcana Auth SDK Usage Guide
• Solana FAQ
• Arcana Auth SDK Reference Guide

---

Last update: April 11, 2024 by shaloo