> ## Documentation Index
> Fetch the complete documentation index at: https://thenile.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# NextJs

> Get started with Nile Auth in minutes

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.

<Steps>
  <Step title="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:

    ```bash theme={null}
    npx create-next-app@latest nile-app --yes
    ```
  </Step>

  <Step title="Obtain Database Credentials">
    1. If you haven't signed up for Nile yet, [sign up here](https://console.thenile.dev) and follow the steps to create a database.
    2. Navigate to **Database Settings** in your database's UI at [console.thenile.dev](https://console.thenile.dev).
    3. Go to **Connection** settings.
    4. Select the CLI icon, and click **Generate credentials**
           <img src="https://mintcdn.com/nile/6B-b9nH3DSiJ_Uwi/images/auth/generate-credentials.png?fit=max&auto=format&n=6B-b9nH3DSiJ_Uwi&q=85&s=f9f160a368eccc6ed7f033a4453aaeee" alt="Generate credentials" width="2020" height="898" data-path="images/auth/generate-credentials.png" />
    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.
       ```bash .env theme={null}
       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>
       ```
  </Step>

  <Step title="Install dependencies">
    ```bash theme={null}
    npm install @niledatabase/server @niledatabase/react
    @niledatabase/client @niledatabase/nextjs
    ```
  </Step>

  <Step>
    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:

    ```bash theme={null}
    mkdir -p app/api/\[...nile\]
    ```

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

    ```typescript app/api/[...nile]/nile.ts theme={null}
    import { Nile } from '@niledatabase/server';
    import { nextJs } from '@niledatabase/nextjs';

    export const nile = Nile({ extensions: [nextJs] });
    ```

    ```typescript app/api/[...nile]/route.ts theme={null}
    import { nile } from './nile';
    export const { POST, GET, DELETE, PUT } = nile.handlers;
    ```
  </Step>

  <Step title="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`

    ```jsx theme={null}
    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>
    );
    }

    ```
  </Step>

  <Step title="Run and Log in to your application">
    ```bash theme={null}
    npm run dev
    ```

    Navigate to localhost to see the page. You should see a signup form that looks like this:

    <img height="500" width="500" src="https://mintcdn.com/nile/6B-b9nH3DSiJ_Uwi/images/auth/quickstart_signup.png?fit=max&auto=format&n=6B-b9nH3DSiJ_Uwi&q=85&s=b43e34ede7a9d3ef7c398c16ea415ebe" alt="Signup Form" data-path="images/auth/quickstart_signup.png" />

    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:

    <img height="500" width="500" src="https://mintcdn.com/nile/6B-b9nH3DSiJ_Uwi/images/auth/quickstart_authenticated.png?fit=max&auto=format&n=6B-b9nH3DSiJ_Uwi&q=85&s=617c6ff28ed9c42e88d7ef2ef5e646a3" alt="User profile and organization switcher" data-path="images/auth/quickstart_authenticated.png" />
  </Step>

  <Step title="Bonus: Explore in Nile Console">
    You can explore the database and the tenant management dashboard in the [Nile console](https://console.thenile.dev).

    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:

    ```sql theme={null}
    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:

    ```sql theme={null}
    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.
  </Step>
</Steps>

## Next Steps

* [Learn more about Nile-Auth with NextJS](/auth/frameworks/nextjs)
* [Learn About Backend Integration](/auth/frameworks/express)