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 dApp 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
Configure Authentication Mechanism
You may be required to configure additional details depending on the choice of authentication mechanisms. For example, if the dApp wants to enable users to onboard using the Google social authentication then the developer must set up and specify the clientID for Google OAuth in the Arcana Dashboard before integrating the application.
For details, see how to configure one or more social logins.
-
Save the App Address assigned to the dApp by the dashboard. It is required to instantiate the
AuthProvider
while integrating the dApp.
Steps
Enabling user onboarding and signing of blockchain transactions in your React/NextJS application is simple!
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, instantiate AuthProvider
from the Auth SDK. Import the ProviderAuth
component from the Auth React library and render it using 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";
const provider = new AuthProvider(`${appId}`)
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. Checkout 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
- Social authentication using Auth SDK and Google
- Passwordless authentication using Auth SDK
- Auth SDK Errors
- Auth SDK Usage Guide
- Auth SDK Reference Guide