Skip to content

Quick Start: Auth-Core

Arcana Auth-Core SDK offers limited Arcana Auth SDK functionality with additional flexibility in user onboarding customization!

Developers can use this SDK to assign keys to authenticated users to sign blockchain transactions securely.

Limited Auth Capabilities

Prerequisites

Use latest SDKs

Use the latest Arcana Auth-Core SDK release: v2.0.0-alpha.3

1. Register & Configure

Log into the Arcana Developer Dashboard:

https://dashboard.arcana.network

In the Manage Apps dashboard screen, click the first card and create a new app entry to register app. Each app is assigned a unique Client ID at registration. The Client ID is required for integrating the app with the Arcana Auth SDK.

A default Testnet configuration profile is associated with the registered app. In the Manage Apps dashboard screen, select the registered app card and click 'Testnet' configuration settings. Choose Social Auth to configure user onboarding providers. Optionally enable gasless transactions in Arcana wallet to incentivize app users.

Wallet UI Mode Setting

The Wallet UI Mode Arcana Developer Dashboard configuration setting chosen by the developer during app registration is ignored for apps integrated with the Arcana Auth-Core SDK.

To use the Arcana Auth-Core SDK, developers must implement a custom wallet UI.

Wallet UI Mode
Wallet UI Mode

2. Install SDK

Install the auth-core package:

npm install --save @arcana/auth-core

yarn add @arcana/auth-core

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

<script src="https://unpkg.com/@arcana/auth-core"></script>

3. Integrate

const { AuthProvider, SocialLoginType, CURVE } = window.arcana.auth_core;
// or
import { AuthProvider, CURVE } from '@arcana/auth-core';

The AuthProvider is instantiated and initialized for a UI flow that redirects the user to a different app page after login.

const clientId = "xar_test_d24f70cd300823953dfa2a7f5b7c7c113356b1ad"; // obtained after app registration via dashboard
const auth = new AuthProvider({
   curve: CURVE.ED25519, // defaults to CURVE.SECP256K1
   appId: clientId,
   redirectUri: ''   /* can be ignored for redirect flow if same as login page */ 
});

Onboard Users

Use custom login UI and call social login and passwordless user onboarding functions provided by the Arcana Auth-Core SDK. Specify the providers configured through the dashboard in the SocialLoginType.

Social Login

await auth.loginWithSocial(SocialLoginType.google);

Check SocialLoginType details in the Exported Enums section.

Passwordless Login

First initiate passwordless login:

const result = await auth.loginWithPasswordlessStart({
  email: 'abc@example.com'
});

Then, on the redirect page, handle passwordless login as follows:

await auth.handleRedirect();

Onboarding via Cognito, Firebase

Web3 apps that use Cognito or Firebase for onboarding users and require Arcana Auth-Core SDK to only assign cryptographic keys to the authenticated users are not supported in the current release.

Contact our support team if you need this feature.

Login Status

const loggedIn = auth.isLoggedIn(); /* boolean response */

Get User Info

After successful authentication, the user information is saved in memory. It gets copied in the current session storage before the page unload event. User information is fetched again to memory and removed from the session storage after a successful page reload.

const userInfo = auth.getUserInfo();

/* 
  UserInfo: {
    loginType: 'google',
    userInfo: {
      id: 'abc@example.com',
      name: 'ABC DEF',
      email: '',
      picture: ''
    },
    privateKey: ''
  }
*/

For userInfo type details, see Exported Types.

Get Public Key

const publicKey = await auth.getPublicKey({
  verifier: SocialLoginType.google,
  id: `abc@example.com`,
});

Logout

await auth.logout();

Sign Transactions

The AuthProvider is a standard Ethereum EIP-1193 provider. Apps integrated with the Arcana Auth-Core SDK can use this provider to allow authenticated users to sign blockchain transactions.

Add code to perform Web3 operations and sign blockchain transactions in the context of an authenticated user.

Developers must add a custom wallet UI and wire it to perform Web3 wallet and blockchain operations for the chains supported by the app. Note that the Arcana Auth-Core SDK does not provide any built-in login UI or Arcana wallet UI, unlike the Arcana Auth SDK. 

import { AuthProvider, CURVE } from '@arcana/auth-core';
import { ethers } from 'ethers'

const auth = await AuthProvider.init({
   appId: `${clientId}`, /* obtained after registering the app with the Arcana Developer Dashboard */
   curve: CURVE.ED25519, // defaults to CURVE.SECP256K1
   redirectUri:'SPECIFY_URI'    /* can be ignored for redirect flow if same as login page */
});

...

const login = async () => {
const arcanaProvider = await auth.loginWithSocial(SocialLoginType.google);
if (auth.isLoggedIn()) {
    const info = await auth.getUserInfo();
}
};

...

googleLoginBtn.addEventListener('click', () => {
  login('google');
});
  ¯
...

try {

  const provider = new ethers.providers.Web3Provider(arcanaProvider)
  await provider.getBlockNumber() //Or perform any other Web3 operation such as sign message, send transaction
    // 14983200
} catch (e) {
    // log error
}
...

4. Deploy

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

That's all!

You've successfully integrated a Web3 app with the Arcana Auth-Core SDK.

See Also

Arcana Auth-Core SDK Quicklinks

Last update: April 17, 2024 by shaloo, shaloo