Beginner's Guide: Building Sign Up, Log In, and Forgot Password in
FlutterFlow
This guide will teach you how to set up user accounts in your app using FlutterFlow. You will learn how to let users sign up, log in securely, and reset their passwords. We will focus on using Supabase and Firebase to handle the user details.
What is Authentication?
Authentication (or "Auth") simply means verifying who a user is. It lets your app check if a user is who they say they are before letting them see private pages. It includes three main features: ● Sign Up: Creating a new account.
● Log In: Letting an existing user back into the app.
● Forgot Password: Helping users get back into their account if they forget their password. Why Do We Need It?
● Security: It keeps your users' private information safe.
● Personalization: It allows the app to remember the user's name, profile picture, and history.
● Persistence: It keeps users logged in so they don't have to type their password every single time they open the app.
How to Set It Up
Step 1: Turn on Email Login in Supabase
Before coding in FlutterFlow, you need to tell Supabase to allow email and password accounts. 1. Go to your Supabase Dashboard and click on your project.
2. Click Authentication on the left menu, then click Providers.
Figure 1: Authentication Providers in Supabase Dashboard
Figure 2: Authentication Settings Overview
3. Look for Email and switch it ON.
Figure 3: Enabling Email Provider in Supabase
4. If you have not connected the Supabase project with FlutterFlow yet, then go to your FlutterFlow project and Connect Supabase.
○ Open the Flutterflow project, navigate to Settings > Supabase.
○ You will see the two options. Connect to Supabase OAuth OR connect to self-hosted Supabase.
○ For now, click on the first option. This opens the Authorization Popup of Supabase, where you can select the Organization. And click on Authorize Flutterflow. This will connect your selected organization with FlutterFlow, and you will see all of your projects under this organization. Select one project to connect.
○
Figure 4: Connecting Supabase to FlutterFlow
Figure 5: Project Selection in FlutterFlow
Figure 6: Finalizing Supabase Connection
Note: Before Moving to the next step make sure to set Authentication to Supabase. Step 2: Create a Users Table in Supabase
Supabase saves passwords safely behind the scenes, but you need a place to save extra user info (like their name). Create a table with these columns:
Step 3: Create the "Sign Up" Button
1. On your Sign Up page, add two TextFields (one for Email, one for Password) and a Button.
Figure 7: Sign Up Page UI Elements
2. Click the Button and open the Action Flow Editor (on the right side of the screen). 3. Add a new Action: Backend / Database > Authentication > Create Account.
Figure 8: Action Flow Editor for Creating Account
4. Choose your Auth Provider (Email).
5. Select your Email and Password TextFields from the dropdowns, so FlutterFlow knows where to read the text.
Step 4: Create the "Log In" Button
Figure 9: Login Action Configuration
1. On your Login page, add an Email TextField, a Password TextField, and a "Log In" Button. 2. Click the Button and open the Action Flow Editor.
3. Add a new Action: Backend / Database > Authentication > Log In. 4. Choose your provider, link the TextFields, and add a Navigate To action right after it to send them to the Home Page.
Step 5: Create the "Forgot Password" Button
Figure 10: Reset Password Action Configuration
● If using Firebase: Add a button on your app that triggers the Authentication > Reset Password action. Firebase will automatically email a reset link to the user. ● If using Supabase, add a button that triggers the Supabase Authentication > Reset Password action. This sends a special link to the user's email that redirects them back to a "New Password" page you build inside your app.
1. What is authentication in FlutterFlow?
Authentication in FlutterFlow allows applications to verify user identities and manage secure access. It includes features such as account creation, login, password recovery, and maintaining user sessions.
2. Can I add email and password authentication in FlutterFlow?
Yes. FlutterFlow supports email and password authentication using backend services like Firebase Authentication and Supabase Authentication. Users can create accounts, log in, and reset passwords through built-in authentication actions.
3. What is the difference between Firebase Auth and Supabase Auth in FlutterFlow?
Firebase Authentication and Supabase Authentication both provide secure user management. Firebase is widely used with FlutterFlow because of its native integration, while Supabase provides a PostgreSQL-based backend with open-source flexibility.
4. How do I create a sign-up flow in FlutterFlow?
To create a sign-up flow:
- Add email and password TextFields.
- Add a Sign Up button.
- Open the Action Flow Editor.
- Select Authentication → Create Account.
- Connect the TextFields to the authentication action.
FlutterFlow will handle account creation through your connected authentication provider.
5. How do I create a login system in FlutterFlow?
You can create a login system by adding email and password fields, connecting a button to the Authentication → Log In action, and adding a navigation action to redirect authenticated users to the main app screen.
6. How does forgot password work in FlutterFlow?
The forgot password feature allows users to recover access to their accounts. Firebase automatically sends a password reset email, while Supabase sends a reset link that redirects users to a password update page inside your application.
7. Do I need a separate users table with authentication?
Authentication providers handle core account details such as email and password. However, creating a separate users table is recommended for storing additional profile information like names, profile images, preferences, and user settings.
8. How do I connect Supabase authentication with FlutterFlow?
To connect Supabase authentication:
- Open FlutterFlow project settings.
- Navigate to Supabase settings.
- Connect your Supabase organization.
- Select your Supabase project.
- Enable Supabase as the authentication provider.
9. Is FlutterFlow authentication secure?
Yes, when configured correctly. Authentication providers securely manage passwords and user sessions. Developers should also configure proper database security rules and avoid storing sensitive information directly in the client application.
10. Why is authentication important for FlutterFlow apps?
Authentication enables secure user accounts, personalized experiences, private content access, and persistent login sessions. It is an essential feature for applications requiring user profiles, subscriptions, dashboards, or protected data.
.svg)
.svg)
.avif)
