Skip to main content
This Example has not been tested yet. If you face any issues, please contact us at [email protected]

​
Install Bawanah Library

First, we have to install Bawabah Library from NPM (https://www.npmjs.com/package/bawabah) using the command: 
npm i bawabah
After installing the npm Package, we can start using it immediately: 
// 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"
});
Replace {your-app-id} with your appId and {your-app-secret}with your appSecret From 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

// 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 }
    );
  }
}
Need help? Join our community.

​
Create Login Page

// 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>
  );
}
Need help? Join our community.