Login and sign up with Xano + Bubble

Welcome to our guide on integrating Xano's authentication system with Bubble's no-code platform! In this tutorial, we'll walk you through the process of setting up a seamless sign-up, login, and user data retrieval flow using Xano's API endpoints and Bubble's visual workflow builder. Whether you're a no-code enthusiast, a citizen developer, or an experienced programmer looking to streamline your development process, this guide will help you unlock the power of Xano and Bubble to create secure and user-friendly applications.

Prerequisites

Before we begin, make sure you have the following:

1. A Xano account and a basic understanding of creating APIs and data models.
2. A Bubble account and familiarity with the Bubble editor and workflow builder.

Step 1: Set Up the Database and API Endpoints

In Xano, create a new data model with the necessary fields for your user data, such as name, email, password, and any additional fields you require. Once your data model is ready, Xano automatically generates CRUD (Create, Read, Update, Delete) API endpoints for managing user data.

For authentication purposes, we'll focus on three specific endpoints:

1. Sign Up: This endpoint allows new users to create an account by providing their details.
2. Login: This endpoint authenticates existing users by verifying their credentials.
3. Auth Me: This endpoint retrieves the authenticated user's information based on the provided authentication token.

Step 2: Connect Xano with Bubble

In Bubble, navigate to the "API Credentials" section and create a new "Custom API Credential." Here, you'll set up the API endpoints from Xano that you want to use in your Bubble application.

Setting Up the Sign Up Endpoint

1. Copy the URL for the Sign Up endpoint from Xano.
2. In Bubble, create a new API action and paste the URL.
3. Set the HTTP method to "POST."
4. Copy the request body schema from Xano's API debugger and paste it into Bubble's "Body" section, ensuring dynamic values are enclosed in brackets (`[ ]`).
5. Uncheck the "Private" option for each field to allow dynamic data binding.

Setting Up the Login Endpoint

Follow the same steps as above, but use the Login endpoint URL from Xano and update the request body schema accordingly.

Setting Up the Auth Me Endpoint

1. Copy the URL for the Auth Me endpoint from Xano.
2. In Bubble, create a new API action and paste the URL.
3. Set the HTTP method to "GET."
4. Add a new header with the key "Authorization" and the value "Bearer [your_auth_token]."
5. Uncheck the "Private" option for the header value to allow dynamic data binding.

Step 3: Create the Sign Up and Login Workflows

Now that the API endpoints are set up, it's time to build the sign-up and login workflows in Bubble.

Sign Up Workflow

1. In your Bubble application, create a new page or use an existing one for the sign-up form.
2. Add input fields for the user's details (e.g., name, email, password) and a submit button.
3. In the workflow editor, bind the input field values to the respective dynamic values in the Sign Up API action's request body.
4. After the Sign Up API action, navigate to a new page (e.g., "User Home") and pass the authentication token received from the Sign Up API response as a URL parameter.

Login Workflow

1. Create a new page or use an existing one for the login form.
2. Add input fields for the email and password, and a submit button.
3. In the workflow editor, bind the input field values to the respective dynamic values in the Login API action's request body.
4. After the Login API action, navigate to a new page (e.g., "User Home") and pass the authentication token received from the Login API response as a URL parameter.

Step 4: Display User Data

On the "User Home" page, you can now retrieve and display the authenticated user's information using the Auth Me API endpoint and the authentication token passed as a URL parameter.

1. Create a new group element or use an existing one to display the user's data.
2. Set the data source for the group to the Auth Me API action.
3. In the Auth Me API action's header, set the "Authorization" header value to "Bearer [page_url_parameter_name]," where `[page_url_parameter_name]` is the name of the URL parameter containing the authentication token.
4. Bind the group's data fields to the respective fields from the Auth Me API response.

Step 5: Test and Deploy

With the workflows and data display set up, you can now test your application locally in Bubble's preview mode. Ensure that the sign-up, login, and user data retrieval processes are working as expected.

Once you're satisfied with the results, you can deploy your Bubble application to a live environment and start accepting real user registrations and logins.

Conclusion

Congratulations! You've successfully integrated Xano's authentication system with Bubble's no-code platform. By following this guide, you've learned how to create a secure and user-friendly authentication flow, allowing your users to sign up, log in, and access their data seamlessly.

Whether you're building a personal project, a startup MVP, or an enterprise application, the combination of Xano and Bubble empowers you to create robust and scalable applications without writing a single line of code. Embrace the power of no-code development and continue exploring the vast possibilities offered by these platforms.

Happy building!