Skip to content

NextJS App Code Sample

You need to first configure user onboarding options and other settings using the After that, install Arcana Auth SDK and integrate your NextJS app.

Here is a very basic NextJS app that is created using the create-next-app template. It integrates with Arcana Auth SDK and uses the plug and play feature to allow user onboarding and signing of blockchain transactions.

See sample NextJS app source at GitHub.

Registration & Configuration

The following dashboard screen shows that a test deployment of NextJS app is configured to onboard users via Google, Twitch, and passwordless login. Follow the instructions in the how to configure your app guide for details.

NextJS App config

After configuring your app, copy and use the Client ID assigned to the app and displayed in the dashboard on the top RHS.

Integrate Auth SDK

In the sample code, refer to the auth/getArcanaAuth.js file. It shows how AuthProvider is instantiated. Before you run this test app, you need to register your app and obtain the Arcana Client ID assigned to your app via the dashboard. This Client ID is used during the instantiation of the AuthProvider.

import { AuthProvider } from "@arcana/auth";

const auth = new AuthProvider(process.env.NEXT_PUBLIC_ARCANA_APP_ID, { //assigned during app registration, see dashboard
  theme: "light", //Check SDK Reference Guide for other optional parameters

const getAuth = () => {
  return auth;

Update NextJS App Context


After integrating the Auth SDK and instantiating the AuthProvider, update _app.js to plug in the Arcana AuthProvider context ProvideAuth into the NextJS app.

import { getAuth } from "../auth/getArcanaAuth";
import { ProvideAuth } from "../auth/useArcanaAuth";
import Layout from "../components/layout";
import { Sora } from "@next/font/google";

const sora = Sora();

const auth = getAuth();

export default function App({ Component, pageProps }) {
  return (
    <ProvideAuth provider={auth}>
      <Layout className={sora.className}>
        <Component {...pageProps} />

The Auth context provider ProvideAuth is implemented in auth/useArcanaAuth.js. Refer to the code to see how other AuthProvider methods besides the plug-and-play connect method can be used to access login, logout, and other supported functionality.


Next, update index.js to use plug-and-play authentication provided by the Arcana Auth SDK with a single line of code that calls the connect method when the app user chooses to click Connect in the app UI.

See highlighted code to understand how Auth SDK plug-and-play authentication is used via connect method. This invokes the built-in authentication UI into the context of the integrating application.

import React from "react";
import { useArcanaAuth } from "../auth/useArcanaAuth";
import Loader from "../components/loader";
import { Info } from "../components/info";
import styles from "./index.module.css";

export default function IndexPage() {
  const { user, connect, isLoggedIn, loading, loginWithSocial, provider } =
  const onConnectClick = async () => {
    try {
      await connect();
    } catch (e) {
  const onConnect = () => {
  React.useEffect(() => {
    provider.on("connect", onConnect);
    return () => {
      provider.removeListener("connect", onConnect);
  }, [provider]);
  return (
      {loading && <Loader secondaryColor="#101010" strokeColor="#101010" />}
      {!loading && !isLoggedIn && (
        <button className={styles.Btn} onClick={onConnectClick}>
      {!loading && isLoggedIn && <Info info={user} />}

Sample App Usage

All right, now that you have configured Auth SDK usage via the dashboard and plugged in all the code in the basic create-next-app template, it is time to run the sample NextJS app. Here is what you will see when you run the NextJS sample app:

NextJS App UI Connect

On clicking connect, the NextJS sample app user will see the plug-and-play login screen which was configured by the developer using the Arcana dashboard for Google and Twitch login. Passwordless authentication is enabled by default.


In the NextJS sample app, the login options displayed in the "plug-and-play pop-up authentication screen" will only be the ones that have been set up by the developer through the developer dashboard.

App login plug and play

After successful authentication, an app user will see a minimized wallet. On clicking the wallet icon, the full Arcana wallet UI is displayed. The logo displayed on the minimized wallet screen and the top left logo in the maximized wallet can be configured by the app developer using the Arcana dashboard.

Wallet Display NextJS App

See Arcana Wallet User Guide, Arcana Wallet Developer's Guide, and Dashboard User Guide for more details.

Use the latest Auth SDK

Check the package.json file in the sample NextJS sources and ensure that you are using the latest Auth SDK npm release. The current release is: v1.0.3

Last update: February 21, 2023 by shaloo, shalz