Firebase Authentication tutorial — Flutter

Hey everyone! I am building an app using flutter and I needed to add user authentication to the app. So of course I decided to use firebase for that. Using firebase_auth makes this really easy. This is a tutorial on how to add user authentication using email id and password. So let’s get started!

Register your app on firebase console

First let’s make a flutter project. I’ll be using android studio for my development. After that the first thing to do is add your app to firebase. For that go to console.firebase.google.com. There add a project and add a name:

Then click continue and we have te standard page:

I am currently developing in android so let’s register an android app. Click on the android icon. You will be asked to fill the package name:

You can find your apps package name in AndroidManifest.xml in the manifest tag. You can add your apps nickname. Since I’ll be signing in users with just their email addresses, I won’t be adding the SHA-1 certificate. Next we register the app and download the file. The instructions are very clear after that. You need to place that downloaded file in your_app_name/android/app/. Then you follow these instructions:

Since we are using firebase_auth add:

implementation 'com.google.firebase:firbase-auth'

below the last line in dependencies in the second build.gradle file. After that add this in pubspec.yaml:

Check pub.dev for the latest version of firebase_auth. Or you can simply run flutter pub add firebase_auth from the root of your flutter project. This will automatically check the firebase version from pub.dev and add it to pubspec.yaml.

Now restart your app. In the firebase console activate authentication and activate ‘email and password’.

Let’s start by making an authentication class. Make a file in lib/utils/authentication.dart. Import firebase_auth and firebase_core.

class Authentication {
    static Future<FirebaseApp> initialiseFirebase() async {
        FirebaseApp firebaseApp = await Firebase.initializeApp();
        return firebaseApp;
}
}

This function, when gets called, initialises firebase and returns the created app. This function should be called in main.dart where we build the app:

The above code makes use of a future builder that rebuilds the app based on what is returned from a future function. In this case, we initialise the firebase app and based on what’s returned (the connection state), we display different things.

The ErrorScreen() widget is really simple in my case:

The LoadingScreen is just a centered circular progress indicator:

In the second if block I check if the user is already logged in the app. If yes, I return the main screen of the app, and if not I return the sign in page. This is how my SignInScreen() widget looks like:

In Authentication class let’s add another method for signing in an existing user:

We can call this method in the onPressed property of the IconButton:

onPressed: () {
  Authentication.signin(context, _email, _password);
  print("signed in");
},

The code includes a SignUpScreen() widget. Let’s make that. The SignupScreen is almost completely identical to this screen:

Let’s make a new method in authentication.dart for creating a new user. Again the code is very similar to the previous method we implemented;

And there is the basic functionality of authentication! If the main app screen (the AppScreen() widget) has a button, the onPressed/onTap property will be:

Conclusion

I hope this article helps. Firebase has made it very easy to implement authentication and flutter has helped a lot too. If you liked this article and want more articles related to programming and space, follow me and leave a clap!

Thanks for reading!