NextJS App Code Sample

You need to first configure user onboarding options and other settings using the https://dashboard.arcana.network. 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.

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

pages/app.js

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} />
      </Layout>
    </ProvideAuth>
  );
}

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.

pages/index.js

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 } =
    useArcanaAuth();
  const onConnectClick = async () => {
    try {
      await connect();
    } catch (e) {
      console.log(e);
    }
  };
  const onConnect = () => {
    console.log("connected");
  };
  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}>
          Connect
        </button>
      )}
      {!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:

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.

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.

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