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 Astro to create the route, then capture the user session with the capture() function: 
import type { APIRoute } from "astro";
import Bawabah from "bawabah";

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

export const GET: APIRoute = async ({ url }) => {
  const sessionId = url.searchParams.get("sessionId");

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

  try {
    const result = await bw.capture(sessionId);

    // --- Perform your login/signup logic here ---

    return new Response(
      JSON.stringify({ loggedIn: true }),
      { status: 200, headers: { "Content-Type": "application/json" } }
    );
  } catch (err: any) {
    return new Response(
      JSON.stringify({
        error: "Failed to capture session",
        details: err.message || String(err),
      }),
      { status: 500, headers: { "Content-Type": "application/json" } }
    );
  }
};
Need help? Join our community.

​
Create Login Page

Create the Login Page at src/pages/login.astro: 
---


---

<html lang="ar">
  <head>
    <meta charset="UTF-8" />
    <title>My Project</title>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100svh;
      }
      h1 {
        width: 100%;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>Welcome to my Website</h1>
    <div id="login-form"></div>

    <!-- Load Bawabah login form -->
    <script src="https://bawabah.app/app/login-form.js"></script>
    <script>
      startBawabah({
        element: "login-form",
        appId: "your-app-id", // 🔑 replace with real appId
        callbackUrl: "http://localhost:4321/login/callback"
      })
    </script>
  </body>
</html>
Need help? Join our community.