Firebase Authentications in Flutter

4 min readJun 10, 2021

This blog we will talk about Firebase authentications in Flutter. We will cover,

Email / Password Authentication
Social Authentication
1. Google
2. Facebook
3. Apple
4. Github
Phone Authentication

We will use FlutterFire which is a set of Flutter plugins which connect the Flutter application to Firebase.

Actually, everything was well described in FlutterFire doc, but this blog is for someone who does not like to read official doc or feel like the doc is not easy to follow.

Screens Design

First of all, we will start with screens design.

At the Home Screen, user can choose to sign up or login with email/password, social media login or phone number login.

Firebase Configuration

Go to Firebase and create a new project. After that, we have to add Firebase to our iOS and Android app

Flutter

Create a new flutter app and add these dependencies in pubspec.yaml

Initializing FlutterFire

Before any of the Firebase services can be used, FlutterFire needs to be initialized.

Email/Password Authentication

Enable Email/Password in Authentication Sign-in method in Firebase.

In our Registration and Login Screen, we input Email, Password and Click Sign up / Login button.

After that, we pass the both values into createUserWithEmailAndPassword() or singInWIthEmailAndPassword() of FirebaeAuth and the magic happens. FlutterFire handles all necessary processes for us, it’s even provide us an Error Handling such as: weak-password or email-alreay-in-use.

If everything is ok, we will find the user in Firebase,

Social Authentications

Preparations

Google

Enable Google Sign-in in Firebase Console

Facebook

Ensure the “Facebook” sign-in provider is enabled on the Firebase Console with the Facebook App ID and Secret set.
To get Facebook App ID and Secret set, we have to create a new app in Facebook Developer Console

Github

Ensure to setup an OAuth App from GitHub Developer Settings
And “Github” sign-in provider is enabled on the Firebase Console with the Client ID, Secret and the callback URL. These values will be needed to insert in our code too.

Apple

Enable “Apple” sign-in provider in the Firebase Console and configure Sign In with Apple in Xcode. Note: we have to join the apple developer program to use this feature.

We also need to add some parameters to our info.plist

Phone Authentication

We can use phone number authentication to sign in to Firebase with the following steps:
1. User inputs phone number
2. 6 digits OTP is sent to the user
3. User inputs the OTP
4. Firebase verify the OTP, if correct user can sign in to the Firebase

Link to Github

Conclusion

In this blog we explained and implemented Email/Password, Social and Phone authentication in Flutter using FlutterFire plugin on iOS.

Almost mobile apps need authentication, but we should not spend much time to find out how to implement it. We hope it will be useful for some flutter developer.

Reference

1. https://firebase.flutter.dev/docs/overview
2. [unDraw — Open source illustrations for any idea](https://undraw.co)