flutter_auth_ui

flutter_auth_ui

Unofficial firebaseui package for flutter. This library aims to provide support for Android, iOS and the web. Login with Email, Phone, Google account and etc.

Getting Started

This plugin is wrapped Android/iOS/Web native plugin.

Check documents and setup your firebase project.

• iOS : https://firebase.google.com/docs/auth/ios/firebaseui
• Android : https://firebase.google.com/docs/auth/android/firebaseui
• Web: https://firebase.google.com/docs/auth/web/firebaseui

How to use

// Set provider
final providers = [
  AuthUiProvider.anonymous,
  AuthUiProvider.email,
  AuthUiProvider.phone,
  AuthUiProvider.apple,
  AuthUiProvider.facebook,
  AuthUiProvider.github,
  AuthUiProvider.google,
  AuthUiProvider.microsoft,
  AuthUiProvider.yahoo,
  AuthUiProvider.twitter,
];

final result = await FlutterAuthUi.startUi(
  items: providers,
  tosAndPrivacyPolicy: const TosAndPrivacyPolicy(
    tosUrl: "https://www.google.com",
    privacyPolicyUrl: "https://www.google.com",
  ),
  androidOption: const AndroidOption(
    enableSmartLock: false, // default true
    showLogo: true, // default false
    overrideTheme: true, // default false
  ),
  emailAuthOption: const EmailAuthOption(
    requireDisplayName: true, // default true
    enableMailLink: false, // default false
    handleURL: '',
    androidPackageName: '',
    androidMinimumVersion: '',
  ),
);

Requirements

• flutter 3.13.0 or higher
• firebase_auth 5.0.0 or higher

Android

• minSdkVersion 21
• compileSdkVersion 34

iOS

• iOS 13 or higher

Link

• Introduction of flutter_auth_ui.

Tips

EmailLink

Note: In order to implement EmailLink, you will need to prepare in advance; check the firebase documentation first.

• Android
• iOS
• Web

Let's check the code sample for firebase auth.

• Android
• iOS

Android

To handle dynamic link, add FlutterAuthUiPlugin.catchEmailLink to onCreate and onNewIntent. (If you don't use EmailLink, then you don't need to add it.)

import android.content.Intent;
import android.os.Bundle;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;

import com.dr1009.app.flutter_auth_ui.FlutterAuthUiPlugin;

import io.flutter.embedding.android.FlutterActivity;

public class MainActivity extends FlutterActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // check intent
        FlutterAuthUiPlugin.catchEmailLink(this, getIntent());
    }

    @Override
    protected void onNewIntent(@NonNull Intent intent) {
        super.onNewIntent(intent);

        // check intent
        FlutterAuthUiPlugin.catchEmailLink(this, intent);
    }
}

Localizing

Android

Supported without any special settings.

iOS

Check Localizing for iOS: Updating the iOS app bundle.

Web

Check Installation - Option 1: CDN - Localized Widget.

To change the title of AppBar on Android

Add the string value as app_name or fui_default_toolbar_title to your app's strings.xml file. Sample code is strings.xml.

Behavior depends on FirebaseUI-Android.

Show Logo (Android)

1. Add your logo resource file to android/app/src/main/res/drawable/flutter_auth_ui_logo.xml or android/app/src/main/res/drawable-{m~xxxhdpi}/flutter_auth_ui_logo.png
2. Enable AndroidOption.showLogo

Change Appbar and link color (Android)

1. Add flutter_auth_ui_style style to your android/app/src/main/res/values/style.xml

• example

2. Enable AndroidOption.overrideTheme