Email Authentication using Firebase Auth + Flutter

Email Authentication using Firebase Auth + Flutter

www.bacancytechnology.com

Table of Contents 1. Introduction 2. Tutorial Goal: Email Authentication using Firebase Auth + Flutter 3. What is Firebase Auth?

4. Steps to implement Email Authentication using Firebase Auth + Flutter Create Flutter app Add Dependencies Create Firebase Project Enable Firebase Email Authentication Initialize Firebase App Create Helper Class for Authentication Create Components 5. Conclusion

Introduction

Rarely have we seen that mobile applications are connected to the backend.

There are other platforms- AWS or Azure, but no platform could stand Firebase. With the help of Firebase and Flutter, one can develop mobile applications in a better way.

In this tutorial, we will learn about building a demo application from scratch and implementing Email Authentication using Firebase Auth + Flutter.

Before getting started with the demo, let’s see what we are building in this tutorial.

Tutorial Goal: Email Authentication with Firebase Auth + Flutter

Watch Video

What is Firebase Auth?

Most of the applications require authentication to verify the user’s identity.

Firebase Authentication allows you to use its back-end services by providing SDKs and convenient UI libraries for user authentication in your app. It makes the process less complicated and easy to develop. One can authenticate the user with the help of passwords, phone numbers, or identity providers ( Facebook, Google, and Twitter) Click here to watch the video introducing Firebase Auth.

Now, let’s see what does Firebase Authentication provides: Email/password authentication Sign in with Google, Apple, Facebook, Twitter, Github Phone number authentication Custom authentication Anonymous authentication From the list mentioned above, I’ll be covering Email and password authentication using Firebase Auth + Flutter app. So without further ado, let’s get started with some technical work.

Steps to implement Email Authentication using Firebase Auth + Flutter

Here’s the entire source code for the demo application – Flutter Firebase Auth Github.

Create Flutter project Run the below command to create a flutter project. You can name it anything here – flutter_firebase_auth flutter create flutter_firebase_auth Add dependencies Update your pubspec.yaml file to add dependencies. dependencies: flutter_test: sdk: flutter cupertino_icons: ^1.0.2 firebase_auth: ^1.0.1 # add this line firebase_core: ^1.0.2 # add this line

Run the following command to install the packages.

flutter pub get

Your pubspec.yaml file would look something like this-

For using these packages, we need to import them as mentioned belowimport 'package:firebase_auth/firebase_auth.dart'; import 'package:firebase_core/firebase_core.dart';

Further moving towards the initial Firebase Setup.

Create Firebase Project We need to create a Firebase project; for that, visit the Firebase console. Start by adding a new project, giving it a name, agreeing to all they’ve asked, and click ‘Create Project.’

Once you’re done creating the project, it’s time to integrate it with Android and iOS applications.

Add Android App

Register your Android application as shown in the below screenshot-

After filling the required fields, you’ll see something like this-

Follow the instructions; Download googleservices.json and put it in MyApplication/app folder.

You can skip the next step as we are using: Firebase core and Firebase auth packages.

Click ‘Continue to Console’ to complete the process.

Okay, so this was about integrating the Android app. Now, let’s follow the same steps for integrating the iOS app.

Add iOS App Click on Add App

Click on iOS

Fill out the required fields as shown below-

Further Download GoogleServices-Info.plist and put it in MyApplication folder as shown below-

For Linux/windows, put this file in ios/Runner/Directory.

Skip steps three and four as we are using packages. Hit ‘Continue to console’ for completing the process.

Enable Firebase Email Authentication On visiting the Firebase dashboard, click ‘Authentication.’

Under the Sign-in method click Email/Password and enable it using the toggle button.

So, we are done setting and integrating Firebase Authentication with the Flutter application.

Initialize Firebase App Open main.dart and use the following code snippet to initialize Firebase App. // main.dart future main() async { WidgetsFlutterBinding.en sureInitialized(); await Firebase.initializeApp(); runApp(MyApp()); }

Create Helper Class for Authentication Create a file, name it according to your choice; here authentication.dart and use the following code for creating helper class for authentication. // authentication.dart import 'package:firebase_auth/firebase_auth.da rt'; class AuthenticationHelper { final FirebaseAuth _auth = FirebaseAuth.instance; get user => _auth.currentUser; //SIGN UP METHOD Future signUp({String email, String password}) async { try {

await _auth.createUserWithEmailAndPasswo rd( email: email, password: password, ); return null; } on FirebaseAuthException catch (e) { return e.message; } } //SIGN IN METHOD Future signIn({String email, String password}) async { try { await _auth.signInWithEmailAndPassword(e mail: email, password: password); return null;

} on FirebaseAuthException catch (e) { return e.message; } } //SIGN OUT METHOD Future signOut() async { await _auth.signOut(); print('signout'); } }

We will call the AuthenticationHelper from SignUp and Login components on clicking the signup and login button, respectively.

The function will take two parameters and then further pass it for Firebase Authentication.

Create components Create two components for login and signup – Login.dart and Signup.dart, respectively.

Call AuthenticationHelper, which we created in the above step.

Use the following code snippet to perform on clicking the Sign-Up button.

// Signup.dart // Get username and password from the user.Pass the data to // helper method AuthenticationHelper() .signUp(email: email, password: password) .then((result) { if (result == null) { Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) => Home())); } else { Scaffold.of(context).showSnackBar(Snac kBar(

content: Text( result, style: TextStyle(fontSize: 16), ), )); } });

Use the following code snippet to perform on clicking the Login button. // Login.dart

AuthenticationHelper() .signIn(email: email, password: password) .then((result) { if (result == null) { Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) => Home())); } else { Scaffold.of(context).showSnackBar(SnackB ar( content: Text( result, style: TextStyle(fontSize: 16), ), )); } });

The function takes two arguments: email and password. On successfully executing the function and returning no errors, i.e., result == null, the app will be redirected to the Home page.

So this was all about implementing Email Authentication using Firebase Authentication + Flutter. I hope your purpose of landing on this tutorial has served you well.

Conclusion

Flutter is a popular framework for developing mobile applications at our ease. The combination of Flutter and Firebase makes the development process more straightforward than before. We at Bacancy Technology have skillful and dedicate developers having expertise with Flutter as well as Firebase. In case you require a helping hand for building your project, then contact us and hire Flutter app developer.

Thank You

www.bacancytechnology.com