Overview

Passwordless Sign-In is a modern authentication method that allows users to log in using an email or phone without needing a password. Supabase makes this process seamless, and FlutterFlow can integrate with Supabase to enable it in your application.

Prerequisites

• Supabase
• Flutterflow

Supabase

Supabase is an open-source Backend-as-a-Service (BaaS) platform that offers a scalable backend for building web and mobile applications. It provides developers with tools to set up a full backend without having to manually configure databases or authentication systems. Supabase is often described as an alternative to Google Firebase, but with a stronger focus on open-source technologies and relational databases like PostgreSQL.

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

1. Create a Supabase project

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

2. Enable Supabase Authentication

• In the Supabase console, go to the Authentication section.
• click Providers and enable sign-in methods you need (e.g.- Email, Phone)

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. FlutterFlow allows users to create fully functional Flutter apps using a visual interface without needing extensive coding skills.

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

1. Create a Flutterflow project

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

Pages

• Registration page : - If user want to SignIn without password in the app, then it need to be register/create Account once

• Login Page : - User enters their email id and clicks on the login button***,***  Through that it was send the login link in your email.
• In your email you get the email login link through that you can login.

2. Enable Authentication

• Enable authentication and select Supabase authentication type.
• Set up the entry and login page.
• Go to settings and enable supabase, fill the API URL and Anon Key from the supabase project, and get schema.

3. URL Configuration

• In the Supabase console, go to the Authentication and the Add URL from flutterflow project.

Go to the settings and copy the URL scheme in App details and add in supabase Authentication with some changes.

Go to the settings and copy the URL scheme in App details and add in supabase Authentication with some changes.

4. Write Custom Code

 **Password less SignIn**



• This action was used to send a link in your email.
• In this custom action we need an argument which is email.
• From this action you can get a email link in your mail box.

// Automatic FlutterFlow imports

import '/backend/supabase/supabase.dart';

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:supabase_flutter/supabase_flutter.dart';



final supabase = SupaFlow.client;



Future signinWithMagicLink(String email) async {

 await supabase.auth.signInWithOtp(

     email: email,

     shouldCreateUser: false,

     emailRedirectTo:

         'maheshsupabasemagiclinklogin://maheshsupabasemagiclinklogin.com/HomePage');

 // Add your function code here!

}



Through that you can get an email link for login.

Magic/Email link

A magic link login in Supabase is a passwordless authentication method where users log in to an application via a link sent to their email. It simplifies the login process and enhances user experience by eliminating the need to remember passwords.

Conclusion

Passwordless sign-in using Supabase in FlutterFlow represents the future of authentication by prioritizing both security and user convenience. Its minimal setup, modern approach, and seamless integration capabilities make it an excellent choice for developers seeking a simple yet effective authentication method.

‍