firebase_ui_auth

Firebase UI Auth

Firebase UI Auth is a set of Flutter widgets and utilities designed to help you build and integrate your user interface with Firebase Authentication.

Please contribute to the discussion with feedback.

Platform support

Feature/platform	Android	iOS	Web	macOS	Windows	Linux
Email	✓	✓	✓	✓	✓ (1)	✓ (1)
Phone	✓	✓	✓	╳	╳	╳
Email link	✓	✓	╳	╳	╳	╳
Email verification	✓	✓	✓ (2)	✓ (2)	✓ (1)	✓ (1)
Sign in with Apple	✓	✓	✓	✓	╳	╳
Google Sign in	✓	✓	✓	✓	✓ (1)	✓ (1)
Twitter Login	✓	✓	✓	✓	✓ (1)	✓ (1)
Facebook Sign in	✓	✓	✓	✓	✓ (1)	✓ (1)

1. Available with flutterfire_desktop
2. No deep-linking into app, so email verification link opens a web page

Installation

flutter pub add firebase_ui_auth

Example

Here's a quick example that shows how to build a SignInScreen and ProfileScreen in your app

import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart' hide EmailAuthProvider;
import 'package:firebase_ui_auth/firebase_ui_auth.dart';

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    final providers = [EmailAuthProvider()];

    void onSignedIn() {
      Navigator.pushReplacementNamed(context, '/profile');
    }

    return MaterialApp(
      initialRoute: FirebaseAuth.instance.currentUser == null ? '/sign-in' : '/profile',
      routes: {
        '/sign-in': (context) {
          return SignInScreen(
            providers: providers,
            actions: [
              AuthStateChangeAction<UserCreated>((context, state) {
                // Put any new user logic here
                onSignedIn();
              }),
              AuthStateChangeAction<SignedIn>((context, state) {
                onSignedIn();
              }),
            ],
          );
        },
        '/profile': (context) {
          return ProfileScreen(
            providers: providers,
            actions: [
              SignedOutAction((context) {
                Navigator.pushReplacementNamed(context, '/sign-in');
              }),
            ],
          );
        },
      },
    );
  }
}

Profile screen icons

If you're using ProfileScreen, make sure to add the following to your pubspec.yaml:

fonts:
  - family: SocialIcons
    fonts:
      - asset: packages/firebase_ui_auth/fonts/SocialIcons.ttf

Docs

Find relevant documentation here

• Getting started
• Auth providers.
  • Email auth provider – sign in using email and password.
  • Email verification - verify email.
  • Email link sign in - sign in using a link sent to email.
  • Phone auth provider - sign in using phone number.
  • Universal email sign in - resolve connected providers based on email and sign in using one of those.
  • OAuth - sign in using Apple, Google, Facebook or Twitter.

Issues and feedback

• For issues, please create a new issue on the repository.
• For feature requests, & questions, please use discussion.
• To contribute a change to this plugin, please review our contribution guide and open a pull request.