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

# Next.js

> Next.js Example.

<Warning>
  This Example has not been tested yet. If you face any issues, please contact us at [contact@bawabah.app](mailto:contact@bawabah.app)
</Warning>

### Install Bawanah Library

First, we have to install Bawabah Library from NPM ([https://www.npmjs.com/package/bawabah](https://www.npmjs.com/package/bawabah)) using the command:

```
npm i bawabah
```

After installing the npm Package, we can start using it immediately:

<CodeGroup>
  ```typescript index.ts theme={"dark"}
  // Import Bawabah Library
  import Bawabah from 'bawabah';

  // Initialize Bawabah with your credentials
  const bw = new Bawabah();
  bw.init({
      appId: "your-app-id",
      appSecret: "your-app-secret"
  });
  ```
</CodeGroup>

> Replace `{your-app-id}` with your appId and `{your-app-secret}`with your appSecret From [Create Your First App](/getting-started/en/quickstart#create-your-first-app) Step.

### **Create Callback Route**

Now we will create the callback route to capture the user session. In this example, we will use Next.js to create the route, then capture the user session with the `capture()` function:

But before that, we need to install the necessary packages using this command:

```
npm i next react react-dom
```

<CodeGroup>
  ```typescript app/login/callback/route.ts theme={"dark"}
  // File: app/login/callback/route.ts
  import { NextRequest } from 'next/server';
  import Bawabah from 'bawabah';

  // Initialize Bawabah with your credentials
  const bw = new Bawabah();
  bw.init({
    appId: "your-app-id",
    appSecret: "your-app-secret"
  });

  // Callback route for Bawabah redirect
  export async function GET(req: NextRequest) {
    const { searchParams } = new URL(req.url);
    const sessionId = searchParams.get("sessionId"); // /login/callback?sessionId=abc123

    if (!sessionId) {
      return new Response("Missing sessionId in query", { status: 400 });
    }

    try {
      // Capture user session from Bawabah
      const result = await bw.capture(sessionId);

      // --- Perform Your User Login/Signup Logic here ---

      return Response.json({ loggedIn: true }, { status: 200 });
    } catch (err) {
      return Response.json(
        { error: "Failed to capture session", details: String(err) },
        { status: 500 }
      );
    }
  }
  ```
</CodeGroup>

<Note>
  **Need help?**  Join our [<u>community</u>](https://discord.gg/9YpqwdNpxy).
</Note>

## Create Login Page

<CodeGroup>
  ```tsx app/login/page.tsx theme={"dark"}
  // File: app/login/page.tsx
  "use client";

  import { useEffect } from "react";

  export default function LoginPage() {
    useEffect(() => {
      // Dynamically load the Bawabah script
      const script = document.createElement("script");
      script.src = "https://bawabah.app/app/login-form.js";
      script.async = true;
      script.onload = () => {
        // @ts-ignore - injected by the script
        if (typeof startBawabah === "function") {
          startBawabah({
            element: "login-form",
            appId: "your-app-id", // 🔑 replace with your real App ID
            callbackUrl: "http://localhost:3000/login/callback" // 🔑 replace with your callback
          });
        }
      };
      document.body.appendChild(script);
    }, []);

    return (
      <main className="flex min-h-screen flex-col items-center justify-center">
        <h1 className="text-2xl font-bold text-center w-full">
          Welcome to my Website
        </h1>
        <div id="login-form" className="mt-6"></div>
      </main>
    );
  }
  ```
</CodeGroup>

<Note>
  **Need help?**  Join our [<u>community</u>](https://discord.gg/9YpqwdNpxy).
</Note>