Skip to content

Integrate React/NextJS App

In this guide, discover how to integrate a React/NextJS app with the Arcana Auth product. Use the Auth React wrapper that provides React Hooks to set Auth component props with necessary initialization values for configuring the Arcana Auth SDK and the Arcana wallet.

Prerequisites

  • Log in to the Arcana Developer Dashboard: https://dashboard.arcana.network

  • Use the Arcana Developer Dashboard to register and configure the app before integrating it with the Arcana Auth SDK.

  • 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 displayed in the Arcana Developer Dashboard. It is required while integrating the app with the Arcana Auth SDK and creating the AuthProvider.

Steps

Integrating a React/NextJS app with the Arcana Auth product is simple!

First install the Arcana Auth SDK:

Step 1: Install auth

npm

npm install --save @arcana/auth

yarn

yarn add @arcana/auth

CDN

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

Step 2: Install auth-react

Next, install the Arcana Auth React SDK to access the Auth React component wrapper:

npm

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

yarn add @arcana/auth-react

CDN

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

Step 3: Initialize AuthProvider, Use ProviderAuth

A typical React application consists of index.js and App.js files. First update the index.js file and add code to import the AuthProvider from the auth package. Instantiate the AuthProvider and get a Web3 provider.

Next, import the ProviderAuth component from the auth-react package and render it using the Web3 provider as props.

index.js
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { AuthProvider } from "@arcana/auth";
import { ProvideAuth } from "@arcana/auth-react";
import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

const provider = new AuthProvider(
  "xar_live_d7c88d9b033d100e4200d21a5c4897b896e60063"
);

root.render(
  <StrictMode>
    <ProvideAuth provider={provider}>
      <App />
    </ProvideAuth>
  </StrictMode>
);

app.js
import React from "react";
import { Auth } from "@arcana/auth-react";

export default function App() {
  return (
    <div className="App">
      <h1>Sample Auth React App</h1>
      <Auth />
    </div>
  );

Step 4: Use useAuth Hook

Use React hook useAuth from the auth-react package, rendering it in the App function. You can configure the wallet layout settings using Auth component props.

App.js
import { useAuth } from "@arcana/auth-react";

function App() {
  const { loading, isLoggedIn, connect, user } = useAuth()

  const onConnectClick = async () => {
    try {
      await connect(); // Built-in, plug & play login UI
    } catch (err) {
      console.log({ err });
      // Handle error
    }
  };

  if (loading) {
    return <p>Loading...</p>;
  }
  if (!isLoggedIn) {
    return (
      <button onClick={onConnectClick}>
        Login UI (Built-in)
      </button>
    );
  }
}

export default App

That is all!

The React/Next.js app is now successfully integrated with the Arcana Auth product. Refer to the Auth Examples.

What's Next?

After integrating an app developers can add code to onboard users and enable Web3 wallet operations for authenticated users to sign blockchain transactions.

See also


Last update: November 10, 2023 by DocX, shaloo, shalz