stacked_firebase_auth

Description:

stacked firebase auth

Firebase Authentication Service #
This package is meant to work with the Stacked framework and provides a FirebaseAuthenticationService that provides the following logins:

Email/password
Google
Apple
Facebook
Anonymous

It wraps the functionality for those four auth providers. Examples to come soon. This package has initially been published to improve the BoxtOut tutorial for setting up Firebase Auth.
Dependencies #
This package is relying on the following great packages to support the social providers:

google_sign_in
sign_in_with_apple
flutter_facebook_auth

How does it work? #

Configure your Firebase project to enable authentication
Configure your Flutter project with Firebase
Install the package and register the service
Integrate the desired social authentication provider(s)

Google
Apple
Facebook


Integrate email/password authentication
Integrate anonymous authentication
Logout
Troubleshooting

Configure a basic Firebase Authentication project #

Go to the Firebase Console and create a new project
In the Build section, chose Authentication, then click on Get started to enable it.
You are now able to chose which providers you want to enable. For each of them, we have a small guide here-under.

You can find official doc and information on https://firebase.google.com/docs/auth.
Integrate and configure Firebase to your project #
💡 More info about this process here: https://firebase.google.com/docs/flutter/setup
Step 1: Install the required command line tools (once)

If you haven't already, install the Firebase CLI.
Log into Firebase using your Google account by running the following command: firebase login.
Install the FlutterFire CLI with the following dart command : dart pub global activate flutterfire_cli.

Step 2: Configure your apps to use Firebase (on each project)

Use the flutterfire CLI to enable Firebase and create the configuration files in your project: flutterfire configure. You will be asked to select the project you want to configure and the platforms you want to enable.
In your lib/main.dart, you will now be able to add await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform); to initialise the default instance of Firebase.

// Add those imports
import 'package:example/firebase_options.dart';
import 'package:firebase_core/firebase_core.dart';

Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();

// Add this line
Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);

await setupLocator();
setupDialogUi();
setupBottomSheetUi();
runApp(const MainApp());
}

copied to clipboard
Install the package and register the service #

If you support iOS, update the ios\Podfile to include platform :ios, '12.0'
If you support Android, update android/app/build.gradle to define minSdkVersion to 21

defaultConfig {
...
minSdkVersion 21
targetSdkVersion 33
...
}
copied to clipboard

Run flutter pub add stacked_firebase_auth to add the package to your dependencies
In your lib\app\app.dart file, add LazySingleton(classType: FirebaseAuthenticationService),at the end of the dependencies list.

@StackedApp(
routes: [ ... ],
dependencies: [
// Other dependencies
LazySingleton(classType: FirebaseAuthenticationService),
],
bottomsheets: [ ... ],
dialogs: [ ... ],
)
class App {}

copied to clipboard

Regenerate your app via the Stacked CLI: stacked generate
You can now fetch and use the FirebaseAuthenticationService from locator<FirebaseAuthenticationService>().

Integrate the social authentication providers #
Note that according to https://developer.apple.com/sign-in-with-apple/get-started, starting June 30, 2020, apps that use login services must also offer a "Sign in with Apple" option when submitting to the Apple App Store.
Google
This package is heavily relying on google_sign_in. Please follow the configuration process described on their doc the the platforms you want to support.
You will find how-to

Create an OAuth app on Google Cloud Console
Activate the Google Sign-in provider on Firebase Console and link to your OAuth app
Run flutterfire configure again to update config files
iOS Add required information to ios/Runner/Info.plist
Android Add SHA1 or SHA256 to app configuration

Once done you can use the following method to trigger Google Sign-in flow:
Future<FirebaseAuthenticationResult> signInWithGoogle({String? webLoginHint})
copied to clipboard
Apple
This package is heavily relying on sign_in_with_apple. Please follow the configuration process described on their doc the the platforms you want to support.
You will find how-to

Register an App ID on https://developer.apple.com/account/resources/identifiers/list/bundleId
Activate the Apple Sign-in provider on Firebase Console + configure the callback URL in the Service IDs.
iOS Activate Sign in with Apple capability through XCode
4 Android Ensure the authentication window will be run via a full external browser (otherwise authentication might fail with storage access error).

To know if Apple Signin is available on the platform and if you need to display the button, you can use
Future<bool> isAppleSignInAvailable()
copied to clipboard
Then, to trigger the flow, just use
Future<FirebaseAuthenticationResult> signInWithApple({
required String? appleRedirectUri,
required String? appleClientId,
bool askForFullName = true,
})
copied to clipboard
Facebook
This package is heavily relying on flutter_facebook_auth. Please follow the configuration process described on their doc the the platforms you want to support.
You will find how-to

Create and configure the app on Facebook
Activate the Facebook Sign-in provider on Firebase Console and link to your OAuth app
iOS Add required information to Podfile, ios/Runner/Info.plist,
Android Add required resources and configuration files (in /android/app/src/main/res/values/strings.xml and /android/app/src/main/AndroidManifest.xml)

Once done you can use the following method to trigger Facebook Sign-in flow:
Future<FirebaseAuthenticationResult> signInWithFacebook({String? webLoginHint})
copied to clipboard
Integrate email/password authentication #
💡 More info about this authentication here: https://firebase.google.com/docs/auth/flutter/password-auth

Enable Email/Password in the providers list
Use available methods to enable the flow

loginWithEmail({required String email, required String password})
createAccountWithEmail({required String email, required String password})
sendResetPasswordLink(String email)
validatePassword(String password)
updatePassword(String password)
updateEmail(String email)
updateDisplayName(String displayName)
updatePhotoURL(String photoUrl)



Integrate anonymous authentication #
💡 More info about this authentication here: https://firebase.google.com/docs/auth/flutter/anonymous-auth

Enable Anonymous in the providers list
Use loginAnonymously() to enable the flow

Logout #

No matter which authentication process the user used, simply use Future logout() to logout.
Clean the user data you might have stored (database, settings...) to start fresh.

Troubleshooting #
App is crashing on iOS when using signInWithGoogle #
Make sure you enabled Google provider on your Firebase App > Authentication.
Then, make sure you followed the iOS integration and included required keys in ios/Runner/Info.plist.
You need to have the following configuration:
<!-- Google Signin Configuration -->
<key>GIDClientID</key>
<string>[YOUR IOS CLIENT ID]</string>
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleTypeRole</key>
<string>Editor</string>
<key>CFBundleURLSchemes</key>
<array>
<!-- TODO Replace this value: -->
<!-- Copied from GoogleService-Info.plist key REVERSED_CLIENT_ID -->
<string>com.googleusercontent.apps.[REVERSED_CLIENT_ID]</string>
</array>
</dict>
</array>
<!-- @END Google Signin Configuration -->
copied to clipboard
App is crashing on iOS when using signInWithFacebook #
Make sure you enabled Facebook provider on your Firebase App > Authentication.
Then, make sure you followed the iOS integration and included required keys in ios/Runner/Info.plist.
You need to have the following configuration:
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLSchemes</key>
<array>
<string>fb{your-app-id}</string>
</array>
</dict>
</array>
<key>FacebookAppID</key>
<string>{your-app-id}</string>
<key>FacebookClientToken</key>
<string>CLIENT-TOKEN</string>
<key>FacebookDisplayName</key>
<string>{your-app-name}</string>
<key>LSApplicationQueriesSchemes</key>
<array>
<string>fbapi</string>
<string>fb-messenger-share-api</string>
</array>
copied to clipboard
How do I configure CFBundleURLSchemes in ios/Runner/Info.plist when using both Facebook and Google? #
You should merge values in Info.plist, instead of adding a duplicate key.
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLSchemes</key>
<array>
<string>fb{your-app-id}</string>
<string>com.googleusercontent.apps.[REVERSED_CLIENT_ID]</string>
</array>
</dict>
</array>
copied to clipboard
Google Signin is failing on Android #
Make sure you enabled Google provider on your Firebase App > Authentication.
The following message might appear: PlatformException(sign_in_failed, com.google.android.gms.common.api.ApiException: 10:, null, null).
To solve that, make sure you added correctly the SHA1 or SHA256 signature of your app in the Android app configuration in Firebase.
More info here: https://developers.google.com/android/guides/client-auth.
⚠️ Debug and prod build have different SHA signatures.
Future Development #

❌ Add functionality to set the logger or use a default one
❌ Add the codes thrown from the service into the readme
❌ Add option to throw exceptions instead of returning a FirebaseAuthenticationResult
✅ Add example to the package
✅ Add a proper readme
✅ Add examples into the readme
❌ Add mobile authentication option (implementation already exists, it just needs to be moved in here)
❌ Add other authentication providers

Breaking Changes #

2.20.0: Add flutter_facebook_auth dependency and its implementation
0.2.1: Removed flutter_facebook_auth dependency and its implementation since it was causing a MissingPluginException if the app isn't setup for Facebook Auth

ℹ️ For the full changelog, see CHANGELOG.md.