Connect to FlutterFlow: Authentication

In this step-by-step guide, we'll learn how to set up Xano authentication in Flutter Flow. We'll walk through logging in a user, leveraging Xano's API endpoints within Flutter Flow, and hitting an authenticated endpoint with the auth token produced from Xano. We'll also display a list of data that belongs to the user while restricting access to ensure the user can only view records associated with their account.

Prerequisites

Before we begin, make sure you have the following:

1. A Xano workspace with a database set up
2. A Flutter Flow project

Step 1: Set up Xano API Endpoints

In your Xano workspace, create two API endpoints:

1. Login Endpoint: This endpoint will take the user's email and password to log them in and produce an authentication token.
2. Get All Things Endpoint: This endpoint will retrieve a list of "things" associated with the authenticated user.

For the "Get All Things" endpoint, enable user authentication and add a custom query to filter the results by the authenticated user's ID. This ensures that users can only access data associated with their account.

Step 2: Set up API Calls in Flutter Flow

In your Flutter Flow project, create two API calls:

Login API Call

1. Go to "Add API Call" and create a new API call named "Login" with the HTTP method set to POST.
2. Paste the Login API endpoint URL from Xano.
3. Define string variables for "email" and "password."
4. Set the request body to a JSON object with the email and password variables.
5. Test the API call with sample credentials to ensure you receive an auth token.
6. Select the auth token from the JSON response and give it a name (e.g., "auth_token").

My Things API Call

1. Create a new API call named "My Things."
2. Paste the "Get All Things" API endpoint URL from Xano.
3. In the headers section, add an "Authorization" header with the value "Bearer [auth_token]" (replace [auth_token] with the variable you defined in the Login API call).
4. Define a string variable for "auth_token."
5. Test the API call with a sample auth token to ensure you receive the expected data.
6. Select the desired fields from the JSON response (e.g., name, ID, userID) and give them appropriate names.

Step 3: Set up the Login Screen

1. In the UI builder, create a new page or screen for the login form.
2. Add text input fields for the user's email and password, and a button to submit the login form.
3. On the button's tap action, add the following actions:

• Call the "Login" API call with the email and password values from the text input fields.
• Add a condition to check if the API response succeeded (auth_token is not null or empty).
• If the condition is true, update the app state with the auth_token value from the API response.
• Navigate to the "My Things" page or screen.
• If the condition is false, clear the text input fields and display an error message.

Step 4: Set up the "My Things" Screen

1. Create a new page or screen named "My Things."
2. Add a card or list view element to display the "things" data.
3. In the card or list view element, add a backend query using the "My Things" API call.
4. Pass the auth_token value from the app state as a variable to the API call.
5. Generate dynamic children based on the API response, mapping the "name" field (or any other desired fields) to the card or list view item.

Step 5: Add Logout Functionality

1. On the "My Things" screen, add a button for logging out.
2. In the button's tap action, add the following actions:

• Navigate back to the login screen or home page.
• Update the app state to clear the auth_token value.

And that's it! You've successfully set up Xano authentication in Flutter Flow, allowing users to log in, view data associated with their account, and log out securely.

Remember, this is just a basic implementation, and you can extend it further by adding additional features and functionality as per your application's requirements.