This guide will help you get started with Nile Auth by walking you through the steps required to configure and integrate authentication in your application using the provided SDK components. By the end of this guide, you will have implemented email + signup authentication (enabled by default for all databases), user profile, and organization management in your application.
1

Run create-next-app

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
2

Obtain Database Credentials

  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 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.
    .env
    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>
3

Install dependencies

npm install @niledatabase/server @niledatabase/react @niledatabase/client @niledatabase/nextjs
4

Your application must expose API routes to handle authentication operations.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:
app/api/[...nile]/nile.ts
import { Nile } from "@niledatabase/server";
import { nextJs } from '@niledatabase/nextjs';

export const nile = Nile({ extensions: [nextJs] });
app/api/[...nile]/route.ts
import { nile } from "./nile";
export const { POST, GET, DELETE, PUT } = nile.handlers;
5

Use SDK Components

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>
);
}
6

Run and Log in to your application

npm run dev
Navigate to localhost to see the page. You should see a signup form that looks like this:Signup FormEnter 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:User profile and organization switcher
7

Bonus: Explore in Nile Console

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.

​
Next Steps