Firebase Authentication using Flutter and Riverpod

So you wanna add Firebase Authentication in your Flutter app using Riverpod but didn’t find any good resources!

This blog will teach you everything about logging users to automatically login users using Riverpod as a State Management.

What is Riverpod btw?

It is a State management library that:

• catches programming errors at compile time rather than at runtime
• removes nesting for listening/combining objects
• ensures that the code is testable

It’s actually considered a rewrite of provider to make improvements that would be otherwise impossible.

To know more about Riverpod and read their Awesome Docs

flutter_riverpod | Flutter Package

Enough Talking Let’s get Started Now

Before Starting make sure you have integrated Firebase in your Flutter App.

If you haven’t added, what are you waiting for. Refer to FlutterFire-docs and follow the steps.

Make sure there are different setup for different platform. If you are using iOS there’s different stuffs you need to do than android .

Let’s add Riverpod to your Flutter App now

Add these dependencies in you pubspec.yaml file

flutter_riverpod: ^0.14.0+3
firebase_auth: ^3.0.2
firebase_core: ^1.5.0
google_sign_in: "^4.5.1" // For google SignIn

NOTE: To future Readers, The code given is strictly according to above Riverpod version. Syntax may change in the future 1.0.0 versions and later. So make sure to use this version if you are following it. If needed I will update this blog in near future.

Let’s look at the main.dart file

The comments are pretty self explanatory, nothing fancy done here just initialized firebase for the time now using Riverpod. Instead of doing this, you could also have used Future Builder , but the main focus here was to use Riverpod in this flutter application.

Here Loading Screen is currently a stateless widget with circular progress indicator in the center and Error screen prints the errors to the screen.

Before discussing about AuthChecker, let’s create a new file authModel which contains Authentication class.

Usually, for better readability , it’s recommended to separate logic and UI and store in different folders.

Notice here, how I have created different folders for different purposes.

Models folders contains mostly data related to backend.

Pages folders contains different screens(UI) which would be visible and Providers -name speaks itself

Defining Authentication Class

Now we have created the Authentication class, let’s work on AuthChecker now. We would be using Stream Provider (similar to stream builder) in the AuthChecker class. we would be watching authStateChange stream which actually gives a stream of users. if this stream is null we will redirect it to LoginScreen else we will redirect it to HomePage.

Before looking at the code let’s create a provider to access that stream and let’s create a provider to access this class too.

Let’s look at the code for creating a Provider

Do not get overwhelmed by the amount of lines written. It’s just comments written for your better understanding of using Riverpod.

Now, we have created providers, let’s look at authChecker.dart file now

So you see , how Riverpod helps write clean code and within few steps you have your Authentication part ready.

Now all it needs to have a beautiful Login UI to see if these stuffs works or not.

Let’s Work on the UI part now

We will be creating the following Login UI

Nothing Fancy just a basic minimalistic Login UI.

Let’s look at the code now

I have used an external Package here for getting Google icon. Make sure to add this dependency in you pubspec.yaml file

font_awesome_flutter: ^9.1.0

Note: This is just UI of the code, we will be maintaining the function in about 2–3 lines more

Let’s work on consuming provider in this widget now.

To consume the providers we have created we are going to wrap the Form widget with Consumer. Now Consumer widget requires 3 things :

• Build Context
• Function watch which takes a Provider base in parameter
• A child (we won’t be needing here)

Let’s look at the code now after wrapping with Consumer

Read the comments between the codes. I have explained the working of almost everything related to context.

Now all is left to write some code for HomePage. This time I would be keeping Short and Simple. I will be displaying some basic details of user in the screen and have a Logout Button for the same.

Let’s Look at the final code now

That’s it you have implemented Flutter Firebase Authentication App using Riverpod.

Let’s see it in Action now

• So as you can see , everything works great
• Error Handling works fine though it needs some beautification
• Haven’t used any Navigator here, everything is handled by the Stream Provider
• Be free to add more features, experiment more with Riverpod.
• It’s not as Complicated as you think.
• If you liked it, share it with others. Give clap so that it reaches to more user.

To access the full Project, Link to GitHub repo

GitHub - 2002Bishwajeet/authentication_riverpod

Till Then peace out ✌️