firebase_auth_ui 0.0.3

firebase_auth_ui #

Flutter plugin of Firebase UI which allows to add login/sign-up quickly.

NOTE: This plugin is under development. Please provide Feedback and Pull Requests in order to have your feature(s) integrated.

Screenshot

Usage #

Import #

import 'package:firebase_auth_ui/firebase_auth_ui.dart';
import 'package:firebase_auth_ui/providers.dart';

Use of the plugin #

Present the auth screen #
FirebaseAuthUi.instance()
        .launchAuth(
          [
            AuthProvider.email(), // Login/Sign up with Email and password
            AuthProvider.google(), // Login with Google
            AuthProvider.facebook(), // Login with Facebook
	        AuthProvider.twitter(), // Login with Twitter
          ],
          tosUrl: "https://my-terms-url", // Optional
          privacyPolicyUrl: "https://my-privacy-policy", // Optional,
        )
        .then((firebaseUser) =>
            print("Logged in user is ${firebaseUser.displayName}"))
        .catchError((error) => print("Error $error"));
Logout #
void logout() async {
	final result = await FirebaseAuthUi.instance().logout();
	// ...
}

Plugin returns FirebaseUser with following details:

FieldDescription
uidUID of authenticated user
displayNameDisplay name of user
emailEmail of user
phoneNumberPhone number of user
photoUriURI of user's photo
providerIdIndicates through which provider user was authenticated.

Please note that above details may be null depending on the provider user used to sign and user's privacy settings on respective provider.

If you want to have full FirebaseUser object then please add firebase_auth dependency. You can then use FirebaseAuth.instance.currentUser().

Configuration #

Create a project on Firebase console and add Android and iOS platform in Settings > Your apps

  • Open the Authentication section and then navigate to Sign in method. Please enable Email/Password, Google, Facebook and Twitter method depending on your need and click save.
  • Navigate back to Settings > Your apps
  • Download "google-services.json" for Android
  • Download "GoogleService-Info.plist"for iOS

Android #

Open project's build.gradle ([flutter_project]/android/build.gradle) and add following in dependencies{ ... }:

classpath 'com.google.gms:google-services:4.3.2'

Open app module's build.gradle ([flutter_project]/android/app/build.gradle) and add following at the end of file, i.e as a last line:

apply plugin: 'com.google.gms.google-services'

Copy the downloaded google-services.json in [flutter_project]/android/app directory.

iOS #

Copy the downloaded GoogleService-Info.plist in [[flutter_project]/ios/Runner directory.

Additional setup for Google, Facebook sign-in #

Google #

Android #

No additional setup required.

iOS #

  • Open the GoogleService-Info.plist and copy REVERSED_CLIENT_ID. It should look like com.googleusercontent.apps.[APP_ID-somevalue]
  • Now open "Info.plist" ([flutter_project]/ios/Runner and paste following by replacing [REVERSED_CLIENT_ID] with yours copied in above step:
<key>CFBundleURLTypes</key>
	<array>
		<dict>
			<key>CFBundleURLSchemes</key>
			<array>
				<string>[REVERSED_CLIENT_ID]</string>
			</array>
		</dict>
	</array>

Facebook #

Android #

Add following lines in strings.xml [flutter_project]/android/app/src/main/res/values

<string name="facebook_application_id" translatable="false">[YOUR_FACEBOOK_APP_ID]</string>
<string name="facebook_login_protocol_scheme" translatable="false">fb[YOUR_FACEBOOK_APP_ID]</string>

iOS #

  • Add fbFACEBOOK_APP_ID as a URL scheme Open open Info.plist ([flutter_project]/ios/Runner and paste following by replacing [YOUR_FACEBOOK_APP_ID] with yours:
<key>CFBundleURLTypes</key>
	<array>
		<dict>
			<key>CFBundleURLSchemes</key>
			<array>
				<string>fb[YOUR_FACEBOOK_APP_ID]</string>
			</array>
		</dict>
	</array>

NOTE: If you added Google by following above steps, you already have CFBundleURLSchemes key defined with [REVERSE_CLIENT_ID]. In that case, just add

<string>fb[YOUR_FACEBOOK_APP_ID]</string>

below [REVERSE_CLIENT_ID]

  • Add facebook app id and app's name in Info.plist
<key>FacebookAppID</key>
	<string>[YOUR_FACEBOOK_APP_ID]</string>
	<key>FacebookDisplayName</key>
	<string>[YOUR_FACEBOOOK_APP_NAME]</string>

Twitter #

Android #

Add following lines in strings.xml [flutter_project]/android/app/src/main/res/values

<string name="twitter_consumer_key" translatable="false">[YOUR_CONSUMER_KEY]</string>
<string name="twitter_consumer_secret" translatable="false">fb[YOUR_CONSUMER_SECRET]</string>

iOS #

If you have already configured Google login for iOS following above steps, then you don't need to do anything else. If not, please follow the exact same step.

Customization #

General #

  • The order of login buttons depends on the sequence of AuthProviders you passed in launchAuth(). For example if you have Email, Google and Facebook auth configured and would like the Facebook to appear first, you can simply pass the AuthProvider.facebook() as first element in the providers list.

Android #

  • Actionbar title: Define your app's name in strings.xml and that'll appear as title in action bar.
  • Actionbar and status bar color: Add following in your colors.xml [flutter_project]/android/app/src/main/res/values
<color name="colorPrimary">#[ACTIONBAR_COLOR]</color>
<color name="colorPrimaryDark">#[STATUSBAR_COLOR]</color>

Note: If you don't have colors.xml, please create one.

0.0.3 #

  • Add Twitter login support

0.0.2 #

  • Fix facebook and google providers not appearing + Updated README

0.0.1 #

  • Initial release with following Auth Providers:
  • Email
  • Google
  • Facebook

example/README.md

firebase_auth_ui_example #

Demonstrates how to use the firebase_auth_ui plugin.

Getting Started #

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  firebase_auth_ui: ^0.0.3

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:firebase_auth_ui/firebase_auth_ui.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
70
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
90
Overall:
Weighted score of the above. [more]
83
Learn more about scoring.

We analyzed this package on Feb 13, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.5
  • Flutter: 1.12.13+hotfix.7

Health suggestions

Format lib/providers.dart.

Run flutter format to format lib/providers.dart.

Maintenance suggestions

Package is pre-v0.1 release. (-10 points)

While nothing is inherently wrong with versions of 0.0.*, it might mean that the author is still experimenting with the general direction of the API.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test