Skip to content

Integrate React/Next.js App

In this guide, discover how to integrate a React/Next.js 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 the app before configuring and 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/Next.js app with the Arcana Auth product is simple!

First install the Arcana Auth SDK:

Step 1: Install auth

npm install --save @arcana/auth

yarn add @arcana/auth

<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 install --save @arcana/auth @arcana/auth-react

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

<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-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: April 11, 2024 by DocX, shaloo, shaloo