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

1. If you haven’t signed up for Nile yet, sign up here and follow the steps to create a database.
2. Navigate to Database Settings in your database’s UI at console.thenile.dev.
3. Go to Connection settings.
4. Select the CLI icon, and click Generate credentials
5. Copy the required credentials and store them in an .env file so they can be used in the application to connect to the Nile auth service.

   NILEDB_USER=niledb_user
   NILEDB_PASSWORD=niledb_password
   NILEDB_API_URL=https://us-west-2.api.thenile.dev/v2/databases/<database_id>
   NILEDB_POSTGRES_URL=postgres://us-west-2.db.thenile.dev:5432/<database_name>
   

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!