> For the complete documentation index, see [llms.txt](https://readme.directual.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://readme.directual.com/api-integrations/other-integrations/interface-builders/integration-with-bubble.io/authorisation-connect-user-on-directual-to-bubble.md).

# 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