React/NextJS App Integration
In this tutorial, 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 for configuring the Auth SDK and the Arcana wallet.
Prerequisites
-
Developers must first log into the Arcana Developer Dashboard: https://dashboard.arcana.network
-
Use the dashboard to register and configure dApp settings for using the Auth SDK. Configure the app settings as per the required user onboarding experience. Click on the Auth tab in the dashboard. Choose and configure from a list of supported authentication mechanisms:
- Discord
- GitHub
- Twitch
We are working on supporting additional social providers for onboarding users. Watch out for the upcoming Auth SDK releases:
- Telegram
- LINE
-
Kakaotalk
Configure Authentication Mechanism
You may be required to configure additional details depending on the choice of social providers for user authentication. For example, to enable user onboarding via the social provider, Google, the developer must set up and specify the client ID for Google OAuth in the Arcana Dashboard before integrating the application.
For details, refer to the social provider configuration guides.
-
Save the Client ID assigned to the dApp by the dashboard. It is required to instantiate the
AuthProvider
while integrating the dApp.
Steps
Enabling user onboarding and signing blockchain transactions in your React/NextJS application is simple!
A typical React application has index.js
and App.js
files. To integrate Arcana Auth React components, install the Auth SDK and the Auth React component wrapper. Next, update the index.js
file and import the AuthProvider
from the Auth SDK and instantiate it. Import the ProviderAuth
component from the Auth React library and render it using the Web3 provider as props.
Lastly, update the App.js
file by importing Auth component and rendering it in the App
function. Provide authentication initialization values as props. Once the user logs in successfully set the route to the post-login page in your application.
Step 1: Install Auth SDK
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 Wrapper
npm
npm install --save @arcana/auth-react
Step 3: Update index.js
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { AuthProvider } from "@arcana/auth";
import { ProvideAuth } from "@arcana/auth-react";
// clientId: Arcana Unique App Identifier via Dashboard
const provider = new AuthProvider(`${clientId}`)
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<ProvideAuth provider={provider}>
<App />
</ProvideAuth>
</React.StrictMode>
);
Step 4: Update App.js
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!
You have successfully integrated your React/Next.js application with the Arcana Auth SDK using the Auth-React wrapper. Check out another example with source code demonstrating React application integration.
What's Next?
Once the login component is used in the application to onboard users, authenticated users can utilize the Arcana wallet to sign blockchain transactions, transfer or send blockchain tokens, etc.
See also
- How to onboard app users via Google
- Passwordless authentication using Auth SDK
- Auth SDK Errors
- Auth SDK Usage Guide
- Auth SDK Reference Guide