> ## 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.

# Magic Link

> Magic Link Authentication

Magic Link authentication provides a passwordless sign-in experience where users
receive a secure link via email to authenticate. This method eliminates the need for
passwords while maintaining security.

## Overview

Magic Link authentication flow:

1. User enters their email address
2. They receive a secure link with an authentication token via email. The token is valid for 4 hours by default and is saved in the `auth.verification_tokens` table in your database.
3. Clicking the link automatically exchanges the token for a session, logs them into your application and redirects them to the `callbackUrl` configured in the `sign` component.

## Implementation Steps

<Steps>
  <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="Configure Email Settings">
    Ensure you have configured your email settings in the Nile Dashboard. You'll need a valid
    [SMTP provider](/auth/email/customsmtp) configured to send emails from your
    application, and [email templates](/auth/email/templates) configured for the magic link.
  </Step>

  <Step title="Enable Passwordless Login">
    Click on Providers tab under Configure. Under Email, enable passwordless login.

    <img height="500" width="500" src="https://mintcdn.com/nile/6B-b9nH3DSiJ_Uwi/images/auth/enable_passwordless.png?fit=max&auto=format&n=6B-b9nH3DSiJ_Uwi&q=85&s=7227695c254708d970fb5956e574e232" alt="Passwordless Login" data-path="images/auth/enable_passwordless.png" />
  </Step>

  <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="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="Frontend Implementation">
    The `<EmailSignIn />` component is used to send a magic link to the user's email address.

    <Tabs>
      <Tab title="Preview">
        <iframe src="https://storybook.thenile.dev/iframe.html?args=&globals=&id=social-email--sign-in-with-email" width="100%" height="230px" className="rounded-xl" />
      </Tab>

      <Tab title="Component">
        ```jsx theme={null}
        import { EmailSignIn } from "@niledatabase/react";

        export default function SignUpPage() {
        return <EmailSignIn callbackUrl="/dashboard" />
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>