# Authorization

## 1. Prepare Bubble.com

Create a login page on Bubble.com with 2 fields: one for the login and another for the password, along with the Login button.

it may look something like this:

![](/files/-Mah_wSWzK2xbRX40nLn)

Next, click the Plugin button and add ***API connector*** to you project. You plugin page will look like this:

![Plugin page](/files/-MahaMbtFcx5VmeotVJL)

Click on ***API Connector,*** then click ***Add another API***.

1. Set API name to ***Directual auth*** 
2. Name it ***API auth v5***
3. Set use as ***Action***
4. Set POST address: <https://api.directual.com/good/api/v5/auth?appID=XXX>, when XXX you API token, which you could find in you project' API section under r API KEYS
5. Add 3 parameters: **provider** with the value "rest", **username** with the value "test", and remove the flag "private"

Now you have an API integration with Directual.com.

![](/files/-MahcDZRmFhRX6eRLceX)

## Prepare Directual

For testing the integration, open you project and navigate to **Database** to find the **App User** structure

![](/files/-Mahdjps0M3h79JMPPNc)

Press **New object** to create the first user

![](/files/-MahdqO_Z_ZGrazNsZPH)

And fill in the ID with value "test" and **password** with value "test".

After filling the "password" field, please, click to convert to hash, because, since your application doesn't store user passwords; it only stores hash.

![](/files/-MahddM8frQURI0TubxY)

The form with data should look like this:

![](/files/-MahdNCb-WrR0CuZ-MkB)

Saving you first user

## Creating flow on Bubble for user authorization

Go to the integration on Bubble.com and expand your "Directual auth" integration.

Please, click to "initialization call" to get a result on Directual.com. You will see the following popup:

&#x20;&#x20;

![](/files/-MaheXUh6p9jQwb_C53j)

Click to save, and then remove the default value "test" the from parameters.

![Parameters on integration without default values.](/files/-MahemNrr-1hQyJkenvd)

Design section

In the Design section, add an alert component. Click the "Login" button, and then click to start/edit the workflow.

![](/files/-MahkJoQs9E72szHqXSk)

### Step 1. Validation

![](/files/-MahsFVedwxtuPhgPQND)

Add "Show message in alert box". Fill the message text with: "Please, fill valid login and password". Then add the condition: "Input login's value is empty"

![](/files/-MahsXCYW_WDXKfS0IVj)

### Step 2. Integration with Directual

Add a new step to the workflow.

![](/files/-Maht4LF09r-q6XDQBKm)

![](/files/-Maht8QOCfAG8LcdSC3R)

#### Step 3. Alert with message&#x20;

Add an alert message like similar to step 1, providing information that user has been logged in **if the token is not empty.**

![](/files/-MahtTDQT9qbsKpkxftY)

### Step 4. Reset login and password after login

Add a step with the category "Element actions" -> "Reset inputs"

### Step 5. Save you token for use as session id with request on Bubble pages

Go to the plugin page, and install "session and local storage"

![](/files/-MahuT6O_uP5VVK7O-zy)

Add "Web Storage" to your page

![](/files/-Mai3Dyq9pI2mPyIW4Da)

Go to the flow editor and add a new step:&#x20;

![](/files/-Mai3SW3FXq_S78XWVAM)

Set key = sessionID

Set value = result of step2' token


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://readme.directual.com/api-integrations/other-integrations/interface-builders/integration-with-bubble.io/authorisation-connect-user-on-directual-to-bubble.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.