Quick Start

Create Bawabah App

Start By Creating an app on bawabah.app.

Front-end

Implement Bawabah in your website by using our Hosted Login page or Login Form.

Back-end

Capture users’ data after they login to your site with Bawabah.

Create Your First App

Login to your Bawabah Developer Account: https://bawabah.app/dev/login.
Click “New App” button to create a new App.
Set up Your App by adding App Logo and App Name, and Add At least 1 callback URL.
Regenerate your AppSecret, then copy appId and appSecret For Later Use.

When you create a new app, your app will be in Sandbox Mode, meaning only the developer or test users, if any, can log in with their email. To make your app accessible to the public, remember to request App Review after completing your app integration.

Front-end

There are two ways to use Bawabah in your project:

Hosted Login

A login page hosted on Bawabah website redirects user to your website after login.

Form Login

A login form can be used anywhere on your website.

Edit the URL below to access your login hosted page:

https://bawabah.app/login?appId={your-app-id}&callbackUrl={your-callback-url}&fullscreen=true

Replace {your-app-id} with your appId and {your-callback-url} with your callback URL From Create Your First App Step.

When users click the login button on your website, they are redirected to the hosted login page URL. After completing the login process, they will be redirected back to your website via the callback URL, which includes a sessionId query parameter for the user session to capture. For Example:
If your appId is 4y83w4f And your callback URL is https://mywebsite.com/login/callback Then the hosted login URL will be https://bawabah.app/login?appId=4y83w4f&callbackUrl=https://mywebsite.com/login/callback&fullscreen=true If you followed the last step (Setup Hosted Login) no need to set up a login form. Alternatively, if you wish to host the login form on your own website, you can follow the guide on Form Login.

Back-end

In case you use a language other than Node.js or you prefer to integrate with Bawabah API manually, please refer to our API Reference.

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"
});

// Import Bawabah Library
const Bawabah = require('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 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

	// Capture user session from Bawabah
    const result = await bw.capture(sessionId);
    console.log(result); // Log User Data -- for Debugging --

    res.json({ loggedIn: true });
});

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

    // Capture user session from Bawabah
    const result = await bw.capture(sessionId);
    console.log(result); // Log User Data -- for Debugging --

    res.json({ loggedIn: true });
});

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

Finally, after testing the implementation, we can add our Login/Signup logic and wrap the code in a try/catch block to catch any errors:

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

Discover more

Continue discovering Bawabah:

Login Page

Leading Login Solution.

Form Login

Customize Bawabah login form on your website.

Back-end

Connect to Bawabah API.

Examples

Code implementation Examples.

Getting started

Development

Examples

API Reference

Create Your First App

Front-end

Hosted Login

Form Login

Back-end

Install Bawanah Library

Create Callback Route

Discover more

Login Page

Form Login

Back-end

Examples

​ Create Your First App

​ Front-end

Hosted Login

Form Login

​Setup Hosted Login

​Setup Form Login

​ Back-end

​Install Bawanah Library

​Create Callback Route

​Discover more

Login Page

Form Login

Back-end

Examples

Create Your First App

Front-end

Setup Hosted Login

Setup Form Login

Back-end

Install Bawanah Library

Create Callback Route

Discover more