Skip to content

Quick Start: Auth-Core

Already using Arcana Auth-Core SDK?

Use the latest release: v2.0.0-alpha.3.

Auth-Core SDK usage

The Arcana Auth-Core SDK is meant for apps that require access to private keys. If you do not require private key access then please DO NOT use this SDK. Developers get a stripped-down version of the Arcana Auth product. It does not provide any built-in Arcana Auth login UI. There is no Arcana wallet functionality for Web3 operations.

When using the Arcana Auth-Core SDK, only app-specific keys are allowed. The 'Global Keys' option is not available.

There is no enhanced wallet security (MFA) or key recovery when the user switches devices.

Overview

The Arcana Auth-Core SDK is meant for implementing Web3 app solutions where developers need to securely assign blockchain access keys, the private keys to every authenticated user, and build a custom wallet UI instead of using the one built-in the Arcana Auth SDK.

Start by registering the app and configuring usage settings through Arcana Developer Dashboard. After that, install Arcana Auth-Core SDK, integrate it with your app, and initialize the AuthProvider. Add code to facilitate user onboarding by handling the redirect flow after user authentication. Also, add custom code for wallet UI to enable Web3 wallet and blockchain operations. Finally, deploy your app on the Testnet or Mainnet.

uth Usage Overview Auth Usage Overview

Key security

When using the Arcana Auth-Core SDK based auth solution developers must secure authenticated user's cryptographic assets including keys.

Steps

Step 1: Register & Configure App

To register and configure your app, create a new entry for your app by logging into the Arcana Developer Dashboard:

https://dashboard.arcana.network

Save the unique Client ID assigned to the app after registration. It will be required when you integrate the app with the Arcana Auth SDK. Also, configure the Arcana Auth product usage by specifying branding, setting up authentication providers, managing blockchains displayed in the wallet, and other settings as required.

See how to register and configure app using the Arcana Developer Dashboard for details.

After registering and configuring the app, install the requisite Arcana SDKs as per the app-type and use case.

Wallet UI Mode: Only Custom UI

The Wallet UI Mode configuration setting selected by the developer during app registration is ignored if the app is integrated with the Arcana Auth-Core SDK. When choosing the Arcana Auth-Core SDK, developers must implement custom wallet UI. There is no default Arcana wallet or built-in login UI that is supported by the Arcana Auth-Core SDK.

Wallet UI Mode Ignored

Step 2: Install SDK

After registering the app and configuring Auth usage for the app using the Arcana Developer Dashboard, developers can install the auth-core package using one of these options:

npm

npm install --save @arcana/auth-core

yarn

yarn add @arcana/auth-core

CDN

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

Step 3: Integrate App

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. For more details, see here.

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 */ 
});

Step 4: Onboard Users

Before adding code in the app for using the Arcana Auth-Core SDK user onboarding functions, make sure you have configured those properly as instructed here. More than one user onboarding mechanism can be enabled in the app:

  • Social Login
  • Passwordless

Social Login

await auth.loginWithSocial(SocialLoginType.google);

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();

Cognito & Firebase

Web3 apps that do not wish to use the user onboarding features offered by the Arcana Auth-Core SDK but only need to assign cryptographic keys to the authenticated users (for e.g., apps using Cognito and Firebase) are not supported in the current release.

For more information, contact our support team.

Login Status

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

Get User Info

After successful login, the user information is saved in memory. Before the page unload event, the user information gets stored in session storage. After a successful page reload, it is fetched again to memory and removed from the session storage.

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`,
}); 

See Exported Enums for details on SocialLoginType, .

Logout

await auth.logout();

Refer to the sample code for using Arcana Auth-Core SDK here for details on how to onboard users in an app.

Step 5: Sign Transactions

Once the user has successfully logged into the app, add code to perform Web3 operations such as sign messages, use blockchain send transaction and more.

The AuthProvider is a standard Ethereum EIP-1193 provider and can be used by the apps integrating with the Arcana Auth-Core SDK to allow authenticated users to sign blockchain transactions.

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

Step 6: Add Custom Wallet UI

After adding code to onboard users via the Arcana Auth-Core SDK you can add custom wallet UI and wire it to perform Web3 wallet and blockchain operations for the chains supported by your app. Note that the Arcana Auth-Core SDK does not have built-in Arcana wallet unlike the {{ no such element: dict object['dk_name'] }}.

That's all!!!

You've connected Arcana Auth-Core SDK to your Web3 app for smooth user onboarding. Just add your custom code for wallet actions, and users can effortlessly sign blockchain transactions.

Examples

For a sample demonstrating an app that integrates with the {{ no such element: dict object['auth_coresdk_name'] }}, refer to 'sample-auth-core' in the GitHub repo: Auth Examples.

See Also


Last update: January 17, 2024 by shaloo, shalz