Implementing Firebase Authentication in Flutter

Project Setup

To get started, create a new Flutter project using the following command:

flutter create firebase_auth_demo

Next, add the required dependencies to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^1.10.0
  firebase_auth: ^3.2.0

Setting up Firebase

Before you can use Firebase in your Flutter application, you need to create a Firebase project. Head over to the Firebase Console and follow the steps to create a new project.

Once you’ve created your project, you need to set up Firebase for each platform (Android, iOS, and web). Follow the configuration guides for each platform:

• Android
• iOS
• Web

Initializing Firebase

Before you can use any Firebase service, you need to initialize the Firebase app. Add the following code to your main function:

import 'package:firebase_core/firebase_core.dart';

void main() async {
  await Firebase.initializeApp();
  runApp(MyApp());
}

Setting up Authentication

Create a new file called authentication_service.dart and add the following code:

import 'package:firebase_auth/firebase_auth.dart';

class AuthenticationService {
  final FirebaseAuth _firebaseAuth;

  AuthenticationService(this._firebaseAuth);

  Future signUp(String email, String password) async {
    try {
      await _firebaseAuth.createUserWithEmailAndPassword(email: email, password: password);
    } catch (e) {
      print(e.message);
    }
  }

  Future signIn(String email, String password) async {
    try {
      await _firebaseAuth.signInWithEmailAndPassword(email: email, password: password);
    } catch (e) {
      print(e.message);
    }
  }

  Future signOut() async {
    await _firebaseAuth.signOut();
  }
}

Building the UI

Create a new file called sign_up_screen.dart and add the following code:

import 'package:flutter/material.dart';
import 'package:firebaseauthdemo/authentication_service.dart';

class SignUpScreen extends StatefulWidget {
  @override
  _SignUpScreenState createState() => _SignUpScreenState();
}

class _SignUpScreenState extends State<SignUpScreen> {
  final _formKey = GlobalKey();
  String _email, _password;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sign Up'),
      ),
      body: Form(
        key: _formKey,
        child: Column(
          children: [
            TextFormField(
              decoration: InputDecoration(
                labelText: 'Email',
              ),
              validator: (value) {
                if (value.isEmpty) {
                  return 'Please enter an email';
                }
                return null;
              },
              onSaved: (value) => _email = value,
            ),
            TextFormField(
              decoration: InputDecoration(
                labelText: 'Password',
              ),
              obscureText: true,
              validator: (value) {
                if (value.isEmpty) {
                  return 'Please enter a password';
                }
                return null;
              },
              onSaved: (value) => _password = value,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                if (_formKey.currentState.validate()) {
                  _formKey.currentState.save();
                  AuthenticationService(FirebaseAuth.instance).signUp(_email, _password);
                }
              },
              child: Text('Sign Up'),
            ),
          ],
        ),
      ),
    );
  }
}

Similarly, create a sign_in_screen.dart file and add the following code:

import 'package:flutter/material.dart';
import 'package:firebaseauthdemo/authentication_service.dart';

class SignInScreen extends StatefulWidget {
  @override
  _SignInScreenState createState() => _SignInScreenState();
}

class _SignInScreenState extends State<SignInScreen> {
  final _formKey = GlobalKey();
  String _email, _password;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sign In'),
      ),
      body: Form(
        key: _formKey,
        child: Column(
          children: [
            TextFormField(
              decoration: InputDecoration(
                labelText: 'Email',
              ),
              validator: (value) {
                if (value.isEmpty) {
                  return 'Please enter an email';
                }
                return null;
              },
              onSaved: (value) => _email = value,
            ),
            TextFormField(
              decoration: InputDecoration(
                labelText: 'Password',
              ),
              obscureText: true,
              validator: (value) {
                if (value.isEmpty) {
                  return 'Please enter a password';
                }
                return null;
              },
              onSaved: (value) => _password = value,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                if (_formKey.currentState.validate()) {
                  _formKey.currentState.save();
                  AuthenticationService(FirebaseAuth.instance).signIn(_email, _password);
                }
              },
              child: Text('Sign In'),
            ),
          ],
        ),
      ),
    );
  }
}

Finally, create a home_screen.dart file and add the following code:

import 'package:flutter/material.dart';
import 'package:firebaseauthdemo/authentication_service.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            AuthenticationService(FirebaseAuth.instance).signOut();
          },
          child: Text('Sign Out'),
        ),
      ),
    );
  }
}

That’s it! You’ve now implemented Firebase Authentication in your Flutter app.