Get Started

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. You should see a signup form that looks like this:

Enter a dummy email and password into the <SignUpForm />.

If all went well, you will be logged in automatically and see the user profile and an organization switcher that allows you to create new organizations and switch between them:

You can explore the database and the tenant management dashboard in the Nile console.

You should see a new organization and new user created in the “Tenants and Users” section. You can also navigate the the query editor and view the user and tenats in the database tables directly by running:

SELECT * FROM users;
SELECT * FROM tenants;

If you are feeling adventurous, you can try to replace the default user photo in their profile by running:

UPDATE users 
SET picture= 'https://www.publicdomainpictures.net/pictures/360000/velka/katze-katzchen-niedlich-vintage-1595638359oOf.jpg' 
WHERE email='your-dummy-email@example.com';

You should see the user photo updated in the user profile in your application.