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.
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>
);
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.
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
- React app integration
- Onboard Users
- Arcana Auth SDK Errors
- Arcana Auth SDK Usage Guide
- Arcana Auth SDK Reference Guide