Authentication Module

Integrate login page

Prerequisites

  1. Node JS

  2. NextJS (you can use other js frontend frameworks as well)

  3. East SDK

  4. East SDK - Signin react component

Creating your project

First, let's create an empty NextJS project

npx create-next-app@latest --typescript --eslint

It will ask you a couple of options, you can follow these as default

npx create-next-app@latest --typescript --eslint
✔ What is your project named? … eastsdk-demo
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like to use `src/` directory? … No
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias (@/*)? … No

Go to the newly created project and install eastsdk

cd eastsdk-demo
yarn add @eastsdk/sdk-js @eastsdk/react

Code

Let's create a login page with a simple ready-to-use component. First, let's create the layout provider.

Create new file app/layout-provider.tsx make sure you put your clientId here.

"use client";

import { EastSDKProvider } from "@eastsdk/react";

interface LayoutProviderProps {
  children: JSX.Element;
}

export const LayoutProvider = ({ children }: LayoutProviderProps) => {
  return (
    <>
      <EastSDKProvider
        client={{
          clientId:
            "{your-client-id}",
          env: "testnet",
        }}
      >
        {children}
      </EastSDKProvider>
    </>
  );
};

Use the layout provider on the default Next layout, edit app/layout.tsx 

import "./globals.css";
import "@eastsdk/react/index.css";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { LayoutProvider } from "./layout-provider";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Turborepo",
  description: "Generated by create turbo",
};

export default function RootLayout({
  children,
}: {
  children: JSX.Element;
}): JSX.Element {
  return (
    <html lang="en">
      <body className={inter.className}>
        <LayoutProvider>{children}</LayoutProvider>
      </body>
    </html>
  );
}

Edit the app/page.tsx to include the required contexts and the login modal

"use client";

import { useEastSDK, useUser } from "@eastsdk/react";

export default function Page(): JSX.Element {
  const { user, setShowModal, onLogout } = useUser();
  const { client } = useEastSDK();

  return (
    <main>
      {user ? (
        <button
          className="px-4 py-1.5 bg-zinc-900 rounded-md hover:bg-zinc-800"
          onClick={onLogout}
        >
          Sign Out
        </button>
      ) : (
        <button
          className="px-4 py-1.5 bg-zinc-900 rounded-md hover:bg-zinc-800"
          onClick={() => setShowModal("login")}
        >
          Sign In
        </button>
      )}

      {user && <p className="text-center">account id: {user?.account_id}</p>}
    </main>
  );
}

There are a couple of important things here:

  1. user consists of the user's account details, which include their accountId and profile data from Arkana

  2. setShowModal to trigger the login modal

  3. client this will be used for accessing modules (NFT, FT, etc.)

  4. onLogout to trigger logout, clean cookies, etc.

PreviousGetting startedNextNFT & Collectibles Module

Last updated