Arcana Auth Integration Guide

Arcana Auth enables an embedded, self-custodial Web3 wallet powered by asynchronous distributed key generation algorithms that ensure security with privacy. It does not require installing a browser extension. Authenticated users can instantly access the Arcana wallet within the app context and sign blockchain transactions.

Apps using Account Kit can easily onboard users with social login offered by Arcana Auth. It allows devs to easily configure smart accounts for their users.

Integration

Install the SDK

npm

npm i -s @arcana/auth

yarn

yarn add @arcana/auth

Register the App

Use Arcana Developer Dashboard to register your app and obtain a unique clientId. Use this unique app identifier when creating a SmartAcccountSigner.

Create a SmartAccountSigner

Use the clientId assigned to your app via the dashboard and integrate with the Arcana Auth SDK by creating a SmartAccountSigner.

import { ArcanaAuthSigner } from "@alchemy/aa-signers/arcana-auth";

// See https://docs.arcana.network/quick-start/vue-quick-start#step-3-integrate-app for details.
const clientId = "xar_test_...";

export const createArcanaAuthSigner = async () => {
  const arcanaAuthSigner = new ArcanaAuthSigner({ clientId, params: {} });

  await arcanaAuthSigner.authenticate({
    async init() {
      await arcanaAuthSigner.inner.init();
    },
    async connect() {
      await arcanaAuthSigner.inner.connect();
    },
  });

  return arcanaAuthSigner;
};

Use it with Modular Account

Let's see it in action with aa-alchemy:

example.ts

import { createModularAccountAlchemyClient } from "@alchemy/aa-alchemy";
import { sepolia } from "@alchemy/aa-core";
import { createArcanaAuthSigner } from "./arcana-auth";

const chain = sepolia;

export async function getProvider() {
  const signer = await createArcanaAuthSigner();
  return createModularAccountAlchemyClient({
    apiKey: "ALCHEMY_API_KEY",
    chain,
    signer,
  });
}

arcana-auth.ts

import { ArcanaAuthSigner } from "@alchemy/aa-signers/arcana-auth";

// See https://docs.arcana.network/quick-start/vue-quick-start#step-3-integrate-app for details.
const clientId = "xar_test_...";

export const createArcanaAuthSigner = async () => {
  const arcanaAuthSigner = new ArcanaAuthSigner({ clientId, params: {} });

  await arcanaAuthSigner.authenticate({
    async init() {
      await arcanaAuthSigner.inner.init();
    },
    async connect() {
      await arcanaAuthSigner.inner.connect();
    },
  });

  return arcanaAuthSigner;
};