Firebase Authentication with Flutter
Introduction
In this tutorial, I’m going to show you how to create an app with flutter and connecting firebase to Authenticate the user. I’m going to interact with firebase to authenticate the user and do some more functions in the Firebase. With this tutorial, you can develop a simple flutter app where the user can register through the app and login to the app. If the user wants, they can change the email, password even removes the user.
Objectives
Objectives of this project are follows
- Configuring Firebase on your flutter project.
- Create Register, Login and may other functions in the Firebase.
Method
Step 1
As the first thing, we must create a flutter project. If you don’t know how to create a flutter project, please refer to my previous tutorial to configure flutter on your pc. After creating the flutter project, we must configure Firebase on the project.
For android go to the Firebase console and click on add app button and select android icon so you can see a form like below
Add the project name. You can get the project name by opening the AndroidManifest file where the location is android/app/src/main/AndroidManifest.xml. After that download the google-services.json. Then go to the project and place your google-services.json file inside the app folder of the android directory( android/app).
We need to add the Google Services Gradle plugin to read google-services.json. change the build.gradle as follow
Sync the project after you have done the modification.
For iOS, open ios/Runner.xcworkspace to launch Xcode. The package name can be found in the bundle identifier at Runner view. Download the config file which is GoogleService-info.plist (iOS). Drag the GoogleService-info.plist into the Runner subfolder inside Runner as shown below.
Next, go to the firebase console and tap on the authentication button on the left side navigation bar. The enable the email/password as shown below. By enabling this you will be able to register users to Firebase.
Now Firebase configuration is done. Next thing we must do in the code level.
Step 2
Next, you must add dependencies to your flutter project. Go to your pubspec.yaml file and under the dependency add the following line.
firebase_auth: ^0.9.0
and save the project.
Step 3
Now we need to write services to connect the mobile app with Firebase. Inside the lib folder create a new folder as Services. Then create a dart file inside the services folder as authentication.dart and insert the following
In the above code, I created a BaseAuth class to write the method we are going to implement and pass the parameters. Then I create a separate Auth class and implement it to the BaseAuth class so the concreate methods can be implemented in the Auth class.
Step 4
In this step, we need to design the screens to register and login. Create a folder inside the lib directory as pages. Inside the pages folder creates a dart file called login_signup_page.dart and insert the following dart code.
Here for both Register and Login, I have used the same page. But the UI is different.
Next, we need to create a file called home_page.dart. Inside the home page, I’m going to do the following activities
- Change the password of the user
- Change the email of the user.
- Send account confirmation mail to the user.
- Remove user
- Sign out
Next, create a page called root_page.dart and insert the following code.
From this, it decides which page must be loaded when the app is launched. If the user has not logged it will redirect to the login page. Otherwise, if the user already authenticated it will be redirected to the home page.
Finally, change the main.dart file as follows.
Now you can run the app by running flutter run command on the terminal.
Conclusion
In this tutorial, we learn how to use Firebase to log users through mobile apps and do other functionalities in the Firebase. Now you can create a general authentication app by using Firebase.
Source Code
If you face any trouble in the development, you can find the source code for this app from here.
