Overview

This article explains how to implement passwordless sign-in in a FlutterFlow web app using Firebase Authentication. It covers sending a magic link to the user's email, handling authentication using Firebase’s email link sign-in method, and redirecting users after successful login. The approach enhances security and user experience by eliminating passwords while ensuring seamless authentication.

Prerequisites

• FlutterFlow
• Firebase

Flutterflow

FlutterFlow is a low-code development platform built on top of Flutter, Google's open-source UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase.

To set up your Flutterflow project, please follow the steps below:

Create a Flutterflow project

• Go to the Flutterflow console.
• Click on Create a project and follow the instructions to set up a new project.

Firebase Project Setup

Firebase is a Google platform offering tools to build, improve, and scale apps across mobile, web, and desktop, with services like real-time databases, authentication, and serverless backend solutions.

To set up your Firebase project, please follow the steps below:

1. Create a firebase project

• Go to the Firebase Console.
• Click on Create a project and follow the instructions to set up a new project.

2. Enable Firebase Authentication

• In the Firebase console, go to the Authentication section.
• Click Get Started and enable the sign-in methods you need (e.g., Email/Password, Google).

‍

‍

Also enable the Email link (passwordless sign-in) and save.

• Now copy the project ID and go in the settings of flutterflow project, select firebase project and paste the copied firebase project id in that and connect with firebase.

Now our flutterflow and firebase projects are setup. Let’s start the to add passwordless functionality in our fluterflow project.

Please follow the below steps : -

Step 1 : - In flutterflow we have created 3 simple pages :

1. Auth Page : - in this page user enter their email address and a ‘Sign In’ button. The use of this page is send magic link to user email address.

b. Process Page : - When user click on magic link than this page verify the user email and redirect user to login page.

c. Home Page : - This is a login page, user will jump here when they logged in successfully.

Step 2 : - Do web deployment of your project in flutterflow, than you will get the web url.

Example Url : - https://example.flutterflow.app/

Step 3 : - Now add domain( example.flutterflow.app ) in firebase Authorized Domain section.

Step 4 : - On the click on Sign In button Auth Page, call a custom action named as sendSignInLinkToEmail and pass email address as a parameter.

// Automatic FlutterFlow imports

import '/flutter_flow/flutter_flow_theme.dart';

import '/flutter_flow/flutter_flow_util.dart';

import '/custom_code/actions/index.dart'; // Imports other custom actions

import '/flutter_flow/custom_functions.dart'; // Imports custom functions

import 'package:flutter/material.dart';

// Begin custom action code

// DO NOT REMOVE OR MODIFY THE CODE ABOVE!



import 'package:firebase_auth/firebase_auth.dart';

import 'package:shared_preferences/shared_preferences.dart';



Future sendSignInLinkToEmail(String email) async {

 // Add your function code here!

 final FirebaseAuth _auth = FirebaseAuth.instance;

 final String _redirectUrl =

     "<https://example.flutterflow.app/processPage>"; // Web-friendly URL



 try {

   ActionCodeSettings actionCodeSettings = ActionCodeSettings(

     url: _redirectUrl,

     handleCodeInApp: true,

   );



   await _auth.sendSignInLinkToEmail(

     email: email,

     actionCodeSettings: actionCodeSettings,

   );

   SharedPreferences prefs = await SharedPreferences.getInstance();

   await prefs.setString("emailForSignIn", email);



   print("Sign-in link sent to $email");

 } catch (e) {

   print("Error sending sign-in link: $e");

 }

}



Here's a brief breakdown of above function :

1. Imports: It imports necessary FlutterFlow utilities, Firebase Authentication, and SharedPreferences for local storage.
2. Function: sendSignInLinkToEmail(String email) is an asynchronous function that:
   • Initializes Firebase Authentication.
   • Sets a web-friendly redirect URL (_redirectUrl) for handling sign-in.
   • Configures ActionCodeSettings to manage the email link sign-in.
   • Sends the sign-in link to the provided email using Firebase's sendSignInLinkToEmail method.
   • Stores the email locally in SharedPreferences to verify it later.

Note : - In our case _redirectUrl  is Process Page url.

Step 5 : - We will receive the link i our email address, when we click on that link we will redirect to the Process Page.

Step 6 : - Actually we have to call a function named as handleRedirect on page load of Process Page.

// Automatic FlutterFlow imports

import '/flutter_flow/flutter_flow_theme.dart';

import '/flutter_flow/flutter_flow_util.dart';

import '/custom_code/actions/index.dart'; // Imports other custom actions

import '/flutter_flow/custom_functions.dart'; // Imports custom functions

import 'package:flutter/material.dart';

// Begin custom action code

// DO NOT REMOVE OR MODIFY THE CODE ABOVE!



import 'dart:html' as html;

import 'package:firebase_auth/firebase_auth.dart';

import 'package:shared_preferences/shared_preferences.dart';



Future handleRedirect(BuildContext context) async {

 // Add your function code here!

 final link = html.window.location.href;

 print("Link : - $link");

 if (link != null) {

   // Pass the link to the custom action

   await handleSignInWithEmailLink(link, context);

 } else {

   print("No link found.");

 }

}



Future<void> handleSignInWithEmailLink(

   String link, BuildContext context) async {

 try {

   SharedPreferences prefs = await SharedPreferences.getInstance();

   String? email = prefs.getString("emailForSignIn");

   UserCredential userCredential =

       await FirebaseAuth.instance.signInWithEmailLink(

     email: email!,

     emailLink: link,

   );



   print("Successfully signed in: ${userCredential.user?.email}");

   await prefs.remove("emailForSignIn"); // Clean up after sign-in

   context.goNamedAuth('HomePage', context.mounted);

 } catch (e) {

   print("Error signing in with email link: $e");

 }

}



This FlutterFlow custom action handles the redirect process for email link sign-in using Firebase Authentication. Here's a breakdown:

• Imports:
  • Imports necessary FlutterFlow utilities, Firebase Authentication, and SharedPreferences for local storage.
  • Uses dart:html to access the current URL in the browser, making it suitable for web applications.
• Main Function: handleRedirect(BuildContext context):
  • Retrieves the current URL using html.window.location.href.
  • Checks if the URL is not null, then passes it to handleSignInWithEmailLink() for processing.
  • If no link is found, it prints an error message.
• Helper Function: handleSignInWithEmailLink(String link, BuildContext context):
  • Retrieves the stored email from SharedPreferences, which was saved when the sign-in link was sent.
  • Uses Firebase's signInWithEmailLink() method to authenticate the user with the saved email and the link from the URL.
• If sign-in is successful:
  • Prints the user's email.
  • Removes the saved email from SharedPreferences to clean up after sign-in.
  • Navigates the user to the HomePage using context.goNamedAuth(), which is typically a named route in FlutterFlow.
• If an error occurs during sign-in, it prints the error message.

Purpose:

This function is part of the passwordless authentication flow, completing the sign-in process after the user clicks the email link. It verifies the link and email, then redirects the user to the home page if successful.

Step 7 : - If user logged in successfully than they redirect to the logged in page.

context.goNamedAuth('HomePage', context.mounted);



Conclusion

The article explains how to implement passwordless sign-in in a FlutterFlow web app using Firebase Authentication. It covers the setup of FlutterFlow and Firebase, enabling the email link sign-in method, and creating three pages: Auth Page (to send a magic link), Process Page (to verify the link and authenticate), and Home Page (to redirect users after successful login). The implementation uses custom actions to send the sign-in link and handle the redirect upon clicking the magic link, providing a seamless and secure authentication experience without using passwords.

‍