What is Xano?

Xano gives a scalable backend that is frontend agnostic, with a PostgreSQL database, a ready-to-use API, and a No Code business logic builder to transform data to and from any source.

Integrating Draftbit & Xano

Setup steps in Xano

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

  • After logging in, you will be welcomed by the Dashboard screen.
  • Go to the Database tab from the left menu bar and click the button Add Table.
  • Enter the table's name under table_name, add a description under Description. Make sure to check Add Basic CRUD Endpoints to allow Xano to generate API endpoints for CRUD operations.
  • Click the button Add Table to generate the table.

We are using a custom data table for this documentation in a database called Groceries. It represents the table_name and has some pre-populated data fields and values:

To utilize the data from the Xano into the Draftbit app, let's use the REST API service it gives access to. To connect the API in the Draftbit app, a Base URL is required. The Base URL of the REST API is of the format: https://<your-project-reference>.n7.xano.io/api:<your-api-param>.

You can find the Base URL in the API tab under the section Base Request URL.

Setup steps in Draftbit

To add the Xano API Base URL in your Draftbit app:

  • Open the API & Cloud Services modal from the top navbar.
  • From the Add your custom API menu, click on Rest API.
  • Enter a name for your REST API service.
  • Paste your Base URL (from the previous section) into the Base URL input field.
  • Click Save.

Using Xano with Draftbit

GET request to fetch all records

In this section, let's populate a Fetch component with all the data from the Xano data table and then display the data fetched from the Xano 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 data using a GET HTTP request. Open the Data modal, select Xano service, 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-base-name.
  • In Step 4: click the Test button next to the Endpoint input to verify the response coming from Xano.
  • 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 Xano Service.
  • For Endpoint, select the endpoint you want to fetch the data from.
  • Select the List component in the Components tree 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 tree and then go to the Data tab from the Properties Panel.
  • Add a {{varName}} value (inside the curly braces) to represent a data field from the Xano. For example, we add {{name}} to represent the column name from the Xano.

GET request to fetch a single record

In this section, let's populate a Fetch component with a single record from Xano. For reference, here is a how the Components tree looks like for this screen:

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 Xano, you'll have to specify a record id that is coming from the navigation parameters.

Data is fetched using a GET HTTP request. Open the API & Cloud Services modal from the top navbar, select the Xano service, and then:

  • Click Add endpoint.
  • In Step 1: enter a name for the endpoint.
  • In Step 2: add the /your-base-name/{{id}} variable. Then, add a Test value for the {{id}}.
  • In Step 4: click the Test button next to the Endpoint input to verify the response coming from Xano.
  • 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 Xano.
  • 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.
  • Then, select the Text component in the Components tree and then go to the Data tab from the Properties Panel.
  • Add a {{varName}} value (inside the curly braces) to represent the data field from Xano. For example, we add {{title}} to represent the field and value from the Xano 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 new data

Submitting new Data from the Draftbit app to a REST API requires the request to be sent using 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 Xano 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-base-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 5: click the Test button next to the Endpoint input to verify the response coming from the Xano.
  • Click Save.

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

{
  "key": {{textInputValue}}
}

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:

POST request to update data

The POST request is used to update the single entry in the Xano record. It accepts similar input components as mentioned in the previous section 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 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: /{{table-name}}/{{id}}.
  • 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 5: click the Test button next to the Endpoint input to verify the response coming from Xano.
  • Click Save.

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

{
  "key": {{textInputValue}}
}

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

DELETE request to delete data

The DELETE request is sent to the Xano data table with an item's id to remove that particular record from the table.

For example, once you have the necessary component(s) on your screen, you'll need to create a new endpoint in your Xano REST API 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-base-name/{{id}} where id is provided as a test value of an existing record when testing the endpoint. In your app, you will have to pass the id of a single record, for example, as a navigation parameter.
  • In Step 4: click the Test button next to the Endpoint input to verify the response from Xano.
  • Click Save.

Using a Touchable/Button component or an Icon Button, you can add the API Request action to trigger the DELETE request.

Authentication

Authentication is the way Xano backend handles adding users 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.

Xano automatically adds a user database table and endpoints to access the fields in that table. You are free to create your own database table for user management in your app with Xano (depending on the familiarity with Xano).

For the rest of the documentation, we will use the following data table with pre-populated fields.

In the Xano API group screen, you will find the URL under the section Base Request URL, as shown below:

The API endpoints /auth/login and /auth/signup are used to retrieve an authentication token in the response coming from the Xano's backend.

📘

Before implementing endpoints for authentication (from the sections below), refer to the documentation on how to add Global Variables for saving the auth token as a Device Variable and error messages as an App Variable.

Sign up

To implement the signup process with Xano REST API service, you need to add the endpoint /auth/signup. Open the Xano service you have previously created 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: /your-base-name. In this case, add /auth/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. The key should associate with the name of the field in the Xano datatable. For the sign up route, here is how we have defined the body structure for this POST request:
{ 
  "name": {{signupName}},
  "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, Xano backend service will return an encoded authToken.
  • Click Save.

A typical Signup screen (see the image below) will have a Button/Touchable component in its Components tree 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

API Request is used to send the POST request to the endpoint auth/signup. It comes back with an auth token from the Xano REST API service. In the action:

  • 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: auth token

Using the signupResponseJson value from the previous action, let's extract the authToken. In the action:

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

4. 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: .message.
  • 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 auth token value is present or not and if not, the action will stop the execution. Useful to implement after handling errors. In the action:

  • In Check value, select authToken from the dropdown and a transform function negate.

7. Set Global Variable: Authorization Header

In the action:

  • In the Variable, select the Global Variable assigned for Auth Token from the dropdown menu.
  • In the Value, select the Action Result authToken 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.

Log in

To implement the signup process with Xano REST API service, you need to add the endpoint /auth/login. Open the Xano service you have previously created 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: /your-base-name. In this case, add /auth/login.
  • 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 Xano datatable. For the log in 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, Xano backend service will return an encoded authToken.
  • Click Save.

A typical Log in screen (see the image below) will have a Button/Touchable component in its Components tree 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 auth/login. It comes back with an auth token from the Xano 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: auth token

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

  • Select the value of the Input to be Result Name of the previous action. For example, loginResponseJson.
  • Add the Path value: .authToken.
  • Add the Result Name: authToken.

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: .message.
  • 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 auth token 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 Auth Token from the dropdown menu.
  • In the Value, select the Action Result authToken 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 auth token as the value of the Authorization header is sent along.

Initially, when adding an authenticated endpoint, a real auth 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 Xano, you get the auth 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 Xano's API group, you can also view which endpoint is an Authenticated API request (that is, requires an auth token 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: /your-base-name. In this case, add /auth/me.
  • In Step 3: add the Authorization header and set its value to the Global Variable (which contains the auth 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

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.

Stacking Actions

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.

Here is the description of each action:

1: Set Global Variable: Authorization

In the action:

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

2. Navigate

This action redirects the user 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.

Additional Resources


Did this page help you?