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

# Hosted Login

> Setup Bawabah Hoseted Login Solution.

## Hosted Login Flow

<img src="https://mintcdn.com/iehasa/3HrAqnpWMbH53XXh/images/development/bawabah-hosted-login-flow-en.png?fit=max&auto=format&n=3HrAqnpWMbH53XXh&q=85&s=658dbdc32374c3185151309f09bb227f" alt="Bawabah Hosted Login Flow En Pn" title="Bawabah Hosted Login Flow En Pn" className="diagram mx-auto" style={{ width:"67%" }} width="1500" height="1804" data-path="images/development/bawabah-hosted-login-flow-en.png" />

## Setup Hosted Login

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](/getting-started/en/quickstart#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`

And this is what your users will see when they visit your hosted login page:

<img src="https://mintcdn.com/iehasa/3HrAqnpWMbH53XXh/images/development/page-login-en.png?fit=max&auto=format&n=3HrAqnpWMbH53XXh&q=85&s=4d9efdc85636efa5ccbdad737b9c5a5f" alt="Page Login En Pn" width="2560" height="1267" data-path="images/development/page-login-en.png" />

## Design & Customization

Your hosted login page can be customized further using CSS, Learn more in [Customization](/custom/en).