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

Create a Cloudflare worker to capture the user session on the callback route. 
import Bawabah from "bawabah";

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

export default {
  async fetch(request: Request): Promise<Response> {
    const url = new URL(request.url);

    if (url.pathname === "/login/callback") {
      const sessionId = url.searchParams.get("sessionId");
      if (!sessionId) {
        return new Response("Missing sessionId", { status: 400 });
      }

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

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

        return Response.json({ loggedIn: true });
      } catch (err: any) {
        return Response.json(
          { error: "Failed to capture session", details: String(err) },
          { status: 500 }
        );
      }
    }

    return new Response("Not Found", { status: 404 });
  },
};
Need help? Join our community.

​
Create Login Page

You can create the login page with any framework or with just plain HTML, like this example: 
<!DOCTYPE html>
<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>

  <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:8787/login/callback"
    })
  </script>
</body>
</html>
Need help? Join our community.