# 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: ![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-MahXoBfzHT8d-I8LuKy%2F-Mah_wSWzK2xbRX40nLn%2Fimage.png?alt=media\&token=976d8166-97c5-40c5-bdc5-ecb989742f19) Next, click the Plugin button and add ***API connector*** to you project. You plugin page will look like this: ![Plugin page](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-MahXoBfzHT8d-I8LuKy%2F-MahaMbtFcx5VmeotVJL%2Fimage.png?alt=media\&token=256afa4f-56aa-4389-8103-dc0d08693ba4) 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: , 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. ![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-MahXoBfzHT8d-I8LuKy%2F-MahcDZRmFhRX6eRLceX%2Fimage.png?alt=media\&token=558dfeb6-cca5-44ec-ab22-10d69834a7f5) ## Prepare Directual For testing the integration, open you project and navigate to **Database** to find the **App User** structure ![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-MahXoBfzHT8d-I8LuKy%2F-Mahdjps0M3h79JMPPNc%2Fimage.png?alt=media\&token=8c1d8ff8-7486-4b76-942c-581576bb3fb0) Press **New object** to create the first user ![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-MahXoBfzHT8d-I8LuKy%2F-MahdqO_Z_ZGrazNsZPH%2Fimage.png?alt=media\&token=4cc062f2-7b56-4eb5-8317-a7cf0a3eaad1) 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. ![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-MahXoBfzHT8d-I8LuKy%2F-MahddM8frQURI0TubxY%2Fimage.png?alt=media\&token=0457e286-cf44-4354-a365-e93d5f793dc0) The form with data should look like this: ![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-MahXoBfzHT8d-I8LuKy%2F-MahdNCb-WrR0CuZ-MkB%2Fimage.png?alt=media\&token=77444d23-4feb-44f9-a9e7-ec767455b5cc) 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: ![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-MahXoBfzHT8d-I8LuKy%2F-MaheXUh6p9jQwb_C53j%2Fimage.png?alt=media\&token=d0ef7593-020f-4d1f-a3d1-655f65d476c0) Click to save, and then remove the default value "test" the from parameters. ![Parameters on integration without default values.](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-MahXoBfzHT8d-I8LuKy%2F-MahemNrr-1hQyJkenvd%2Fimage.png?alt=media\&token=7f889e12-e84d-4a2a-9e92-e30ad29b5bee) Design section In the Design section, add an alert component. Click the "Login" button, and then click to start/edit the workflow. ![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-MahXoBfzHT8d-I8LuKy%2F-MahkJoQs9E72szHqXSk%2Fimage.png?alt=media\&token=e0e22a2d-7138-44f9-a4c3-1ed87024de44) ### Step 1. Validation ![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-MahXoBfzHT8d-I8LuKy%2F-MahsFVedwxtuPhgPQND%2Fimage.png?alt=media\&token=a8159f4c-0614-463b-9b1d-92b80e621b29) 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" ![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-MahXoBfzHT8d-I8LuKy%2F-MahsXCYW_WDXKfS0IVj%2Fimage.png?alt=media\&token=72176ce1-41e7-48d3-9162-3b1faf8b918c) ### Step 2. Integration with Directual Add a new step to the workflow. ![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-MahXoBfzHT8d-I8LuKy%2F-Maht4LF09r-q6XDQBKm%2Fimage.png?alt=media\&token=be67c0ca-e60a-437b-8c77-e509a6e09f43) ![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-MahXoBfzHT8d-I8LuKy%2F-Maht8QOCfAG8LcdSC3R%2Fimage.png?alt=media\&token=7dd359c3-4fa9-45e9-9b92-dbca07cc25e8) #### Step 3. Alert with message Add an alert message like similar to step 1, providing information that user has been logged in **if the token is not empty.** ![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-MahXoBfzHT8d-I8LuKy%2F-MahtTDQT9qbsKpkxftY%2Fimage.png?alt=media\&token=e7d60206-c4c6-439e-94d7-0b839a636409) ### 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" ![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-MahXoBfzHT8d-I8LuKy%2F-MahuT6O_uP5VVK7O-zy%2Fimage.png?alt=media\&token=a228d1fa-a7d8-4a9e-8018-8a75b7f1b45f) Add "Web Storage" to your page ![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-MahXoBfzHT8d-I8LuKy%2F-Mai3Dyq9pI2mPyIW4Da%2Fimage.png?alt=media\&token=f24565e4-60d4-44ca-8785-2e499cd5b9c8) Go to the flow editor and add a new step: ![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4Nnmtk9_gFGWOddsf6%2F-MahXoBfzHT8d-I8LuKy%2F-Mai3SW3FXq_S78XWVAM%2Fimage.png?alt=media\&token=1310e66d-b4dd-4233-83c1-a1aee8f9cbcc) Set key = sessionID Set value = result of step2' token