Integrate React/NextJS App

In this guide, you will learn how to integrate a React/NextJS application with the Arcana Auth SDK by leveraging the Auth React wrapper. The Auth React wrapper utilizes React Hooks for setting the Auth component props with requisite initialization values needed for configuring the Arcana Auth SDK and the Arcana wallet.

Prerequisites

• Developers need to first log into 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 SDK is simple!

Step 1: Install auth

To integrate with the Arcana Auth React components, install the Arcana Auth SDK via the auth package.

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 Auth React component wrapper via the auth-react package.

npm

npm install --save @arcana/auth-react

Step 3: Update index.js

A typical React application consists of index.js and App.js files. First update the index.js file.

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.

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_dev_5fd5338ee82834d59eee58f37b676bdabdfa41e9", //required
); //See SDK Reference Guide for optional parameters

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

Step 4: Update App.js

Finally to integrate the app with the Arcana Auth SDK, update the App.js file by importing Auth and useAuth from the auth-react package, rendering it in the App function. You can configure the wallet layout settings using Auth component props.

Once the user logs in successfully set the route to the post-login page in your application.

import { Auth, useAuth } from "@arcana/auth-react";

const onLogin = () => {
  // Route to authenticated page
}
function App() {
  const auth = useAuth();
  return (
    <div>
      {auth.loading ? (
        "Loading"
      ) : auth.isLoggedIn ? (
        <p>Logged In</p>
      ) : (
        <div>
          <Auth externalWallet={true} theme={"light"} onLogin={onLogin}/>
        </div>
      )}
    </div>
  );
}

export default App;

That is all!

The React/Next.js app is now successfully integrated with the Arcana Auth SDK using the Auth-React wrapper. Refer to the Auth Examples for working integration examples.

What's Next?

After integrating an app with the Arcana Auth SDK, developers can add code to onboard users and enable Web3 wallet operations for authenticated users to sign blockchain transactions.

See also

• React app integration
• Onboard Users
• Arcana Auth SDK Errors
• Arcana Auth SDK Usage Guide
• Arcana Auth SDK Reference Guide