# Bubble [Bubble](https://bubble.io/) is a no-code platform for building web apps. Its API allows Bravo to connect and use it as a backend for your native app. {% hint style="info" %} UPDATE — Since this article was written we have added a custom login feature which simplifies authorising requests. [Learn more about custom authentication.](https://docs.bravostudio.app/integrations/user-authentication/authentication-with-custom-backend) {% endhint %} There are a lot of Bubble apps out there, but as its web based there are sometimes when you want to able to create a native mobile app version as well. Using Bravo Studio you can create a native mobile application and connect it to you Bubble App using APIs. In this tutorial I will show you how to connect a Bravo Studio App to a Bubble backend and authenticate using Bubble. To access the Bubble APIs you will need to have a paid plan for you Bubble App. ## A) Setting up Bubble 1. Create a new Bubble App * Go to settings -> API and tick the boxes to enable the workflow API, data API, and user. Record the Workflow API root URL as you will need it later. ![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FI2vTfVq7Smv9U057Jmit%2F1_uxrFaPXfhK2Rit3e34t2SQ.png?alt=media\&token=7b32f7b9-03a8-4bba-879c-cb37a4a9ea1f) * This will enable you to see the backend workflow editor in the top left dropdown. ![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FKOWCOcWC14oOxEAdJgV5%2F1_4wdy5Tv6mtM_DFsb21c6rA.png?alt=media\&token=09114c06-b0ea-4931-ac85-f7ccf9c444df) 2\. Go into the backend workflow editor and add a new workflow (General -> New API workflow…) ![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FzHgOL47DmVuvVk4xm63X%2F1_ANYESOTehMOFsDEIEF4ioQ.png?alt=media\&token=f4afaed3-a832-434f-abfd-7d651cd6da29) * Call the new backend workflow `login` and enable it to run without authentication. Also add in two parameters `email` and `password` which will be the parameters used to do the authentication as below. ![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FFikEwMRC2zs6jkQcThfX%2F1_DtVRMeoqS8iWXVVn3612tg.png?alt=media\&token=e9de3b12-de6b-4255-a5cf-e211d7a33add) 3\. Click to add an action and add an action to sign the user in (Account -> Log the user in). ![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FXxAtUg6YKIC0AfOUIJ3p%2F1_PforvAtbwV7Gg787cHUhCA.png?alt=media\&token=2f3ac119-7e88-43eb-b26a-e24e7e40268f) * Complete the details for this step by connecting the email and password to the email and password field of the endpoint. Also choose “yes” to remember the email. ![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FX0H74NckTEEvyCPGSf5O%2F1_AATWmCIttd95MverSJd6_Q.png?alt=media\&token=56b4b138-d1d7-4c46-91f1-23b56c556987) 4\. In the workflow editor add another workflow this time called signup, again allow it to be run without authentication and add email and password parameters. ![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2F9IisqYdrvYRCk2jPTJuY%2F1__lhbbhYHKr9BOgv3dx4Q-Q.png?alt=media\&token=577ee0b1-9356-44c0-bf24-fc845c371ecf) 5\. For this signup workflow add an action to sign the user up (Account -> sign the user up). ![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FOE5g7tE3h5EEx39nJLHO%2F1_9t_YVmNymqV8FjWcGAqaXw.png?alt=media\&token=aed75977-7117-49cc-8e98-44b615dff6e6) 6\. Complete the details for this step by connecting the email and password to the email and password field of the endpoint. Also choose “yes” to remember the email. ![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2Fi65FXdijEOquIWEsKRW8%2F1_pkaWdU_qKpr5asQ-OE-PKA.png?alt=media\&token=8df14477-5d44-423c-8435-45d191ba3930) * The login and signup APIs are now ready to be used for your Bubble app. The signup API is `/signup` and the login URL is `/login` (using the root URL from step A1). ## B) Setting up Bravo API access 1. First you need to login to Bravo (you can signup for free [here](https://projects.bravostudio.app/signup?utm_campaign=bubble-bravo-article\&utm_medium=referral\&utm_source=medium)) 2. Next import this example app file (we are only going to use the login and signup screens for this exercise, but for your own apps you can just copy these to another figma file). 3. Click on `API Library` in Bravo on the left hand side. Click on `New Collection.` Click on ‘Blank Request’ and Name it `Foodgram Bubble Example` 4. Click on the + button next to Requests to add a new request for each of the following 2requests (NB the `` comes from step A1 above. * Signup ``` Name: Signup Type: POST Request URL: /signup Headers : None Parameters: Key = email, Value = noone@none.com Key = password, Value = noone Body (JSON): { "email" : "${email}", "password" : "${password}" } ``` Once you have inputted the above hit the blue `send` button for this request to create the test user and to check everything is working okay. * Login ``` Name: Login Type: POST Request URL: /login Headers : None Parameters: Key = email, Value = noone@none.com Key = password, Value = noone Body (JSON): { "email" : "${email}", "password" : "${password}" } ``` Once you have inputted the above hit the blue `send` button for this request to get sample data to allow the received data to be setup for this request. Make sure the `.data.response.token` field is ticked and then in the `Selected Data` tab change the field’s name to `token`. We can reference this name as a variable in other requests to allow the request to pass authentication. ## C) Bind APIs to Design in Bravo Now that we have the APIs in Bravo the last step is to connect them to the app design. Go into the `Foodgram Bubble Example` app in Bravo so you can see all the screens. 1. Signup Click on the `Signup` screen to edit the binding for this screen, choose the `Foodgram Bubble Example`collection and then the `signup` request * In the `Select Visual Elements` list Click on the `username` element and connect it to `email` in the binding panel on the right hand side in the `Content Destination` section. This will bind the input field to this variable which will be used in the request. * Click on the `password` element and connect it to the`password` in the binding panel on the right hand side * Change `Response Actions — on success` to `Go to Page — Login`. * Change Response Actions — on failure to `Show Alert` with the text ‘`Signup Failed`’ 2\. Login Click on the `Login` screen to edit the binding for this screen, choose the `Foodgram Bubble Example`collection and then the `login` request * In the `Select Visual Elements` list Click on the `username` element and connect it to `email` in the binding panel on the right hand side in the `Content Destination` section. This will bind the input field to this variable which will be used in the request. * Click on the `password` element and connect it to the`password` in the binding panel on the right hand side * Change `Response Actions — on success` to `Go to Page — Home Screen`. * Change Response Actions — on failure to `Show Alert` with the text ‘`Login Failed`’ You have now connected you Bravo App to Bubble for Authentication. If you need to make later requests that need Authentication, you can just add a Header with Key: `Authorization` and Value : `Bearer ${token}`. As Bravo remembers the token at login (we named `.data.response.token` as `token` in step B), we can pass it to later requests. {% hint style="info" %} This tutorial was [originally posted in Medium](https://medium.com/geekculture/creating-native-mobile-apps-from-bubble-applications-using-bravo-studio-a75c4c592d5d) By Toby Oliver, CEO of Bravo {% endhint %}