Authentication (Login) & authenticated requests with Bubble

In this guide, we'll walk you through connecting Xano, a no-code backend platform, with Bubble, a no-code app builder, for handling user authentication and authorized data access. Xano will serve as the backend, managing the API, user information, and database, while Bubble will act as the frontend.

Prerequisites

Before we begin, ensure you have the following:

1. A Xano account and a project set up with the necessary data models and API endpoints.
2. A Bubble account and a new or existing app.
3. The API Connector and Local Storage plugins installed in your Bubble app.

Step 1: Set up API Endpoints in Xano

In Xano, we'll be working with three API endpoints:

1. Login Endpoint: This endpoint will handle user authentication and return an authentication token.
2. Auth Me Endpoint: This endpoint will retrieve the authenticated user's record.
3. Get Stuff Endpoint: This endpoint will fetch data from a specific table (e.g., "Stuff") based on the authenticated user's ID.

To access the endpoint URLs, go to your Xano project, navigate to the respective endpoint, and click the link icon to copy the URL.

Step 2: Configure API Connector in Bubble

In your Bubble app, navigate to the "Plugins" section and set up the API Connector plugin.

Login Endpoint

1. Create a new API data source and name it "Xano API" or something similar.
2. Add the Login endpoint by pasting the copied URL from Xano.
3. Define the JSON object with the email and password inputs using dynamic values: `{email: "{{inputs.email}}",password:"{{inputs.password}}"}`.
4. Set the HTTP method to "POST" and check the "Use as action" option.
5. In the "Body Parameters" section, enter the credentials of a test user.

Auth Me Endpoint

1. Add a new endpoint and paste the copied URL from Xano.
2. In the "Headers" section, add a new header with the key "Authorization" and the value `Bearer {{get_storage_key("token")}}`.
3. Set the HTTP method to "GET" and check the "Use as data" option.

Get Stuff Endpoint

1. Add a new endpoint and paste the copied URL from Xano.
2. In the "Headers" section, add a new header with the key "Authorization" and the value `Bearer {{get_storage_key("token")}}`.
3. Set the HTTP method to "GET" and check the "Use as data" option.

Step 3: Set up Authentication Flow in Bubble

Login Page

1. Create a new page in Bubble and add input fields for email and password.
2. Drag and drop the "Send Storage" element from the Local Storage plugin onto the page.
3. In the workflow, when the login button is clicked, create an action to call the Xano Login endpoint using the API Connector plugin and the email and password inputs.
4. After a successful login, use the "Send Storage" element to store the authentication token returned from Xano under a key (e.g., "token").
5. Navigate to the next page (e.g., "Page 1").

Page 1 (Auth Me)

1. On this page, create a group to display the user's name and email.
2. Drag and drop the "Get Storage" element from the Local Storage plugin onto the page.
3. In the workflow, when the page loads, create an action to push values to the "Get Storage" element using the key "token" (or the key you used to store the authentication token).
4. Set the group's content type to the "Auth Me" API endpoint from the API Connector.
5. In the group's data source settings, insert the header `Bearer {{get_storage_key("token")}}` to pass the authentication token.
6. Bind the name and email text elements to the respective data fields from the API response.
7. Add a button to navigate to the next page (e.g., "Page 2").

Page 2 (Get Stuff)

1. On this page, create a repeating group to display the "Stuff" data.
2. Drag and drop the "Get Storage" element from the Local Storage plugin onto the page.
3. In the workflow, when the page loads, create an action to push values to the "Get Storage" element using the key "token" (or the key you used to store the authentication token).
4. Set the repeating group's content type to the "Get Stuff" API endpoint from the API Connector.
5. In the group's data source settings, insert the header `Bearer {{get_storage_key("token")}}` to pass the authentication token.
6. Bind the repeating group to display the appropriate data fields from the API response.

Step 4: Test the Authentication Flow

1. Preview your Bubble app and navigate to the login page.
2. Enter the credentials of a test user from your Xano project.
3. After a successful login, you should see the user's name and email on Page 1.
4. Click the button to navigate to Page 2, where you should see the "Stuff" data associated with the authenticated user.

Congratulations! You have successfully integrated Xano and Bubble for user authentication and authorized data access. Remember, if you want to log out a user, you can use the "Clear Storage" or "Remove Storage" functionality from the Local Storage plugin to remove the authentication token.