Bubble
How to connect Bubble with Bravo Studio
Bubble 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.
UPDATE — Since this article was written we have added a custom login feature which simplifies authorising requests. Learn more about custom authentication.
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.
- 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.
- This will enable you to see the backend workflow editor in the top left dropdown.
2. Go into the backend workflow editor and add a new workflow (General -> New API workflow…)
- Call the new backend workflow
loginand enable it to run without authentication. Also add in two parametersemailandpasswordwhich will be the parameters used to do the authentication as below.
3. Click to add an action and add an action to sign the user in (Account -> Log the user in).
- 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.
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.
5. For this signup workflow add an action to sign the user up (Account -> sign the user up).
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.
- The login and signup APIs are now ready to be used for your Bubble app. The signup API is
<Workflow API root URL>/signupand the login URL is<Workflow API root URL>/login(using the root URL from step A1).
- 1.
- 2.Next import this example app file https://www.figma.com/file/hfnAB1WYyhml2cjCiQ6I79/Foodgram-Bubble-Example?node-id=0%3A1 (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 Libraryin Bravo on the left hand side. Click onNew Collection.Click on ‘Blank Request’ and Name itFoodgram Bubble Example - 4.Click on the + button next to Requests to add a new request for each of the following 2requests (NB the
<Workflow API root URL>comes from step A1 above.
- Signup
Name: Signup
Type: POST
Request URL: <Workflow API root URL>/signup
Headers : None
Parameters:
Key = email, Value = [email protected]
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: <Workflow API root URL>/login
Headers : None
Parameters:
Key = email, Value = [email protected]
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.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 Examplecollection and then the signup request- In the
Select Visual Elementslist Click on theusernameelement and connect it toemailin the binding panel on the right hand side in theContent Destinationsection. This will bind the input field to this variable which will be used in the request. - Click on the
passwordelement and connect it to thepasswordin the binding panel on the right hand side - Change
Response Actions — on successtoGo to Page — Login. - Change Response Actions — on failure to
Show Alertwith the text ‘Signup Failed’
2. Login
Click on the
Login screen to edit the binding for this screen, choose the Foodgram Bubble Examplecollection and then the login request- In the
Select Visual Elementslist Click on theusernameelement and connect it toemailin the binding panel on the right hand side in theContent Destinationsection. This will bind the input field to this variable which will be used in the request. - Click on the
passwordelement and connect it to thepasswordin the binding panel on the right hand side - Change
Response Actions — on successtoGo to Page — Home Screen. - Change Response Actions — on failure to
Show Alertwith 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.Last modified 10mo ago