/firebase_auth_demo_flutter

Reference Authentication Flow with Flutter & Firebase

Primary LanguageDartMIT LicenseMIT

Reference Authentication Flow with Flutter & Firebase

Codemagic build status

YouTube video walk-throughs here:

Flutter & Firebase: Reference Authentication Flow - Intro

Flutter & Firebase: Authentication Service with Provider & ValueNotifier

This project shows how to implement a full authentication flow in Flutter, using various Firebase sign-in methods.

It aims to be a reference implementation. Think of it as "authentication done right".

Project goals

This project shows how to:

  • use the various Firebase sign-in methods
  • build a robust authentication flow
  • use appropriate state management techniques to separate UI, logic and Firebase authentication code
  • handle errors and present user-friendly error messages
  • write production-ready code following best practices

Feel free to use this in your own projects. 😉

NOTE: This project will be kept up to date with the latest packages and Flutter version.

Preview

Google Sign-in

Facebook Sign-in

Email & Password auth

Simplified widget tree

FirebaseAuth features

Supported sign-in methods

  • Anonymous
  • Email & Password
  • Email link (passwordless) (see documentation)
  • Facebook
  • GitHub
  • Google
  • Apple
  • Phone
  • Twitter

Link account with third-party providers

  • Email & Password
  • Facebook
  • GitHub
  • Google
  • Phone
  • Twitter

Other authentication features

  • Email verification (for email & password sign-in)
  • Password reset
  • Sign-in with custom token

Application features

Sign-in Page

  • Navigation to email and password sign-in
  • Apple sign-in
  • Google sign-in
  • Facebook sign-in
  • Anonymous sign-in

Email & password page

  • Custom submit button with loading state
  • Disable all input widgets while authentication is in progress
  • Email regex validation
  • Error hints
  • Focus order (email -> password -> submit by pressing "next" on keyboard)
  • Password of at least 8 characters
  • Show/hide password
  • Password reset flow

Email link page

  • Email input field, backed by secure storage

Authentication

  • Abstract AuthService class, modeled after the firebase_auth API
  • FirebaseAuthService implementation
  • MockAuthService for testing
  • Firebase project configuration for iOS & Android
  • Toggle FirebaseAuthService and MockAuthService at runtime via developer menu

Architecture

Other

  • Platform-aware alert dialogs for confirmation/error messages
  • Fully compliant with the official Flutter analysis_options.yaml rules

TODO

  • Internationalization
  • Full test coverage
  • Improve documentation

Running the project with Firebase

To use this project with Firebase authentication, some configuration steps are required.

  • Create a new project with the Firebase console.
  • Add iOS and Android apps in the Firebase project settings.
  • On Android, use com.codingwithflutter.firebase_auth_demo_flutter as the package name (a SHA-1 certificate fingerprint is also needed for Google sign-in).
  • then, download and copy google-services.json into android/app.
  • On iOS, use com.codingwithflutter.firebaseAuthDemo as the bundle ID.
  • then, download and copy GoogleService-Info.plist into iOS/Runner, and add it to the Runner target in Xcode.

See this document for full instructions:

Additional setup instructions for Google and Facebook sign-in:

Additional References

A lot of the techniques used in this project are explained in great detail, and implemented step-by-step in my Flutter & Firebase Udemy course.

This is available for early access at this link (discount code included):