Skip to main content

Flutter firebase Auth Examples

Flutter firebase auth: How To Examples

Introduction​

Firebase Authentication is a powerful service provided by Google that allows developers to easily add user authentication to their Flutter applications. It provides a secure and reliable way to handle user sign-up, sign-in, and password management.

In this tutorial, we will explore various examples of how to use the firebase_auth package in Flutter, starting from the installation process.

Installation​

To get started with firebase_auth, you need to add the package as a dependency in your Flutter project. Open your project's pubspec.yaml file and add the following line under the dependencies section:

dependencies:
  firebase_auth: ^3.0.0

Save the file and run the following command to fetch the package:

flutter pub get

Now you're ready to start using firebase_auth in your Flutter application.

Example 1: Email and Password Authentication​

In this example, we will demonstrate how to implement email and password authentication using firebase_auth. We will cover the following steps:

  1. Initialize Firebase.
  2. Create a sign-up page.
  3. Create a sign-in page.
  4. Implement password reset functionality.

Step 1: Initialize Firebase​

To use firebase_auth, you need to initialize Firebase in your Flutter application. Follow these steps:

  1. Create a new project in the Firebase console (https://console.firebase.google.com).
  2. Add an Android app to your project and follow the instructions to download the google-services.json file.
  3. Add an iOS app to your project and follow the instructions to download the GoogleService-Info.plist file.
  4. Place the downloaded files in the respective folders of your Flutter project.
  5. Open your project's android/app/build.gradle file and add the following under the dependencies section:
implementation platform('com.google.firebase:firebase-bom:28.4.0')
implementation 'com.google.firebase:firebase-auth'
  1. Open your project's ios/Podfile file and add the following under the use_frameworks! block:
pod 'Firebase/Auth'
  1. Run the following command to fetch the dependencies:
flutter pub get
cd ios && pod install && cd ..
  1. Import the firebase_auth package in your Dart file:
import 'package:firebase_auth/firebase_auth.dart';

Step 2: Create a Sign-up Page​

To allow users to sign up with their email and password, follow these steps:

  1. Create a new Dart file, e.g., signup_page.dart.
  2. Import the necessary packages:
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
  1. Create a TextEditingController for the email and password fields:
final TextEditingController emailController = TextEditingController();
final TextEditingController passwordController = TextEditingController();
  1. Build the sign-up page UI:
class SignUpPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Sign Up')),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: emailController,
              decoration: InputDecoration(labelText: 'Email'),
            ),
            TextField(
              controller: passwordController,
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            ElevatedButton(
              onPressed: () {
                signUpWithEmailAndPassword(
                  emailController.text,
                  passwordController.text,
                );
              },
              child: Text('Sign Up'),
            ),
          ],
        ),
      ),
    );
  }
}
  1. Implement the signUpWithEmailAndPassword function:
void signUpWithEmailAndPassword(String email, String password) async {
  try {
    UserCredential userCredential = await FirebaseAuth.instance
        .createUserWithEmailAndPassword(email: email, password: password);
    User? user = userCredential.user;
    // Handle successful sign-up
  } catch (e) {
    // Handle sign-up failure
  }
}

Step 3: Create a Sign-in Page​

To allow users to sign in with their email and password, follow these steps:

  1. Create a new Dart file, e.g., signin_page.dart.
  2. Import the necessary packages:
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
  1. Create a TextEditingController for the email and password fields:
final TextEditingController emailController = TextEditingController();
final TextEditingController passwordController = TextEditingController();
  1. Build the sign-in page UI:
class SignInPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Sign In')),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: emailController,
              decoration: InputDecoration(labelText: 'Email'),
            ),
            TextField(
              controller: passwordController,
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            ElevatedButton(
              onPressed: () {
                signInWithEmailAndPassword(
                  emailController.text,
                  passwordController.text,
                );
              },
              child: Text('Sign In'),
            ),
          ],
        ),
      ),
    );
  }
}
  1. Implement the signInWithEmailAndPassword function:
void signInWithEmailAndPassword(String email, String password) async {
  try {
    UserCredential userCredential = await FirebaseAuth.instance
        .signInWithEmailAndPassword(email: email, password: password);
    User? user = userCredential.user;
    // Handle successful sign-in
  } catch (e) {
    // Handle sign-in failure
  }
}

Step 4: Implement Password Reset Functionality​

To allow users to reset their passwords, follow these steps:

  1. Create a new Dart file, e.g., reset_password_page.dart.
  2. Import the necessary packages:
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
  1. Create a TextEditingController for the email field:
final TextEditingController emailController = TextEditingController();
  1. Build the reset password page UI:
class ResetPasswordPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Reset Password')),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: emailController,
              decoration: InputDecoration(labelText: 'Email'),
            ),
            ElevatedButton(
              onPressed: () {
                resetPassword(emailController.text);
              },
              child: Text('Reset Password'),
            ),
          ],
        ),
      ),
    );
  }
}
  1. Implement the resetPassword function:
void resetPassword(String email) async {
  try {
    await FirebaseAuth.instance.sendPasswordResetEmail(email: email);
    // Handle successful password reset
  } catch (e) {
    // Handle password reset failure
  }
}

Example 2: Google Sign-in​

In this example, we will demonstrate how to implement Google Sign-in using firebase_auth. We will cover the following steps:

  1. Configure Google Sign-in in Firebase console.
  2. Implement Google Sign-in in Flutter.

Step 1: Configure Google Sign-in in Firebase Console​

To enable Google Sign-in for your Flutter application, follow these steps:

  1. Go to the Firebase console and open your project.
  2. Enable Google as a sign-in provider under the "Authentication" tab.
  3. Add your application's SHA-1 fingerprint to the Firebase project settings.
  4. Download the google-services.json file and place it in your project.

Step 2: Implement Google Sign-in in Flutter​

To implement Google Sign-in in your Flutter application, follow these steps:

  1. Import the necessary packages:
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:google_sign_in/google_sign_in.dart';
  1. Create an instance of GoogleSignIn:
final GoogleSignIn googleSignIn = GoogleSignIn();
  1. Build the Google Sign-in button:
class GoogleSignInButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        signInWithGoogle();
      },
      child: Text('Sign In with Google'),
    );
  }
}
  1. Implement the signInWithGoogle function:
void signInWithGoogle() async {
  try {
    final GoogleSignInAccount? googleUser = await googleSignIn.signIn();
    final GoogleSignInAuthentication googleAuth =
        await googleUser!.authentication;
    final OAuthCredential credential = GoogleAuthProvider.credential(
      accessToken: googleAuth.accessToken,
      idToken: googleAuth.idToken,
    );
    UserCredential userCredential =
        await FirebaseAuth.instance.signInWithCredential(credential);
    User? user = userCredential.user;
    // Handle successful sign-in
  } catch (e) {
    // Handle sign-in failure
  }
}

Example 3: Anonymous Sign-in​

In this example, we will demonstrate how to implement anonymous sign-in using firebase_auth. We will cover the following steps:

  1. Implement anonymous sign-in in Flutter.

Step 1: Implement Anonymous Sign-in in Flutter​

To implement anonymous sign-in in your Flutter application, follow these steps:

  1. Import the necessary packages:
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
  1. Build the anonymous sign-in button:
class AnonymousSignInButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        signInAnonymously();
      },
      child: Text('Sign In Anonymously'),
    );
  }
}
  1. Implement the signInAnonymously function:
void signInAnonymously() async {
  try {
    UserCredential userCredential =
        await FirebaseAuth.instance.signInAnonymously();
    User? user = userCredential.user;
    // Handle successful sign-in
  } catch (e) {
    // Handle sign-in failure
  }
}

Example 4: Sign Out​

In this example, we will demonstrate how to implement sign-out functionality using firebase_auth. We will cover the following steps:

  1. Implement sign-out functionality in Flutter.

Step 1: Implement Sign-out Functionality in Flutter​

To implement sign-out functionality in your Flutter application, follow these steps:

  1. Import the necessary packages:
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
  1. Build the sign-out button:
class SignOutButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        signOut();
      },
      child: Text('Sign Out'),
    );
  }
}
  1. Implement the signOut function:
void signOut() async {
  try {
    await FirebaseAuth.instance.signOut();
    // Handle successful sign-out
  } catch (e) {
    // Handle sign-out failure
  }
}

Conclusion​

In this tutorial, we explored various examples of how to use the firebase_auth package in Flutter. We covered email and password authentication, Google Sign-in, anonymous sign-in, and sign-out functionality. By following these examples, you can easily implement user authentication in your Flutter applications using Firebase Authentication.