Magic Link - Passwordless App Authentication

In today's fast-paced world, user authentication is a crucial aspect of any web or mobile application. However, traditional password-based authentication can be cumbersome and prone to security risks. That's where Xano's MagicLink extension comes into play, offering a seamless and secure solution for passwordless authentication. In this blog post, we'll walk you through the process of installing and using the MagicLink extension within Xano, enabling your users to log in with just their email addresses.

Prerequisites

Before we dive into the installation process, you'll need to have the following:

1. A Xano account
2. A SendGrid account (owned by Twilio)

SendGrid is an email service provider that allows you to send emails from your application. It plays a crucial role in the MagicLink authentication process.

Step 1: Install the MagicLink Extension

1. Log in to your Xano account and navigate to the Marketplace.
2. Click on the "User Authentication" category.
3. Find the "MagicLink with SendGrid" extension and click "Install."
4. During the installation process, Xano will create a new object called "MagicLink" in your user table, integrating the MagicLink capabilities into your existing user table.

Step 2: Configure the MagicLink Extension

After installing the extension, you'll need to configure a few settings. Don't worry; Xano provides step-by-step instructions throughout the process.

1. SendGrid From Email: This is the email address that your users will see as the sender when they receive the MagicLink email. For example, support@xano.com or prakash@xano.com.

Note: If this is your first time using SendGrid, you'll need to complete the sender authentication process. This step verifies that you're not a spammer and allows you to build your reputation with SendGrid.

2. SendGrid API Key: This key associates your Xano workspace with your SendGrid account.

• Go to your SendGrid account and navigate to the API Keys section.
• Create a new API key and name it "Xano" (or any other descriptive name).
• Copy the API key and paste it into the corresponding field in Xano.

3. MagicLink Redirect URI: This is the URL where your users will be redirected after clicking the MagicLink in their email. For example, login.yourapp.com.

4. MagicLink JWT Secret: JSON Web Tokens (JWT) are the industry-standard way to encrypt and authenticate users on the internet. Xano provides a function called generateJWTSecret to generate a secure and random secret for your MagicLink implementation.

• Go to the "Library" tab in Xano and find the generateJWTSecret function.
• Run the function and copy the generated secret.
• Paste the secret into the corresponding field in the MagicLink configuration.

5. MagicLink Template: This is the email template that SendGrid will use to send the MagicLink to your users.

• In your SendGrid account, navigate to "Email API" > "Dynamic Templates."
• Create a new dynamic template and name it "MagicLink."
• Open the code editor and paste the following code into the template:

<h1><a href="{{magic_link}}">Sign in with Magic Link</a></h1>

• Save the template and copy its ID.
• Paste the template ID into the corresponding field in the MagicLink configuration.

6. MagicLink Expiration Time: This setting determines the time (in seconds) after which the MagicLink will expire. The default value is 3,600 seconds (60 minutes), but you can adjust it according to your preference.

Step 3: Test the MagicLink Authentication

Once you've completed the configuration, it's time to test the MagicLink authentication process.

1. Click the "Explore Live Demo" button in the MagicLink extension.
2. Enter your Xano API URL (available in the API section of your Xano workspace).
3. Enter an email address associated with a user in your user table.
4. Click "Request Magic Link."

Xano will send a MagicLink email to the provided email address using the SendGrid template you configured earlier.

5. Open your email and click the MagicLink.

You should be redirected to the specified "MagicLink Redirect URI," and the demo site will display a success message confirming that you've been logged in successfully.

Under the Hood: Understanding the API Endpoints

To gain a deeper understanding of how the MagicLink authentication works, let's explore the API endpoints created by the extension.

1. Generate Magic Link: This endpoint is responsible for generating the MagicLink and sending it to the user's email address.

• It takes an email address as input.
• It checks if the user exists in the user table.
• It generates a one-time token and encrypts it.
• The token is associated with the user record and set to expire based on the configured "MagicLink Expiration Time."
• The token is encoded and sent to the SendGrid template for email delivery.

2. Auth Magic Login: This endpoint is used to authenticate the user after they click the MagicLink in their email.

• It takes the token from the MagicLink as input (usually passed as a URL parameter).
• It validates the token and retrieves the associated user information.
• If the token is valid, the user is authenticated and granted access to the application.

By understanding these API endpoints, you can seamlessly integrate the MagicLink authentication process into your application's workflow.

Conclusion

Xano's MagicLink extension simplifies user authentication by eliminating the need for traditional passwords. With just an email address, your users can securely log in to your web or mobile application. By following the step-by-step guide outlined in this blog post, you can easily install and configure the MagicLink extension, providing a hassle-free and secure authentication experience for your users.

Whether you're a no-code enthusiast, a citizen developer, a traditional developer, or a startup/small business, Xano's MagicLink extension empowers you to build and deploy applications faster and more efficiently, without compromising on security or user experience.

So, what are you waiting for? Embrace the power of passwordless authentication with Xano's MagicLink extension and take your application to new heights!