Building a CRM with Xano and @Uiflow | Session 2

In today's digital world, security is paramount when building web and mobile applications. Xano, a no-code platform, makes it easy to implement robust authentication and authorization mechanisms, ensuring your data remains secure. In this step-by-step guide, we'll show you how to integrate Xano's authentication system with UiFlow, a powerful no-code tool for building user interfaces.

Understanding the Authentication Workflow

Authentication is the process of verifying a user's identity before granting them access to your application or sensitive data. The typical workflow involves:

1. User Login/Signup: Users provide their credentials (username/email and password) via a login or signup form.
2. Credential Validation: The provided credentials are validated against the user database.
3. Authentication Token Generation: If the credentials are valid, an authentication token is generated and sent back to the client (UiFlow in our case).
4. Token Storage: The client (UiFlow) stores the authentication token for future requests.
5. Authenticated Requests: Subsequent requests to the server include the authentication token, allowing the server to verify the user's identity and grant or deny access accordingly.

Xano simplifies this process by providing out-of-the-box authentication endpoints for login, signup, and user information retrieval.

Setting Up the Login and Signup Pages in UiFlow

1. Create a Login Page

In UiFlow, navigate to the Explorer and add a new page called "login." Set the URL slug to "/login" for best practices.

Drag and drop a pre-built login form pattern onto the page from the Patterns section.

2. Configure Xano Authentication

Go to the Auth tab and choose Xano as the authentication provider. Fill in the corresponding login URLs from the Xano endpoints:

• Login URL: Copy and paste the login endpoint from Xano.
• Me URL: Copy and paste the "auth me" endpoint from Xano.

3. Add Login Logic

On the Logic tab of the login page, drag and drop the email input, password input, and login button elements from the design references.

Drag and drop the XanoAuth component and configure the following action:

This code listens for the login button click event, passes the provided email and password to Xano for authentication, and upon successful login, redirects the user to the homepage.

4. Secure the Homepage

In the page properties of the homepage, enable the authentication layer by toggling the switch. Set the redirect page to "/login" for unauthorized users.

This step ensures that only authenticated users can access the homepage, redirecting unauthenticated users to the login page.

Securing API Endpoints with Authentication Tokens

To secure your Xano API endpoints and prevent unauthorized access, you'll need to pass the authentication token received from the login/signup process with each API request.

1. Update the API Endpoint in Xano

In Xano, open the API endpoint you want to secure (e.g., the contacts endpoint).

Add the "users" table to the API endpoint to associate user information with the API request.

Use the `get_record` function to retrieve the user's company ID based on the authenticated user's ID (obtained from the authentication token).

Create a custom query to filter the contacts table and return only the contacts associated with the user's company ID.

This step ensures that users can only access data related to their company, enhancing security and data privacy.

2. Pass the Authentication Token in UiFlow

In UiFlow, go to the Connections tab and locate the API component representing the secured endpoint (e.g., the contacts table).

Click "Expose" next to the "auth token" field to make it available in the component.

In the homepage logic (or wherever you're calling the API), drag and drop the XanoAuth component and use the `on_token` action to retrieve the authentication token.

Pass the retrieved token to the API component's "auth token" field when making the API request.

This step authenticates the API request by including the user's authentication token, allowing Xano to verify the user's identity and return the appropriate data.

Adding Logout Functionality

To provide a complete authentication experience, you can add a logout button that revokes the user's authentication token and redirects them to the login page.

In UiFlow, drag and drop a button onto the desired location (e.g., sidebar) and rename it to "logout button."

In the Logic tab, create a new flow called "logout."

Drag and drop the "logout button" and XanoAuth components.

Configure the following action:

This code listens for clicks on the logout button, revokes the authentication token stored in XanoAuth, and redirects the user to the login page.

By following these steps, you've successfully integrated Xano's authentication system with UiFlow, ensuring secure access to your application's data and functionality. Remember to always prioritize security best practices and stay up-to-date with the latest authentication and authorization methods to protect your applications and users.