Next.js

This guide uses Next.js with App Router, Typescript and Tailwind CSS. If you have a different framework in mind, you can find additional guides under “Frameworks” in the sidebar. Initialize a new Next.js project with the following command and give it a name:

npx create-next-app@latest nile-app --yes

Your application must expose API routes to handle authentication operations.

First, create a folder called api under the app folder and a folder called [...nile] under it:

mkdir -p app/api/\[...nile\]

Create following files handle the calls to your server, as well as expose the nile instance to your application:

/api/[...nile]/nile.ts

import { Nile } from "@niledatabase/server";
export const nile = await Nile();
export const { handlers } = nile.api;

/api/[...nile]/route.ts

import { handlers } from "./nile";
export const { POST, GET, DELETE, PUT } = handlers;

Your application will interact with above authentication routes using SDK components. Replace the boilerplate app/page.tsx with the following:

/app/page.jsx

import {
  SignOutButton,
  SignUpForm,
  SignedIn,
  SignedOut,
  TenantSelector,
  UserInfo,
} from "@niledatabase/react";
import "@niledatabase/react/styles.css";

export default function SignUpPage() {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen">
      <SignedIn className="flex flex-col gap-4">
        <UserInfo />
        <TenantSelector className="py-6 mb-10" />
        <SignOutButton />
      </SignedIn>
      <SignedOut>
        <SignUpForm createTenant />
      </SignedOut>
    </div>
  );
}

npm run dev

Navigate to localhost to see the page. Enter a dummy email and password into the <SignUpForm />. This will automatically create a new user in the database and log you in. Congratulations, you have authentication!