What is Supabase?

Supabase is a complete backend service that provides to Postgres database, authentication, instant RESTful APIs, and real-time subscriptions. It allows organizing data in a table format with the flexibility of running SQL queries.

Integrating Draftbit & Supabase

Setup steps in Supabase

If you do not have a Supabase account, create one here. The initial step to create a new database are:

  • After logging in, you will be welcomed by the All Projects screen.
  • Click New Project to create a new database.
  • Choose an organization from the modal, enter the project's name, password of Project, select a region to host it, and then click the Next button.

After initializing a project in Supabase, you get the option to create a new table. We are using a custom data table for this documentation in a database called Books with custom data fields and values.

For this guide, we will use Supabase to create a data table from scratch. Here is how the example data table with pre-populated data looks like:

To utilize the data from the Supabase inside a Draftbit app, let's use its REST API service. Supabase generates an OpenAPI spec for every table in your database. To connect the REST API in the Draftbit app, the following steps are required to be followed:

Get the RESTful endpoint and Project API key

To connect the REST API in the Draftbit app, the following fields are required:

  • Base URL of the REST API, which is in the format: https://<your-domain>.supabase.co/rest/v1 where the <your-domain is a unique domain name generated by Supabase.
  • The supabase-key is the secret key.

You can find these unique values in the API settings of your Supabase account.

  • Click the Settings button from the top menu bar.
  • In Settings, select API.
  • In the Project API Keys section, select and copy the API key under anon. It will be required for every request made to the Supabase database.
  • Also, under Config, select and copy the URL. It is the Base URL of your Supabase REST API. It will be requirest to make a connection to the Draftbit app.

Setup steps in Draftbit

Save Supabase API key as Authorization Header in Draftbit

To authorize your Draftbit app with Supabse, in the builder interface:

  • Open the Settings tab from the top menu bar.
  • In Project Settings, navigate to App Variables.
  • Enter a name to access the API Key such as Authorization_Header. When making the service connection in the next section, it will be passed as the value for the header Authorization.
  • The value of this key requires you to enter an authorization token that starts with syntax Bearer <your-api-key> (the space between Bearer and ` is required). Click Add after adding the value.
  • Enter another key name to access the API Key such as Api_Key_Header. When making the service connection in the next section, it will be passed as the value for the header apiKey.
  • The value of this key requires you to enter an authorization token that starts with syntax is <your-api-key>. Click Add after adding the value.
  • Click Save to save these keys and close the modal.

Add Supabase RESTful endpoint in Draftbit

In your Draftbit builder interface:

  • Open the API & Cloud Services tab from the top menu bar.

  • From the Connect a service menu, click on Rest API.

  • In Step 1: Enter a name for your REST API. Then, paste your Base URL (from the first section) into the Base URL field.

  • In Step 2: Under Key add Authorization and apikey. Under Value, select the global variables (from the previous section) to add the actual values for both keys.

  • Click Save.

Making API requests with Supabase & Draftbit

GET request to Fetch all records

In this section, let's populate a Fetch component with all the data from a simple Supabase and then display the data fetched from the Supabase data table in a List component.

For reference, here is a how the Components tree looks like for this screen:

The next step is to create an endpoint. Let's try fetching the all data using a GET HTTP request. Select the Supabase service in the API & Cloud Services modal, and then:

  • Click Add endpoint.
  • In Step 1: enter the name for the endpoint. Make sure the Method select is GET.
  • In Step 2: add the base name path: /your-table-name/select=*.
  • In Step 4: click the Test button next to the Endpoint input to verify the response coming from the Supabase.
  • Click Save.

On app screen:

  • Select the Fetch component in the Components tree and go to the Data tab from Properties Panel.
  • For Service, select the name of the Supabase Service.
  • For Endpoint, select the endpoint you want to fetch the data from.
  • Select the List component in the Components and go to the Data tab from Properties Panel. In Data, select Top-Level Response from the dropdown menu.
  • Then, select the Text component in the Components and then go to the Data tab from the Properties Panel.
  • Add a {{varName}} value (inside the curly braces) to represent a column field from the Supabase. For example, we add {{title}} to represent the column name from the Supabase Base.
  • Under Variables, you will see the variable name defined in the previous step. From the dropdown menu, select the appropriate field that represents the data field.

GET request to fetch a single row

In this section, let's populate a Fetch component with all the data from a simple Supabase and then display the data fetched from the Supabase data table in a List component. For reference, here is a how the Components tree looks like for this screen:

🚧

When fetching a single item, Supabase RESTful API returns the data in an array. To display the single item on the Draftbit app screen, it is mandatory to nest the List component inside the Fetch component.

Also, from the List screen, we are sending the id of each list item as a navigation parameter when an action is triggered on the Touchable/Button component. This action will let you navigate to the screen where a single record is fetched and its details are shown.

To fetch a single post from Supabase, you'll have to specify a record id that is coming from the navigation parameters.

Open the API & Cloud services modal from the top menu, select the Supabase service, and then:

  • Click Add endpoint.
  • In Step 1: enter a name for the endpoint.
  • In Step 2: add the /your-table-name/column-name=eq.{{column-name}} variable. Then, add a Test value for the {{column-name}}. For example, it can be the title or the id.
  • In Step 4: click the Test button next to the Endpoint input to verify the response coming from the Supabase.
  • Click Save.

On app screen:

  • Select the Fetch component in the Components tree and go to the Data tab from Properties Panel.
  • For Service, select the name of the Supabase Service.
  • For endpoint, select the endpoint you want to fetch the data from.
  • Set the value for the id in the Configuration > URL Structure section to Navigation > id.
  • Select the List component in the Components and go to the Data tab from Properties Panel. In Data, select Top-Level Response from the dropdown menu.
  • Then, select the Text component in the Components and then go to the Data tab from the Properties Panel.
  • Add a {{varName}} value (inside the curly braces) to represent the column field from the Supabase. For example, we add {{title}} to represent the field and value from the Supabase data table.
  • Under Variables, you will see the variable name defined in the previous step. From the dropdown menu, select the appropriate field that represents the data field.

POST request to submit a new row

Submitting new Data from the Draftbit app to a REST API requires the request to be sent using the HTTP POST method.

Your component needs to have:

  • accepts user input
  • has a Field Name prop

You can use any component that contains a Field Name prop to log user input and submit data. This list of components currently includes:

Once you have the necessary component(s) on your screen, you'll need to create a new endpoint in your Supabase service:

  • Click Add endpoint.
  • In Step 1: enter a name for the endpoint and select the Method to POST.
  • In Step 2: enter the base name as path: /your-table-name.
  • In Step 3: add a valid Body structure to submit a POST request. Add one or many {{variable}} for test values. Click Body Preview to validate the structure of the Body in the request.
  • In Step 4: to see the new row added to the Supabase data table as JSON response inside the Builder, you have to pass a new header called Prefer with its value as return=representation.
  • In Step 5: click the Test button next to the Endpoint input to verify the response coming from the Supabase and click Save.

An example of how Body in a request will look like:

{
"columnName": {{inputValue}},
}

Using a Touchable/Button component, you can trigger the action API Request to submit the data to the endpoint.

The textInputValue passed in the above example is the value of the Field Name property on the TextInput component:

PATCH request to Update a record

The PATCH request is used to update the single entry in the Supabase data table. It accepts similar input components as mentioned in the POST request and the API Request is triggered using a Touchable/Button component.

Your component needs to have:

  • accepts user input
  • has a Field Name prop to update data using an API Request

You can use any component that contains a Field Name prop to log user input and submit data. This list of components currently includes:

Once you have the necessary component(s) on your screen, you'll need to create a new endpoint in your Supabase service:

  • Click Add endpoint.
  • In Step 1: enter a name for the endpoint and select the Method to POST.
  • In Step 2: enter the base name as path: /your-table-name?columnName=eq.{{columnName}}. Then, add a Test value for the {{columnName}}.
  • In Step 3: add a valid Body structure to submit a PATCH request. Add one or many {{variable}} for test values. Click Body Preview to validate the structure of the Body in the request.
  • In Step 4: to see the new row added to the Supabase data table as JSON response inside the Builder, you have to pass a new header called Prefer with its value as return=representation.
  • In Step 5: click the Test button next to the Endpoint input to verify the response coming from the Supabase and click Save.

An example of how Body in a request will look like:

{
"columnName": {{newTitleValue}}
}

Using a Touchable/Button component, you can trigger the action API Request to update the data to the endpoint.

DELETE request to remove an existing record

The DELETE request is sent to the Supabase with an item's columnName to remove that particular record from the table. You can use a filter from Supabase to filter the value of a specific columnName.

For example, once you have the necessary component(s) on your screen, you'll need to create a new endpoint in your Supabase service. In the new endpoint you'll need to:

  • Click Add endpoint.
  • In Step 1: enter a name for the endpoint and select the Method to DELETE.
  • In Step 2: add /your-table-name/columnName=eq.{{columnName}}. Then, add a Test value for the {{columnName}}.
  • In Step 4: click the Test button next to the Endpoint input to verify the response from the Supabase.
  • Click Save.

You can add the DELETE endpoint to submit the data entered in the Draftbit using a Touchable or Button component to send the request to the API.

Authentication

Authentication is the way for the backend to handle app user registration and login and allows them access to certain areas or endpoints of the app. The process of authenticating a user typically needs the following steps in a mobile app:

  • Sign Up: Provide a form for a user to enter credentials to create a new account.
  • Log In: Provide a form for a user to enter credentials to authenticate their identity and login into the app.
  • Save the Authentication Token when a user's credential verifies with the backend service. Authentication Token is received as a response from the REST API service.
  • Making authenticated API requests.
  • Log Out: An action to reset authentication and return the client to an unauthenticated state.

📘

Implementing Authentication in a Draftbit app requires familiarity with features like Global Variables, Stacking Actions, Navigation Params, etc.

Learn more at what are the requirements when implementing a user authentication process in a Draftbit app at Intro to Authentication.

Supabase provides a user management system by assigning a unique ID to every new user who signs up. Using this unique ID, you can reference it in the database table(s). The user management is not exposed via public API for security reasons.

📘

Before implementing endpoints for authentication (from the sections below), refer to the documentation on how to add Global Variables for saving the auth token and error messages

Using it via REST API, you will need a bit of a setup to get started and use the email provider as the gateway to add authentication to your Draftbit app.

After you've created a project in your Supabase account:

  • From the top menu bar, select Authentication.
  • Select Settings in the sub-menu.
  • Under Email Auth settings, enable Enable Email Signup.

For example, when an app user signs up, their email and other related details are shown in the same window. Just switch from Settings to Users to see the table that stores each user's credentails.

When defining up Global Variables, make sure to define the following:

  • ERROR_MESSAGE: To handle and display error messages on form screens. Define it as an App Variable.
  • API_KEY_HEADER: To get the value for the apikey header, please refer to this section. Define it as an App Variable.
  • AUTHORIZATION_HEADER: To obtain and save the value of user token from Supabase. This identifies the user session initiated by the Login API endpoint in Supabase. Define it as a Device Variable.

When you create a new Supabase service for auth in the Data modal, make sure to add the apikey header in step 2.

Signup

To implement the signup process with the Supabase REST API service, you need to add the endpoint:

/signup

Open the Supabase service you have just created and follow the steps below to add an endpoint:

  • Click Add Endpoint.
  • In Step 1: enter a name for the endpoint and select the Method to POST.
  • In Step 2: enter the base name as path: /signup.
  • In Step 3: define the structure of the Body object that will be sent through the POST request. It's a JSON object that requires a key and a value. For the sign-up route, here is how we have defined the body structure for this POST request:
{
  "email": {{signupEmail}},
  "password": {{signupPassword}}
}

In the above snippet, using {{variable}} names to test the endpoint before using it in the rest of the app. You can provide test values for each of the {{variable}}. The more fields you have while signing up a new user in your app design, the more key and value pairs you can add to the Body structure.

Once you have created the body structure, click on the Body Preview to verify if the structure you have defined is valid to be sent with the POST request or not.

  • In Step 5: click the button Test. On success, the Supabase service will return the user object with details related to the record.
  • Click Save.

A typical Signup screen (see the image below) will have a Button/Touchable component in its Components to send the API request.

Stacking Actions

When sending an API request to signup a user using the endpoint created in the previous step, you will need to stack the following actions on a Button/Touchable.

Following actions will be stacked on the Signup screen.

  • To add an action, select the Button/Touchable component from the Components tree.
  • Then, in the Properties Panel, go to the Interactions tab.
  • Click the + (plus) button to add an action.

Here is the description of each action:

1. API Request

This API request comes back with an object in the response that contains the detail of the newly created user object.

  • Select the Service name.
  • Select the Endpoint. In this case, it's Signup.
  • Add a variable to store the Result Name. The variable assigned here will enable it to be used by subsequent actions.
  • In the Body, select the appropriate Field name property for each variable defined in the Body when setting up the endpoint, from the dropdown menu.

2. Parse JSON

This action is chained with the API Request action to parse the result from it with .json(). In the action:

  • Select the *Result Name from the previous action as the value of Response to parse**.
  • Assign a new Result Name variable. For example, signupResponseJson.

3. Extract Key: error message

In the action:

  • Select the value of the Input to be Result Name of the previous action. For example, signupResponseJson.
  • Add the Path value: .msg.
  • Add the Result Name: message.

4. Set Global Variable: Error Message

In the action:

  • In the Variable, select the Global Variable assigned for Error Message from the dropdown menu.
  • In the Value, select the Action Result message extracted from the previous action.

5. Conditional Stop

This action will stop the execution of any actions defined after it. It will check message field is present in the signupResponseJson. If it is, then the execution of the action will stop here. If it is not, the next action in the stack will be triggered. In the action:

  • In Check value, select message from the dropdown.

6. Navigate

This action helps to navigate to a screen for the user to enter their login credentials(for example, a Login screen). In the action:

  • In Destination, select the screen name from the dropdown menu.

Log in

To implement the signup process with Supabase REST API service, you need to add the endpoint:

/token?grant_type=password

Open the Supabase service you have previously created in the Draftbit app and follow the steps below:

  • Click Add Endpoint.
  • In Step 1: enter a name for the endpoint and select the Method to POST.
  • In Step 2: enter the base name as path: /token?grant_type=password.
  • In Step 3: define the structure of the Body object that will be sent through the POST request. It's a JSON object that requires a key and a value. The key should associate with the name of the field in the Supabase service. For the login route, here is how we have defined the body structure for this POST request:
{
  "email": {{loginEmail}},
  "password": {{loginPassword}}
}

In the above snippet, using {{variable}} names to test the endpoint before using it in the rest of the app. You can provide test values for each of the {{variable}}. The more fields you have while signing up a new user in your app design, the more key and value pairs you can add to the Body structure.

Once you have created the body structure, click on the Body Preview to verify if the structure you have defined is valid to be sent with the POST request or not.

  • In Step 5: click the button Test. On success, the Supabase service will return an encoded access-token and other details of the user in form of a user object. Using the value of this token you can make the authenticated API requests.
  • Click Save.

A typical Log in screen (see the image below) will have a Button/Touchable component in its Components to send the API request.

Stacking Actions

When sending an API request to log in a user using the endpoint created in the earlier step, you will need to stack the following actions on a Button/Touchable.

Following actions will be stacked on the Login screen.

  • To add an action, select the Button/Touchable component from the Components tree.
  • Then, in the Properties Panel, go to the Interactions tab.
  • Click the + (plus) button to add an action.

Here is the description of each action:

1. API Request

API Request is used to send the POST request to the endpoint token?grant_type=password. It comes back with an access_token, and other user-related data from the Supabase REST API service. In the action:

  • Select the Service name.
  • Select the Endpoint. In this case, it's Login.
  • Add a variable to store the Result Name. The variable assigned here will enable it to be used by subsequent actions.
  • In the Body, select the appropriate Field name property for each variable defined in the Body when setting up the endpoint, from the dropdown menu.

2. Parse JSON

This action is chained with the API Request action to parse the result from it with .json(). In the action:

  • Select the *Result Name from the previous action as the value of Response to parse**.
  • Assign a new Result Name variable. For example, loginResponseJson.

3. Extract Key: accessToken

Using the loginResponseJson value from the previous action, let's extract the accessToken. In the action:

  • Select the value of the Input to be Result Name of the previous action.
  • Add the Path value: ["access_token"].
  • Add the Result Name: accessToken.

4. Extract Key: error message

In the action:

  • Select the value of the Input to be Result Name of the previous action. For example, loginResponseJson.
  • Add the Path value: ["error_description"].
  • Add the Result Name: message.

5. Set Global Variable: Error Message

In the action:

  • In the Variable, select the Global Variable assigned for Error Message from the dropdown menu.
  • In the Value, select the Action Result message extracted from the previous action.

6. Conditional Stop

This action will stop the execution of any actions defined after it. It will check if the userToken value is present or not and if not, the action will stop the execution. Useful to implement after handling errors. In the action:

7. Set Global Variable: Authorization Header

In the action:

  • In the Variable, select the Global Variable assigned for Access Token from the dropdown menu.
  • In the Value, select the Action Result accessToken extracted from the previous action.
  • In transform with select the transform function AddBearerPrefix.

8. Navigate

This action helps an authenticated user (when the API request is successful) to navigate to a screen that is only visible to authenticated users (for example, a Home screen). In the action:

  • In Destination, select the screen name from the dropdown menu.

Authenticated API Requests

The authenticated API request allows the user to access data from the backend service that is only available if an app user is logged in (authenticated). This means that with each request sent, the access token as the value of the Authorization header is sent along.

Initially, when adding an authenticated endpoint, a real access token value is required to be passed as the Authorization header. It is recommended to save the actual auth token value in the Global Variable. In Supabase, you get the access token when testing a Sign up or Log in endpoint.

Once you have the token, save it in the Global Variable as shown below:

🚧

After testing all the authenticated endpoints set this Global Variable to its default value.

In the API generated by Supabase, you can also view which endpoint to get the complete user object (that is, requires an Authorization Header with access token value along with the API request).

To make an authenticated API request, the initial step is to add an endpoint to the API service.

  • Click Add Endpoint.
  • In Step 1: enter a name for the endpoint and select the Method to GET. (Depending on the API request you're sending, please make sure to set the HTTP method).
  • In Step 2: enter the base name as path: /user.
  • In Step 3: add the Authorization header and set its value to the Global Variable (which contains the access token).
  • In Step 4: click the Test button next to the Endpoint input to verify the response coming from the API service and then click Save.

In the example below, an authenticated API request of method type GET is constructed to get the logged-in user's data.

Using the Fetch component on the logged-in screen the above endpoint can be used to display the information.

Log out

To implement the logout process with Supabase REST API service, you need to add the endpoint:

/logout

When sending an API request to log in a user using the endpoint created in the earlier step, you will need to stack the following actions on a Button/Touchable.

To make a Logout API request, the initial step is to add an endpoint to the API service.

  • Click Add Endpoint.
  • In Step 1: enter a name for the endpoint and select the Method to POST.
  • In Step 2: enter the base name as path: /logout.
  • In Step 4: add the Authorization header and set its value to the Global Variable (which contains the access token).
  • In Step 5: click the Test button next to the Endpoint input to verify the response coming from the API service and then click Save.

Stacking Actions

In Draftbit, you will have to initiate this API request on a Logout button as well as delete the stored value of the access token in AUTHORIZATION_HEADER Global variable.

Following actions will be stacked on the Logout Button.

  • To add an action, select the Button/Touchable component from the Components tree.
  • Then, in the Properties Panel, go to the Interactions tab.
  • Click the + (plus) button to add an action.

1. API Request

API Request is used to send the POST request to the endpoint /logout. In the action:

  • Select the Service name.
  • Select the Endpoint. In this case, it's Logout.

2: Set Global Variable: Access Token

In the action:

  • In the Variable, select the Global Variable assigned for access_token from the dropdown menu.
  • In the Value, add an empty string "".

3. Navigate

This action redirects the user (when the API request is successful) to navigate to a screen that is only visible to non-authenticated users (for example, a Login screen). In the action:

  • In Destination, select the screen name from the dropdown menu.

📘

Learn how to create policies and share user's UUID as a foreign key to map fit in other data tables in Supabase.

Additional Resources

  • To learn more about what filters are available with Supabase, please refer to their official documentation here.

Did this page help you?