Flutter – Authentication

Hi Friends,

Hope you are all well. In this post let’s talk about Authentication using Firebase in your flutter apps.

To learn the basics of flutter get my course – Click here.

Other flutter courses – here. (Affiliate Link)

Now before we start, I have already made a video on how to integrate firebase in your applications. Kindly watch it once before getting started.

Alright, I’ll now assume that you have configured your flutter apps + firebase.

Let’s begin.

A screencast of this post:

 

First, let’s install the dependencies. Open up pubspec.yaml and add the below dependencies.

Alright. Now let’s create a few more files for our pages.

In the lib folder create three pages, namely loginpage.dart, homepage.dart and signuppage.dart.

Let’s see the code for these pages one by one.

Signup:

Open up signuppage.dart and add the code as shown below.

Whoa, too much code ? Let’s break this down.

We are simply creating a couple of fields and then we have a button at the bottom. Once we tap on this button., we would need to sign the user to our app.

The above snippet of code handles that. Wait what’s the UserManagement() object.. ?

Well, the firebase authentication system has it’s own way of handling users. But we might want to have our own custom preferences, data for each and every user right ? So, what we’ll do is to store some details of the users in a firestore collection as well.

To handle this let’s create a separate service. Create a new directory under lib folder called services and create a file called usermanagement in it. Now your directory structure should look as shown below.

one

Fine., open up usermanagement.dart and add the below code.

This will simply add a collection called users and will push the user to the homepage.

(I have simply separated this and written this inside a service since this is not at all related to authentication and this code involves storing data on firestore)

Wait., we haven’t yet defined any routes for any of the pages. Open up main.dart file and add the below code.

Nothing fancy in this. We have simply added three routes and linked it with the three pages. That’s it.

Login Page:

Now open loginpage.dart file and add the below code.

Relax.. It’s just a couple of text fields and a couple of buttons. In the signup button, we simply navigate the user to the signup page, and the login button is used to log the user into our system.

Note that I haven’t shown how to use validators to check the fields or anything. I have explained this in detail in my course.

Alright. Now let’s open up the homepage.

Homepage

The homepage simply contains a button to log the user out of the system. That’s it.

Run the app and you would see the below screens.

Screenshot_20180829-215434

Screenshot_20180829-215742

Now, look into your firestore collections. You would see a users collection and it would contain the document of the user that we created now.

two

We are just getting started with User Management. In our next post we’ll talk about social authentication and then move on to more concepts regarding users.

Hope this post helped you guys. If you found this helpful, kindly share it with someone and help them too.

Donate to keep this site alive – here.

(If you want to donate but can’t, it’s fine just subscribe to my youtube channel).

Join our flutter community – here.

Thanks for reading. Peace..

 

 

Liked it? Take a second to support admin on Patreon!