Build a branded login page using a Stack with a background image or gradient, a centered SingleChildScrollView Card containing email and password TextFields, a Remember Me checkbox (persisted in App State), a Login button, an OR divider, Google and Apple social login buttons, and a Forgot Password link. Handle Firebase Auth errors (user-not-found, wrong-password, too-many-requests) with specific user-facing messages in a SnackBar.
Building a Branded Login Page with Social Auth and Error Handling in FlutterFlow
The login screen is the first impression of your app. This tutorial builds a polished, keyboard-aware sign-in page with branded visuals, email/password authentication, Google and Apple social login, Remember Me persistence, and detailed error handling for common Firebase Auth failures.
Prerequisites
- A FlutterFlow project with Firebase Authentication enabled
- Email/Password sign-in method enabled in Firebase console → Authentication → Sign-in method
- Google and Apple sign-in providers configured if using social login
- A home page to navigate to after successful login
Step-by-step guide
Create the login page with Stack background and SingleChildScrollView for keyboard awareness
Create the login page with Stack background and SingleChildScrollView for keyboard awareness
Create a LoginPage. Set the root widget to a Stack. First child: a full-screen Container with either a DecorationImage (background photo, fit: cover, colorFilter darken overlay) or a gradient (LinearGradient from Theme primary to secondary). Second child: a SafeArea containing a SingleChildScrollView (to prevent overflow when the keyboard opens). Inside the scroll view, a Center containing a Container (Card-like: white background, borderRadius: 16, padding: 32, margin: 24, maxWidth: 400). This Card holds all the login form widgets.
Expected result: A full-screen branded background with a centered white card that scrolls up when the keyboard appears on small screens.
Add app logo, email TextField, and password TextField with visibility toggle
Add app logo, email TextField, and password TextField with visibility toggle
Inside the Card Container, add a Column (crossAxisAlignment: center). First child: Image (app logo, height: 60). SizedBox(24). Email TextField: keyboardType: emailAddress, prefixIcon: email, hintText: 'Email address', autofillHints: [email], validator checks email format. SizedBox(16). Password TextField: obscureText: true (bound to Page State isPasswordVisible), prefixIcon: lock, suffixIcon: IconButton (visibility/visibility_off, toggles isPasswordVisible), hintText: 'Password'. On Page Load: if App State rememberedEmail is not empty, pre-fill the email TextField.
Expected result: The login card shows the app logo, an email field, and a password field with a tap-to-reveal eye icon.
Add Remember Me checkbox and Login button with Firebase Auth sign-in action
Add Remember Me checkbox and Login button with Firebase Auth sign-in action
Below the password field, add a Row: Checkbox bound to Page State rememberMe + Text 'Remember Me'. On the right side of the Row: TextButton 'Forgot Password?' (On Tap → navigate to ForgotPasswordPage or trigger Send Password Reset Email for the entered email). Below, a full-width Button 'Log In' (primary color, rounded). On Tap action flow: if rememberMe is true → Update App State rememberedEmail = emailValue (persisted), else clear it. Then call Firebase Auth Sign In with Email (email, password). On Success → Navigate to HomePage with Replace Route.
Expected result: Tapping Log In authenticates with Firebase. If Remember Me is checked, the email is saved for next login. Forgot Password triggers a reset email.
Add OR divider and Google/Apple social login buttons
Add OR divider and Google/Apple social login buttons
Below the Login button, add a Row: Expanded Divider + Padding Text 'OR' (bodySmall, grey) + Expanded Divider. SizedBox(16). Add a Row with two social login Containers: Google button (white bg, border, Row with Google logo Image 20px + Text 'Google') and Apple button (black bg, Row with Apple logo Image 20px + Text 'Apple', white text). On Google button tap → Firebase Auth Sign In with Google. On Apple button tap → Firebase Auth Sign In with Apple. Both → On Success → Navigate to HomePage with Replace Route. Below the social buttons: Row with Text 'Don't have an account?' + TextButton 'Sign Up' (On Tap → Navigate to SignUpPage).
Expected result: An OR divider separates password login from social login. Google and Apple buttons authenticate via their respective providers.
Handle Firebase Auth error codes with specific user-facing SnackBar messages
Handle Firebase Auth error codes with specific user-facing SnackBar messages
On the Login button's On Failure branch of the Sign In action, add Conditional Actions checking the error code. If error code contains 'user-not-found' → Show SnackBar 'No account found with this email. Please sign up.' If 'wrong-password' → Show SnackBar 'Incorrect password. Please try again.' If 'too-many-requests' → Show SnackBar 'Too many failed attempts. Please try again later.' If 'user-disabled' → Show SnackBar 'This account has been disabled. Contact support.' Default → Show SnackBar 'Login failed. Please check your credentials.' Style all error SnackBars with red background.
Expected result: Each Firebase Auth failure shows a specific, helpful error message instead of a generic or technical error string.
Complete working example
1PAGE: LoginPage2 Page State: isPasswordVisible (Boolean, false), rememberMe (Boolean, false)3 App State: rememberedEmail (String, persisted)45WIDGET TREE:6 Stack7 ├── Container (full screen)8 │ Decoration: DecorationImage (background.jpg, fit: cover)9 │ colorFilter: ColorFilter.mode(black54, BlendMode.darken)10 │ OR: gradient (primary → secondary)11 └── SafeArea12 SingleChildScrollView13 Center14 Container (white, borderRadius: 16, padding: 32, margin: 24, maxWidth: 400)15 Column (crossAxisAlignment: center)16 ├── Image (logo, height: 60)17 ├── SizedBox (24)18 ├── TextField (email)19 │ keyboardType: emailAddress20 │ prefixIcon: email21 │ hintText: "Email address"22 │ initialValue: App State rememberedEmail23 ├── SizedBox (16)24 ├── TextField (password)25 │ obscureText: !isPasswordVisible26 │ prefixIcon: lock27 │ suffixIcon: IconButton (visibility toggle)28 │ hintText: "Password"29 ├── SizedBox (12)30 ├── Row (spaceBetween)31 │ ├── Row: Checkbox (rememberMe) + Text "Remember Me"32 │ └── TextButton "Forgot Password?"33 │ On Tap → Send Password Reset Email34 ├── SizedBox (16)35 ├── Button "Log In" (full width, primary, borderRadius: 8)36 │ On Tap:37 │ 1. If rememberMe → save email to App State38 │ 2. Firebase Sign In (email, password)39 │ 3. On Success → Navigate HomePage (Replace Route)40 │ 4. On Failure → Conditional SnackBar by error code41 ├── SizedBox (16)42 ├── Row: Divider + Text "OR" + Divider43 ├── SizedBox (16)44 ├── Row (center, spacing: 12)45 │ ├── Container (Google button)46 │ │ Row: Google logo + Text "Google"47 │ │ On Tap → Sign In with Google → Navigate Home48 │ └── Container (Apple button)49 │ Row: Apple logo + Text "Apple"50 │ On Tap → Sign In with Apple → Navigate Home51 ├── SizedBox (24)52 └── Row (center)53 ├── Text "Don't have an account?"54 └── TextButton "Sign Up"55 On Tap → Navigate SignUpPage5657ERROR HANDLING:58 user-not-found → "No account found with this email."59 wrong-password → "Incorrect password. Please try again."60 too-many-requests → "Too many attempts. Try again later."61 user-disabled → "Account disabled. Contact support."62 default → "Login failed. Check your credentials."Common mistakes when creating a Custom Sign-In Screen for Your FlutterFlow App
Why it's a problem: Not wrapping the login form in SingleChildScrollView
How to avoid: Wrap the Card in a SingleChildScrollView so the form scrolls up when the keyboard appears, keeping all fields accessible.
Why it's a problem: Showing the raw Firebase Auth error message to the user
How to avoid: Check the error code in Conditional Actions and show a friendly, specific SnackBar message for each known error.
Why it's a problem: Using Navigate To instead of Replace Route after successful login
How to avoid: Use Navigate with Replace Route so the login page is removed from the stack and Back goes to the app's previous page or exits.
Best practices
- Use a Stack with darkened background image for visual branding without sacrificing text readability
- Wrap the form in SingleChildScrollView inside SafeArea for keyboard and notch awareness
- Add a visibility toggle (eye icon) on the password field so users can verify what they typed
- Persist Remember Me email in App State so the field pre-fills on the next app launch
- Handle each Firebase Auth error code with a specific user-facing message
- Use Replace Route for post-login navigation to prevent Back-button return to the login page
- Set autofillHints on TextFields so password managers can auto-fill credentials
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to build a branded login screen in FlutterFlow with a background image, email/password fields, Remember Me, Google and Apple social login, Forgot Password, and specific error handling for user-not-found, wrong-password, and too-many-requests. Show me the widget tree and action flow.
Create a login page with a dark background image, a white card in the center with an email field, password field, remember me checkbox, login button, Google and Apple sign-in buttons, and a sign up link at the bottom.
Frequently asked questions
How do I pre-fill the email field when the user checked Remember Me last time?
Store the email in a persisted App State variable rememberedEmail. On LoginPage load, check if rememberedEmail is not empty and set it as the initial value of the email TextField.
Can I add biometric authentication (Face ID / fingerprint)?
Yes. Use the local_auth package in a Custom Action. On Page Load, check if biometrics are available and if the user has logged in before. If both, prompt biometric auth and skip the password step.
Why does the password visibility toggle use Page State instead of a local variable?
FlutterFlow widgets bind to Page State or App State. A local variable would not trigger a widget rebuild. Page State toggle ensures the TextField re-renders with the updated obscureText value.
How do I handle the user pressing Login with empty fields?
Add form validation: check that email is not empty and matches an email regex, and that password is at least 6 characters. Show a SnackBar with the specific validation error before calling Firebase Auth.
Can I style the social login buttons to match Google and Apple brand guidelines?
Yes. Use the official Google 'G' logo and Apple logo images. Google button: white background, thin grey border, black text. Apple button: black background, white text. Download official assets from each provider's branding page.
Can RapidDev help build a complete authentication system?
Yes. RapidDev can implement email/password, social login, phone OTP, magic links, multi-factor authentication, role-based access control, and account recovery flows.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation