Skip to content

Next.js App Code Sample

You need to first register the app using the Arcana Developer Dashboard: Then configure authentication providers for onboarding users. After that, install the following packages and integrate the Next.js app.

  • auth
  • auth-react

See sample Next.js app source at GitHub. This is a very basic Next.js app that is created using the create-next-app template. It integrates with the Arcana Auth SDK and uses the built-in, plug-and-play login UI to onboard users and allow them to sign blockchain transactions using the Arcana wallet.

Registration & Configuration

The following Arcana Developer Dashboard screen shows the 'Testnet' configuration settings for the Next.js app such that users can onboard it via Google, Twitch, and passwordless login. See configuration settings for details.

Configure Social Providers
Configure Social Providers

After configuring the app, copy and use the Client ID assigned to the app and displayed in the dashboard on the top right of the Arcana Developer Dashboard screen. It will be used during the app integration with the Arcana Auth SDK.

Integrate App

In the sample code, refer to the auth/getArcanaAuth.js file. It shows how AuthProvider is instantiated. Use the Client ID assigned to the app earlier.

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 Next.js App Context


After integrating the Arcana Auth SDK and instantiating the AuthProvider, update _app.js to plug in the AuthProvider context ProvideAuth into the Next.js 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 functions such as logout.


Next, update index.js and add code to onboard users via the built-in, plug-and-play login UI and call the connect function when the app user chooses to click Connect in the app UI.

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} />}

Deploy Sample App

After registering, configuring, integrating the app with the Arcana Auth SDK, and adding code to onboard users, it is time to run the sample Next.js app. Here is what you will see when you run the Next.js sample app:

Deploy NextJS sample app
Deploy NextJS Sample App

On clicking connect, the Next.js sample app user will see the plug-and-play login screen with options to use Google and Twitch and log into the app. Passwordless authentication is enabled by default.


In the Next.js sample app, the login options displayed in the "plug-and-play pop-up UI" will only be the ones that have been set up by the developer through the Arcana Developer Dashboard.

Login via Plug-and-Play UI
Login via Plug-and-Play UI

After successful authentication, an app user will see the wallet in its minimized state. On clicking the minimized wallet, the maximized Arcana wallet is displayed. The logo displayed on the maximized wallet can be customized by the app developer through the Arcana dashboard.

Login and access in-app Arcana Wallet
Login and access in-app Arcana Wallet

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

Use the latest Arcana Auth SDK

Check the package.json file in the sample Next.js sources and ensure that you are using the latest Arcana Auth SDK npm release.

The current Arcana Auth SDK release is: v1.0.10

Last update: April 12, 2024 by shaloo, shaloo