Connect to FlutterFlow: Magic Link (Passwordless Auth)

In today's world of app development, passwordless authentication is becoming increasingly popular due to its convenience and enhanced security features. Xano, a no-code platform, has made it easy to implement this authentication method by offering a ready-to-use extension called "Magic Link with SendGrid." In this guide, we'll walk you through the process of setting up passwordless authentication using the Magic Link with SendGrid extension in Xano and integrating it with Flutter Flow, a popular no-code tool for building Flutter apps.

Prerequisites

Before we begin, make sure you have the following:

1. A Xano account
2. A Flutter Flow account
3. A SendGrid account (for sending magic link emails)

Step 1: Install the Magic Link with SendGrid Extension

The first step is to install the Magic Link with SendGrid extension in your Xano project. Here's how you can do it:

1. Navigate to the Xano Marketplace and search for the "Magic Link with SendGrid" extension.
2. Click on the extension and select "Install."
3. Follow the instructions provided to set up the required environment variables, such as your SendGrid API key and email template.

Step 2: Configure Flutter Flow for Web Deployment

Since we'll be demonstrating the passwordless authentication flow using the web version of your Flutter Flow app, we need to enable web deployment. Here's how you can do it:

1. In your Flutter Flow project, go to "Settings" > "Platforms" and enable the "Web" option.
2. Once enabled, you'll see a "Publish" button in the top-right corner. Click on it to publish your app to the web.
3. Copy the generated web URL as you'll need it later for setting up the redirect URI.

Step 3: Set up the Redirect URI in Xano

After publishing your Flutter Flow app to the web, you'll need to set the redirect URI in your Xano project. This URI will be used to redirect the user back to your app after clicking the magic link in their email. Here's how you can set it up:

1. In your Xano project, go to "Settings" > "Manage" and locate the "Magic Link Redirect URI" environment variable.
2. Paste the web URL you copied from Flutter Flow, followed by the route for the page where you want the user to be redirected after authentication (e.g., `/my-info`).

Step 4: Modify the Magic Link Extension

To make the Magic Link with SendGrid extension work seamlessly with Flutter Flow, we'll need to make a couple of modifications:

1. In the Xano API, navigate to the "Magic Link" group and open the `auth/magic/link` endpoint.
2. Locate the `generate_magic_link` function and modify the `separator` variable to include a `?token=` query parameter. This will allow Flutter Flow to parse the magic token from the URL.
3. In the `auth/magic/login` endpoint, modify the response to nest the auth token in a JSON object with a key called `auth_token`. This will make it easier to parse the response in Flutter Flow.

Step 5: Set up API Calls in Flutter Flow

With the backend setup complete, it's time to configure the API calls in Flutter Flow:

1. In your Flutter Flow project, go to "API Calls" and create three separate API calls:

• `request_login_link` (for sending the user's email to request the magic link)
• `magic_login` (for exchanging the magic token with an auth token)
• `auth_me` (for fetching the authenticated user's information)

1. Configure each API call with the appropriate endpoint URL from your Xano project, headers (if required), and any necessary parameters or request body.

Step 6: Build the User Interface

Now, let's create the user interface for the passwordless authentication flow:

1. Create a homepage with a text field for the user to enter their email and a button to request the magic link.
2. Set up an action flow for the "Request Login Link" button that calls the `request_login_link` API and displays a snackbar message upon successful submission.
3. Create another page (e.g., "My Info") where the user will be redirected after clicking the magic link in their email.
4. On the "My Info" page, set up an action flow that triggers on page load. This action flow should:

• Call the `magic_login` API to exchange the magic token (parsed from the URL) for an auth token.
• If the exchange is successful, store the auth token in the app state.
• Call the `auth_me` API to fetch and display the authenticated user's information.
• If the exchange fails, navigate back to the homepage and display an error message.

Step 7: Test the Passwordless Authentication Flow

With everything set up, it's time to test the passwordless authentication flow:

1. Publish your Flutter Flow app to the web and open the generated URL.
2. Enter your email address on the homepage and click the "Request Login Link" button.
3. Check your email inbox for the magic link email sent by SendGrid.
4. Click the magic link in the email to be redirected to your Flutter Flow app's "My Info" page.
5. If everything is configured correctly, you should see your authenticated user's information displayed on the "My Info" page.

Congratulations! You've successfully implemented a passwordless authentication flow using Xano's Magic Link with SendGrid extension and integrated it with your Flutter Flow app.

Conclusion

Passwordless authentication offers a seamless and secure login experience for your app users. By leveraging Xano's Magic Link with SendGrid extension and integrating it with Flutter Flow, you can quickly build and deploy applications with this authentication method without writing a single line of code.

Remember, this guide is just the beginning. You can further enhance the user experience by customizing the email templates, adding error handling, and implementing additional features like sign-up and forgot password flows.

Happy coding!