Vue

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 using Express.js

Now we will create the callback route to capture the user session. In this example, we will use Express.js to create the route, then capture the user session with the capture() function: But before that, we need to install Express.js using this command:

npm i express

// Import Express and Bawabah Library
import express from 'express';
import Bawabah from 'bawabah';

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

// Create Express app
const app = express();
const PORT = process.env.PORT || 3000;

// Callback route for Bawabah redirect
app.get('/login/callback', async (req, res) => {
    const sessionId = req.query.sessionId as string; // Get Session Id from Query /login/callback?sessionId=abc123
    if (!sessionId) {
        // If sessionId is missing, return a 400 error
        return res.status(400).send('Missing sessionId in query');
    }

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

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

        res.status(200).json({ loggedIn: true });
    } catch (err) {
        // If Bawabah API Respond with an Error, return a 500 error to the user with details
        res.status(500).json({ error: 'Failed to capture session', details: err });
    }

});

// Start the Express server
app.listen(PORT, () => {
    console.log(`Server running on http://localhost:${PORT}`);
});

// Import Express and Bawabah Library
const express = require('express');
const Bawabah = require('bawabah');

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

// Create Express app
const app = express();
const PORT = process.env.PORT || 3000;

// Callback route for Bawabah redirect
app.get('/login/callback', async (req, res) => {
    const sessionId = req.query.sessionId; // Get Session Id from Query /login/callback?sessionId=abc123
    if (!sessionId) {
        // If sessionId is missing, return a 400 error
        return res.status(400).send('Missing sessionId in query');
    }

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

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

        res.status(200).json({ loggedIn: true });
    } catch (err) {
        // If Bawabah API responds with an error, return a 500 error to the user with details
        res.status(500).json({ error: 'Failed to capture session', details: err.message || err });
    }
});

// Start the Express server
app.listen(PORT, () => {
    console.log(`Server running on http://localhost:${PORT}`);
});

Need help? Join our community.

Create the Login Page Component at src/views/Login.vue:

<template>
  <main class="login-page">
    <h1>Welcome to my Website</h1>
    <div id="login-form"></div>
  </main>
</template>

<script setup>
import { onMounted } from "vue";

onMounted(() => {
  // Dynamically load Bawabah script
  const script = document.createElement("script");
  script.src = "https://bawabah.app/app/login-form.js";
  script.async = true;
  script.onload = () => {
    if (typeof startBawabah === "function") {
        startBawabah({
          element: "login-form",
          appId: "your-app-id", // 🔑 replace with your real App ID
          callbackUrl: "http://localhost:3000/login/callback"
        });
    }
  };
  document.body.appendChild(script);
});
</script>

<style scoped>
.login-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100svh;
}
h1 {
  width: 100%;
  text-align: center;
}
</style>

Create the Login Page Route in src/router/index.js:

import { createRouter, createWebHistory } from "vue-router";
import Login from "../views/Login.vue";

const routes = [
  { path: "/login", name: "Login", component: Login },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

Mount the router in main.js file at src/main.js:

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

createApp(App).use(router).mount("#app");

Need help? Join our community.

Getting started

Development

Examples

API Reference

Install Bawanah Library

Create Callback Route using Express.js

​Install Bawanah Library

​Create Callback Route using Express.js

​Create Login Page

Install Bawanah Library

Create Callback Route using Express.js

Create Login Page