Password Reset Snippet

Forgetting passwords is a common occurrence for users accessing various applications. Xano's password reset snippet makes it easy to provide a secure and user-friendly way for your users to reset their passwords. In this guide, we'll walk you through the process of implementing this feature in your Xano backend.

Prerequisites

Before you can implement the password reset feature, you'll need to set up the following:

1. MagicLink with SendGrid Extension: This snippet requires the MagicLink with SendGrid extension. If you haven't already, you'll need to configure your environment variables for this extension to work properly.

2. Environment Variables: You'll need to set up the following environment variables:

• SENDGRID_FROM_EMAIL: A valid SendGrid from email address.
• SENDGRID_API_KEY: Your SendGrid API key.
• MAGICLINK_REDIRECT_URI: The URL of your frontend application where users will land after clicking the magic link.
• MAGICJWT_SECRET: A secret key used for generating JSON Web Tokens (JWT). You can generate this by running the generateJWTSecret function included in the snippet.
• SENDGRID_MAGICLINK_TEMPLATE_ID: The dynamic template ID for the SendGrid magic link email.
• MAGICLINK_EXPIRATION_TIME: The expiration time for the magic link in seconds (e.g., 3600 for one hour).

Step-by-Step Guide

Follow these steps to implement the password reset feature in your Xano backend:

1. Request a Magic Link

Users will initiate the password reset process by requesting a magic link. On your frontend, create a form or button that triggers the authRequestMagicLink API endpoint with the user's email address.

This endpoint will generate a magic link, update the user's record, and send an email containing the magic link using SendGrid.

2. Customize the Magic Link Email Template

Open the SendGrid dashboard and navigate to the "Marketing" > "Email Templates" section. Create a new template or edit an existing one. You can use the provided basic HTML template as a starting point:

<p>Use this temporary link to sign in:</p>
<a href="{{magicLink}}">{{magicLink}}</a>

Replace {{magicLink}} with the dynamic variable provided by SendGrid. You can customize the email template further by adding your branding, styling, or additional instructions.

3. Authenticate with the Magic Link

When users click the magic link in the email, they'll be redirected to your frontend application's specified MAGICLINK_REDIRECT_URI. On this page, you'll need to parse the magic link from the URL and send it to the authMagicLogin API endpoint.

This endpoint will validate the magic token, generate an authentication token (authToken), and update the user's record to reflect the successful magic link authentication.

4. Reset the Password

After authenticating with the magic link, users can proceed to reset their passwords. Create a password reset form on your frontend that sends the new password (entered twice for confirmation) and the authToken to the updateUserPassword API endpoint.

This endpoint will validate the new password, retrieve the user's record based on the authToken, and update the user's password in the database.

Customization and Additional Features

The password reset snippet provides a solid foundation, but you can customize it to fit your specific requirements:

• Password Validation Rules: Modify the password validation rules in the updateUserPassword endpoint to meet your desired complexity requirements (e.g., include special characters, adjust minimum length, etc.).
• Email Template Customization: Enhance the SendGrid email template with your branding, additional instructions, or dynamic content.
• Error Handling: Implement error handling mechanisms to provide meaningful feedback to users in case of failures or invalid inputs.
• Expiration and Invalidation: Consider adding functionality to invalidate or expire magic links after a certain period or after successful password reset.
• Multi-Factor Authentication: Integrate additional security measures, such as multi-factor authentication, for added protection.

By following this guide, you can easily implement a secure and user-friendly password reset feature in your Xano backend. Remember to test the functionality thoroughly and ensure that your environment variables are correctly configured for the MagicLink with SendGrid extension.