Create and edit user profile (Firebase + Airtable)
Learn how to allow users to create and edit user profiles, using Firebase for authentication and Airtable as the app backend.
Last updated
Learn how to allow users to create and edit user profiles, using Firebase for authentication and Airtable as the app backend.
Last updated
In this tutorial, we’ll use Firebase email-based authentication combined with post-login to create a user onboarding flow, where new users can add more information about them. Also, we’ll create a page where users can edit their profile information. We’ll use Airtable as our backend to store the user information.
You can follow this tutorial step by step to create the same use case we'll be showing, and you can also adapt it to your specific app.
In this tutorial, we’ll use the Figma file below, with all the tags required to implement the Firebase email-based authentication and post-login flow. Feel free to duplicate it and customize it as you need, before importing it into Bravo to create a new app project. You can also import it as it is.
Before continuing with the tutorial, you’ll need to set up a Firebase project in order to use Firebase authentication. Follow this guide to do that. You can skip the design section, since the necessary tags are already included in the design file we provided above.
As you’ll see, you’ll need to generate some files in Firebase and upload them to your Bravo app settings to enable Firebase authentication.
We'll use Airtable to store the user profile information. In case you haven't done that already, create a free account and a base to store the user information.
In this example, we created the following fields, which match the input fields for the forms where users can create and edit the profile information:
Name (text field)
Surname (text field)
Age (numeric field)
UserID (text field)
Last Modified. We created this field to be able to sort the table by edit date and time. This is important in order to retrieve the correct user profile data later on.
You can duplicate the base below to get started:
Once we have our design and backend ready, it's time to create all the API requests that are needed to connect our app and the backend. In case you haven't done so, import the Bravorized example design file (or your own file), with all the necessary Bravo tags, to create a new app project.
After creating your app project, create a new API collection. You can use the Airtable wizard with your Airtable base, which will already generate a few API requests for you.
In case you use the wizard, note that you'll need to edit these requests and create new ones to match the ones we'll describe below. You can duplicate the ones created with the wizard, which will already contain the Airtable base URL and API key.
GETWe'll use this request to obtain the user profile data, by providing a user ID, filtering the Airtable base by this user ID (using filterByFormula), and returning the data associated to that user. This is necessary in order to load values for the input fields in the page to edit the user profile, and allow the user to change them.
It's important that we also include the Airtable view name, since this will keep the data records sorted in the same way as in the table (by latest modified). This is done to make the data management more robust: in case a user, for some reason, submits profile information under the same user ID more than once, we'll only use the latest data.
Replace <BASE_ID>, <TABLE_NAME> and <VIEW_NAME> with the corresponding values for your table.
To test the request, you'll need to use a test value for the ${user.id} variable. You can fill in a dummy value in your Airtable base, and reuse this value in the API request:
After testing the request successfully, select all the items related to the user profile. In this case, we don't want to create a list, but rather get the values for one specific user, which is one row in the Airtable base. Therefore, it's very important that you select the 0 index in the dropdown for the .data.records path. These data items will correspond with the latest profile information for the specific user ID we provided in the request - in case there's more than one row for that user ID, we'll always use the data for the "latest modified" one.
Finally, go to the "Output Variables" tab and set the following names for the data items you've selected. It's very important that you set the name indicated below for the profile ID, since we'll be using the same name in later steps and any misspelling will make the feature not to work properly.
POSTWe'll use this request for the form where users can create a profile in the app onboarding. To do that, we'll use the following request URL and JSON body:
In the request URL, replace <BASE_ID> and <TABLE_NAME> with the corresponding values for your table.
JSON body:
You can use some test values here as well to test the request. Since this is a POST request that we'll use to submit the user onboarding form, we don't need to select any data for binding - we'll only use the request to send data to Airtable.
PATCHFinally, we'll need a PATCH request to allow a user edit the profile information they submitted in the onboarding (for instance, change the name or the age). This PATCH request will target the specific row we obtained in the Get User Profile request, and change it with the new information the user submitted. We'll use the URL and JSON body indicated below for the request.
In the request URL, replace <BASE_ID> and <TABLE_NAME> with the corresponding values for your table.
JSON body:
Note that we're using here a variable called ${profile_id} as the record ID value. As you remember, we indicated the same name for the data item that returns the record ID in the Get User Profile request. These two names must match for the feature to work properly, since this is how Bravo knows which ID value to pass to the PATCH request, so it targets the correct table record.
Now, you can use some test values to test this PATCH request. Make sure you indicate a valid profile_id, you can get one from the Get User Profile request as shown below:
Remember to set the headers of all the requests with the same Authorization!
Once the API requests are created, it's time to bind them to the necessary app screens. We'll need to bind two screens:
The page where new users create a new profile in the onboarding
The page where existing users can edit the profile information they submitted in the onboarding.
This is the screen created with the post-login functionality, where new users who register will navigate after registering with their email and password. The screen is called "user-profile" in our design example.
We'll bind the variables in the Post User Profile request to the form input fields in this screen, so a new record is created in Airtable with the new user profile. As you can see in the screenshot below, we'll bind the "Input Destination" property of the input fields to the corresponding variable.
Finally, we'll make the users navigate to the "success" screen in case they created the user profile successfully, and show an error alert in case the API request was unsuccessful.
In this page, we'll allow existing users to change their profile information.
We'll bind the "Value" property of the input fields to the Get user profile request. This way, a user goes to this screen, they'll see the current profile data populate in the input fields. Then, they'll be able to edit as many fields as they wish.
Secondly, we'll bind the "Input Destination" property of the fields to the Edit user profile request. This way, when they submit the form, the new profile information will be sent to Airtable, and the corresponding table record will be updated with the information provided in the form. In case a user doesn't change all the fields, the information obtained with the "Value" property binding will be sent along - therefore, those data fields won't change.
Finally, we'll also set up an alert, so the user knows that the profile was edited successfully, or that an error happened.
That's it! The user profile feature is now ready to be used. Feel free to test the feature in Bravo Vision and to add it to your existing apps.
