Quick Start: Solana Apps

'Solana' Web3 apps can easily onboard users via social login by integrating with the Arcana Auth SDK!

1. Register & Configure

Register the app as instructed in the Solana Configuration Guide and obtain a unique Client ID. Configure social login provider to onboard users and customize the user experience for blockchain signing via the wallet settings. Solana chains are pre-configured and instantly accessible to authenticated users via the Arcana wallet.

2. Install SDK

For 'Solana' app, install the 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>

Use latest SDKs

Use the latest Arcana Auth SDK release: v1.0.10. Migrate from Arcana Auth SDK v1.0.9 -> v1.0.10.

Versions older than Arcana Auth SDK v1.0.9 may encounter potential breaking changes that require app reconfiguration, integration code updates, and redeployment. Refer to the Migration Guides and Release Notes.

3. Integrate

Import AuthProvider from the auth package.

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

Create a new AuthProvider, specify the unique Client ID obtained earlier during app registration.

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 use await until the init() call is complete, before invoking any of the other Arcana Auth SDK functions.

AuthProvider Optional Parameters

You can optionally customize the following settings in the AuthProvider constructor:

alwaysVisible: Arcana wallet visibility mode - always visible in the app context or only if a blockchain transaction is triggered by the app

chainConfig: use chainId to specify the chain identifier for the active chain in the wallet and rpcUrl for specifying the RPC Url for that chain identifier

position: wallet position within the app context - left|right

theme: wallet theme - light|dark

setWindowProvider: set window.ethereum in the app context with the standard EIP-1193 Ethereum provider value

connectOptions: built-in login UI compact mode - true|false

See AuthProvider constructor parameters for details.

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

Initialize 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;

Onboard Users

The built-in, plug-and-play login UI is enabled by default. To use it, just add a single line of code in the app, call the connect function of the AuthProvider.

await auth.connect();

This will bring up the login modal displaying the onboarding options configured for the app in addition to the passwordless option.

Compact Login UI

You can choose to use a compact form of the built-in login UI modal instead of the regular one.

No plug-and-play support for Firebase authentication.

The plug and play feature of the Arcana Auth product is not supported for Firebase. Developers must build a custom login UI and add code to onboard users. For details, see onboarding users via Firebase and custom login UI

Custom Login UI

You can onboard users through a custom login UI instead of the built-in plug-and-play one. See how to use custom login UI for onboarding users in a 'Solana' app for details.

Arcana JWT Token

Upon successful authentication, Arcana Auth SDK returns a unique JWT token to the app called the Arcana JWT Token. App developers can use this token to verify user login and subsequently generate another token for app use. Learn more about how to verify the Arcana JWT Token for apps deployed on Testnet and Mainnet.

Sign Transactions

Use the standard EIP-1193 provider, auth.provider, for issuing Solana JSON-RPC calls in the context of the authenticated user. Use auth.solana Solana provider for issuing supported Web3 wallet operations on the Solana chain.

4. Deploy

Finally, deploy the app on Testnet (default). For Mainnet deployment, see Testnet > Mainnet Migration Guide.

That's all!

Your 'Solana' app is now powered by Arcana Auth SDK to onboard users via social login and allow authenticated users to sign blockchain transactions using the Arcana wallet.