Astro

This Example has not been tested yet. If you face any issues, please contact us at contact@bawabah.app

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

Getting started

Development

Examples

API Reference

Install Bawanah Library

Create Callback Route

​Install Bawanah Library

​Create Callback Route

​Create Login Page

Install Bawanah Library

Create Callback Route

Create Login Page