Verify User Email

At Xano, we understand the importance of secure user authentication and account verification for web and mobile applications. That's why we've created a powerful yet easy-to-use solution for implementing email verification using our no-code platform. In this guide, we'll walk you through the process step-by-step, making it accessible to both non-technical users and developers alike.

Prerequisites

Before we begin, make sure you have the following:

1. A Xano account (sign up for free at https://xano.io)
2. A SendGrid account (sign up at https://sendgrid.com)
3. A front-end application or website where users can sign up and verify their email addresses

Step 1: Install the Email Verification Snippet

Xano's snippets are pre-built modules that simplify common development tasks. To get started with email verification, install the "Email Verification with SendGrid" snippet from the Xano Snippets Library.

1. Log in to your Xano account and navigate to the "Snippets" section.
2. Search for "Email Verification with SendGrid" and click "Install".
3. Configure the required environment variables:

• SendGrid From Email: Your SendGrid account's verified sender email address.
• SendGrid API Key: Your SendGrid account's API key.
• Redirect URI: The URL where users will be redirected after clicking the verification link.
• MagicJWTC Secret: A secret key used for encoding and decoding the magic link token.
• SendGrid Template ID: The ID of the SendGrid template you'll use for the verification email.
• Token Expiration Time: The duration (in seconds) for which the verification link will be valid.

Step 2: Set Up Your Database

Xano's snippet includes a pre-configured data model for user authentication and email verification. However, you may want to customize it to fit your specific requirements.

1. Navigate to the "Data" section in your Xano project.
2. Locate the "User" table and ensure it has the following fields:

• `MagicVerify` (object): Contains the verification token, expiration time, and a boolean indicating if the token has been used.
• `Verified` (boolean): Indicates whether the user's email has been verified.

Step 3: Integrate with Your Front-end Application

To complete the email verification process, you'll need to integrate Xano's API endpoints with your front-end application. Here's how:

1. In your front-end application, create a sign-up form that collects the user's name, email, and password.
2. Upon form submission, call the `Verify Email Signup` API endpoint provided by the snippet. This will create a new user in the database and send a verification email to the user's email address.
3. In the verification email, include a link that redirects the user to your front-end application with the magic link token as a query parameter (e.g., `https://your-app.com/verify?token=abc123`).
4. On your front-end application, create a route that handles the verification link (e.g., `/verify`).
5. In this route, extract the magic link token from the URL and call the `Verify Email Magic Login` API endpoint, passing the token as a parameter.
6. If the verification is successful, the API will return an authentication token that you can use to log the user in and update their `Verified` status in the database.

Step 4: Test and Deploy

Before deploying your application to production, make sure to thoroughly test the email verification process.

1. In your Xano project, navigate to the "APIs" section and test the `Verify Email Signup` and `Verify Email Magic Login` endpoints using sample data.
2. Test the entire flow by signing up with a new email address and verifying it through the email link.
3. Once everything is working as expected, deploy your Xano project and front-end application to your preferred hosting environment.

Congratulations! You've successfully implemented email verification in your application using Xano's no-code platform and the "Email Verification with SendGrid" snippet. Your users can now securely sign up and verify their email addresses, providing an additional layer of security and trust for your application.

Remember, Xano's no-code approach empowers you to build and deploy backend services quickly, without the need for extensive coding knowledge. Whether you're a no-code enthusiast, citizen developer, traditional developer, or a startup/small business, Xano can help you streamline your development process and focus on delivering value to your users.