> ## Documentation Index
> Fetch the complete documentation index at: https://docs.bawabah.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Vue

> Vue Example.

<Warning>
  This Example has not been tested yet. If you face any issues, please contact us at [contact@bawabah.app](mailto:contact@bawabah.app)
</Warning>

### Install Bawanah Library

First, we have to install Bawabah Library from NPM ([https://www.npmjs.com/package/bawabah](https://www.npmjs.com/package/bawabah)) using the command:

```
npm i bawabah
```

After installing the npm Package, we can start using it immediately:

<CodeGroup>
  ```typescript index.ts theme={"dark"}
  // 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"
  });
  ```
</CodeGroup>

> Replace `{your-app-id}` with your appId and `{your-app-secret}`with your appSecret From [Create Your First App](/getting-started/en/quickstart#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
```

<CodeGroup>
  ```typescript index.ts theme={"dark"}
  // 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}`);
  });
  ```

  ```javascript index.js theme={"dark"}
  // 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}`);
  });
  ```
</CodeGroup>

<Note>
  **Need help?**  Join our [<u>community</u>](https://discord.gg/9YpqwdNpxy).
</Note>

## Create Login Page

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

<CodeGroup>
  ```html src/views/Login.vue theme={"dark"}
  <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>
  ```
</CodeGroup>

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

<CodeGroup>
  ```javascript src/router/index.js theme={"dark"}
  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;
  ```
</CodeGroup>

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

<CodeGroup>
  ```javascript src/main.js theme={"dark"}
  import { createApp } from "vue";
  import App from "./App.vue";
  import router from "./router";

  createApp(App).use(router).mount("#app");
  ```
</CodeGroup>

<Note>
  **Need help?**  Join our [<u>community</u>](https://discord.gg/9YpqwdNpxy).
</Note>