Building Basic Authentication with Xano and Webflow

In this step-by-step guide, we'll explore how to implement secure user authentication in your Webflow projects using Xano, a no-code platform for building backend services. By following along, you'll learn how to create a login system, secure user data, and handle user registration, all without writing a single line of code.

Prerequisites

Before we begin, make sure you have:

1. A Xano account (sign up for free at xano.io)
2. A Webflow project set up and ready to go

Step 1: Set Up Authentication Endpoints in Xano

Xano provides pre-built authentication endpoints that you can easily implement in your project. Here's how to access them:

1. Log in to your Xano account and open your workspace.
2. Click on "Add API Endpoint" and select "Authentication."
3. You'll see three endpoints: "Login," "Signup," and "AuthMe." These endpoints handle user authentication, registration, and fetching user data, respectively.

Step 2: Integrate Login Form in Webflow

Now, let's set up the login form in Webflow and connect it to the Xano authentication endpoints:

1. Create a new page in Webflow and add a login form with fields for email and password.
2. In the Webflow Designer, add a custom code element to the page.
3. Copy and paste the following code into the custom code element:

javascript
 // Prevent default form submission
 function handleSubmit(event) {
  event.preventDefault();
 
  // Get form values
  const email = document.getElementById('email').value;
  const password = document.getElementById('password').value;
 
  // Define data to send to Xano
  const xanoInput = { email, password };
 
  // Call Xano login endpoint
  fetch('https://YOUR_XANO_WORKSPACE/auth/login', {
  method: 'POST',
  headers: {
  'Content-Type': 'application/json'
  },
  body: JSON.stringify(xanoInput)
  })
  .then(response => response.json())
  .then(data => {
  console.log(data); // Log response for debugging
 
  // Check if AuthToken is present in the response
  const hasAuthToken = 'AuthToken' in data;
 
  if (hasAuthToken) {
  alert('You have an AuthToken!');
  // Store AuthToken in localStorage
  localStorage.setItem('authToken', data.AuthToken);
  // Redirect to the next page
  window.location.href = '/user-profile';
  } else {
  alert('Invalid username or password');
  }
  })
  .catch(error => console.error(error));
 }
 

1. Replace `'https://YOUR_XANO_WORKSPACE/auth/login'` with the actual URL of your Xano login endpoint.
2. Attach the `handleSubmit` function to the form's submit event.

Step 3: Create the User Profile Page

Next, let's create a page that displays the user's data after successful authentication:

1. Create a new page in Webflow and add a paragraph element with an ID of `user`.
2. Add another custom code element to the page and paste the following code:

javascript
 // Check if AuthToken is present in localStorage
 const authToken = localStorage.getItem('authToken');
 
 if (!authToken) {
  alert('You are not logged in');
  window.location.href = '/login'; // Redirect to login page
 } else {
  // Call Xano AuthMe endpoint to fetch user data
  fetch('https://YOUR_XANO_WORKSPACE/auth/me', {
  headers: {
  'Authorization': `Bearer ${authToken}`
  }
  })
  .then(response => response.json())
  .then(data => {
  console.log(data); // Log response for debugging
  const userElement = document.getElementById('user');
  userElement.textContent = JSON.stringify(data);
  })
  .catch(error => console.error(error));
 }
 

1. Replace `'https://YOUR_XANO_WORKSPACE/auth/me'` with the actual URL of your Xano AuthMe endpoint.

This code checks if the `authToken` is present in the browser's localStorage. If it's not, the user is redirected to the login page. If the token is present, it calls the Xano AuthMe endpoint to fetch the user's data and displays it in the paragraph element.

Step 4: Handle User Registration

To allow new users to sign up, let's create a registration page:

1. Create a new page in Webflow and add a form with fields for name, email, and password.
2. Add another custom code element and paste the following code:

javascript
 // Prevent default form submission
 function handleSubmit(event) {
  event.preventDefault();
 
  // Get form values
  const name = document.getElementById('name').value;
  const email = document.getElementById('email').value;
  const password = document.getElementById('password').value;
 
  // Define data to send to Xano
  const xanoInput = { name, email, password };
 
  // Call Xano signup endpoint
  fetch('https://YOUR_XANO_WORKSPACE/auth/signup', {
  method: 'POST',
  headers: {
  'Content-Type': 'application/json'
  },
  body: JSON.stringify(xanoInput)
  })
  .then(response => response.json())
  .then(data => {
  console.log(data); // Log response for debugging
 
  // Check if AuthToken is present in the response
  const hasAuthToken = 'AuthToken' in data;
 
  if (hasAuthToken) {
  alert('User registered successfully!');
  // Store AuthToken in localStorage
  localStorage.setItem('authToken', data.AuthToken);
  // Redirect to the user profile page
  window.location.href = '/user-profile';
  } else {
  alert('User already exists');
  }
  })
  .catch(error => console.error(error));
 }
 

1. Replace `'https://YOUR_XANO_WORKSPACE/auth/signup'` with the actual URL of your Xano signup endpoint.
2. Attach the `handleSubmit` function to the form's submit event.

This code sends the user's name, email, and password to the Xano signup endpoint. If the registration is successful, it stores the `authToken` in localStorage and redirects the user to the user profile page. If the user already exists, it displays an appropriate alert.

Conclusion

Congratulations! You've successfully implemented secure user authentication in your Webflow project using Xano. With this setup, you can securely manage user data and provide authenticated content to your users without writing any backend code.

Remember, this is just the beginning. You can further enhance your application by adding more features, such as password reset functionality, user roles, and permissions, and more. Explore the Xano documentation and community for additional resources and inspiration.

Happy coding!