Email authentication with firebase in flutter android and ios

Author
April 06, 2022

In this article i will explain you step by step how you can add email authentication to your flutter firebase application

Step 1: Create flutter project , ignore this step if you have already created

flutter create flutter_firebase_auth

Step 2: Add Flutter Dependencies for firebase

dependencies:
 firebase_auth: ^1.0.1 # add this line
 firebase_core: ^1.0.2 # add this line

Run command flutter pub get to install the package

You can use the package by importing like below

import "package:firebase_auth/firebase_auth.dart";
import "package:firebase_core/firebase_core.dart";

Step 3: Create Firebase Project

  • Visit this url https://console.firebase.google.com/u/0/ and create a new project

  • Once project is created you can integrate with android and ios application by clicking on android and ios icon on dashboard

Step 4: Configuring IOS App

  • For registering the iOS app, you have to provide unique iOS bundle ID – your iOS app bundle identifier. You can find it in the general setting of Xcode

add-app-to-firebase

  • After filling the required fields, you’ll see something like this. Further click on Download GoogleServices-Info.plist and place it in MyApplication folder as shown below.

add-info-file

  • Skip step 3 and 4

  • Hit continue to complete the process

Step 5: Configuring Android App

  • For registering the Android app, you have to provide a unique package name. For that, you can find it at android>app>build.gradle

add-sha1

  • You will also need the Debug signing certificate SHA-1. You can get that by running the following command in the project directory.

     cd android && ./gradlew signingReport

    Copy the SHA1 value and paste it into the Firebase console.

  • Now, proceeding to the next step, you will have to download the google-services.json file. You should place this file in the android/app directory.

download-google-service.json

  • You can skip the next step as we are using: Firebase core and Firebase auth packages. Click ‘Continue to Console’ to complete the process.

Step 6: Enable Email/Password Authentication in Firebase

  • Go to the Authentication section in the dashboard and click on the Get Started button. This will enable the authentication module in your project.

  • Next, you should enable email authentication in the sign-in methods. Once you’ve enabled it, press Save.

Step 7: Initialize firebase app

Open main.dart and use the following code snippet to initialize Firebase App.

future main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

Step 8: Create Utility file for Authentication

Create a file, name it according to your choice; and use it as a helper file for firebase authentication and copy paste the following code snippet

import 'package:firebase_auth/firebase_auth.dart';

class AuthenticationHelper {
  final FirebaseAuth _auth = FirebaseAuth.instance;
  get user => _auth.currentUser;

 //SIGN UP METHOD
  Future signUp({String email, String password}) async {
    try {
      await _auth.createUserWithEmailAndPassword(
        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(email: email, password: password);
      return null;
    } on FirebaseAuthException catch (e) {
      return e.message;
    }
  }

  //SIGN OUT METHOD
  Future signOut() async {
    await _auth.signOut();

    print('signout');
  }
}

Step 9: Create component for login and signup and call the login and signup method from helper file

//Sign up
AuthenticationUtility()
   .signUp(email: email, password: password)
   .then((result) {
    	if (result == null) {
        Navigator.pushReplacement(context,
           MaterialPageRoute(builder: (context) => Home()));
       } else {
          Scaffold.of(context).showSnackBar(SnackBar(
          content: Text(
              result,
              style: TextStyle(fontSize: 16),
             ),
          ));
       }
  });
//sign in
AuthenticationHelper()
   .signIn(email: email, password: password)
      .then((result) {
         if (result == null) {
           Navigator.pushReplacement(context,
             MaterialPageRoute(builder: (context) => Home()));
          } else {
             Scaffold.of(context).showSnackBar(SnackBar(
                 content: Text(
                 result,
                style: TextStyle(fontSize: 16),
                   ),
              ));
           }
      });