Custom Login UI

With Web3-React wallet connector framework, developers can allow app users to easily switch between multiple wallets within a single application. The Arcana Auth SDK offers a custom Web3-React connector that enables the Arcana wallet in apps using Web3-React.

In this guide, you will learn how to onboard users in Web3-React apps. It shows how the developers can integrate apps with the Arcana Auth SDKs and then use custom login UI to onboard users easily.

Prerequisites

Register Web3 Application: Log into the Arcana Developer Dashboard https://dashboard.arcana.network to register and configure the app before they can use the Arcana Auth SDK and enable the Arcana wallet for authenticated app users.
Set up Authentication Providers: 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 and displayed in the Arcana Developer Dashboard. It is required later during integrating with the Arcana Auth SDK.

Steps

Onboarding users in Web3-React apps via custom login UI powered by the Arcana Auth SDK is simple!

Follow these three steps:

Step 1: Install Arcana Auth SDK packages

npmyarnCDN

npm install --save @arcana/auth-web3-react @arcana/auth

yarn add @arcana/auth-web3-react @arcana/auth

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

Step 2: Create `AuthProvider` and `ArcanaConnector`

Import auth package and auth-web3-react packages. First, create AuthProvider and specify the unique Client ID value assigned to the app after registering through the Arcana Developer Dashboard.

Next, call initializeConnector from the web3-react/core library and instantiate the ArcanaConnector by specifying the AuthProvider as shown in the sample code below.

If the custom login UI is configured such that it allows a single authentication provider to onboard users, developers can specify the provider as an additional parameter while creating the ArcanaConnector. Otherwise, if the custom login UI offers multiple authentication provider options then developers can create a single ArcanaConnector without specifying the authentication provider as input and later call the setLogin function for the selected provider, in response to the user's onboarding choice.

Configure Authentication Providers before ArcanaConnector creation

To build a custom login UI, developers can choose from the list of supported authentication providers or use passwordless. Wire the UI buttons for onboarding via different options to the setLogin function of the ArcanaConnector.

Enable Authentication Provider

example/connectors/arcanaWallet.ts

// custom ui onboarding - google
import { ArcanaConnector } from "@arcana/auth-web3-react"
import { AuthProvider } from "@arcana/auth"
import { initializeConnector } from "@web3-react/core"

const auth = new AuthProvider(`${arcana_client_id}`) // Singleton

export const [authConnect, hooks] = initializeConnector(
  (actions) =>
    new ArcanaConnector(auth, {
      actions,
      login: {
        provider: 'google',
      } // either add here or in setLogin function
    })
)

// Custom UI Alternative 
// Use setLogin function after creating the connector.

/*
export const [authConnect, hooks] = initializeConnector(
  (actions) =>
    new ArcanaConnector(auth, {
      actions,
    })
)

authConnect.setLogin({ provider: 'google' })

*/
...

Enable Passwordless Login

example/connectors/arcanaWallet.ts

//custom ui onboarding - passwordless
import { ArcanaConnector } from "@arcana/auth-web3-react"
import { AuthProvider } from "@arcana/auth"
import { initializeConnector } from "@web3-react/core"

const auth = new AuthProvider(`${arcana_client_id}`) // Singleton

export const [authConnect, hooks] = initializeConnector(
  (actions) =>
    new ArcanaConnector(auth, {
      actions,
      login: {
        provider: 'passwordless',
        email: 'abc@example.com'
      } // either add here or in setLogin function
    })
)

// Custom UI Alternative 
// Use setLogin function after creating the connector.

/*
export const [authConnect, hooks] = initializeConnector(
  (actions) =>
    new ArcanaConnector(auth, {
      actions,
    })
)

authConnect.setLogin({ provider: 'passwordless', email: 'abc@example.com' })

*/
...

Step 3: Use ArcanaConnector

In the Web3-React app, use the ArcanaConnector created earlier and set up the required hooks:

example/components/connectorCards/ArcanaConnectCard.tsx

import { useEffect, useState } from "react";

import { MAINNET_CHAINS } from "../../chains";
import { hooks, arcanaConnect } from "../../connectors/arcanaWallet";
import { Card } from "../Card";

const CHAIN_IDS = Object.keys(MAINNET_CHAINS).map(Number);

const {
  useChainId,
  useAccounts,
  useIsActivating,
  useIsActive,
  useProvider,
  useENSNames,
} = hooks;

export default function ArcanaConnectCard() {
  const chainId = useChainId();
  const accounts = useAccounts();
  const isActivating = useIsActivating();

  const isActive = useIsActive();

  const provider = useProvider();
  const ENSNames = useENSNames(provider);

  const [error, setError] = useState(undefined);

  // attempt to connect eagerly on mount
  useEffect(() => {
    arcanaConnect.connectEagerly().catch((error) => {
      console.debug("Failed to connect eagerly to arcanaConnect", error);
    });
  }, []);

  return (
    <Card
      connector={arcanaConnect}
      activeChainId={chainId}
      chainIds={CHAIN_IDS}
      isActivating={isActivating}
      isActive={isActive}
      error={error}
      setError={setError}
      accounts={accounts}
      provider={provider}
      ENSNames={ENSNames}
    />
  );
}

Now, you are all set to onboard users in the Web3-React app using the custom login UI and enable Arcana wallet for the authenticated users.

pages/index.tsx

import ArcanaConnectCard from "../components/connectorCards/ArcanaConnectCard";
import CoinbaseWalletCard from "../components/connectorCards/CoinbaseWalletCard";
import GnosisSafeCard from "../components/connectorCards/GnosisSafeCard";
import MetaMaskCard from "../components/connectorCards/MetaMaskCard";
import NetworkCard from "../components/connectorCards/NetworkCard";
import WalletConnectCard from "../components/connectorCards/WalletConnectCard";
import WalletConnectV2Card from "../components/connectorCards/WalletConnectV2Card";
import ProviderExample from "../components/ProviderExample";

export default function Home() {
  return (
      <>
      <ProviderExample />
      <div>
        <MetaMaskCard />
        <WalletConnectV2Card />
        <WalletConnectCard />
        <CoinbaseWalletCard />
        <NetworkCard />
        <GnosisSafeCard />
        <ArcanaConnectCard />
      </div>
      );
      </>
}

Web3-React App integrated with the Arcana Auth

That is all!

The Web3-React app can now onboard users using the custom login UI. Authenticated users can instantly access the Arcana wallet and sign blockchain transactions.

Example: Sample Web3-React App

See sample Web3-React app for details.

What's Next?

After integrating and onboarding users in the Web3-React app developers can add code programmatically and enable Web3 wallet operations in the authenticated user's context.