Ads by ProfitSence
Close

Flutter Firebase Authentication

Last Updated on Wednesday 5th Oct 2022

Flutter Firebase

Project Configuration Firebase Flutter

  • Go to the Firebase site , and create an account there.
  • In the firebase dashboard, go to the project summary menu or dashboard
  • Click the plus button ,choose android or ios platform and Configure the project
  • Put the google-service.json file into the folder project /android/app/ and Configuration is complete.

Configure Auth or User Login

In Firebase , open the menu .Authentication Select tab Sign in method Activate the email.

Setting up the Library

provider: ^6.0.0 Link - For the state management

firebase_auth: ^3.1.0 Link - For the auth

firebase_core: ^0.5.0 Link - Core Package

			
					import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';

 Widget build(BuildContext context) {
    FirebaseAuth auth = FirebaseAuth.instance;
    return MaterialApp(
      routes: routes,
      title: 'My App Test',
      theme: ThemeData(
        primarySwatch: _theme.appColor,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      initialRoute: auth.currentUser == null ? "/welcome" : "/home",
    );
  }

			
	

Welcome Screen

			
					import 'package:myapp/app/app_theme.dart';
import 'package:flutter/material.dart';

class WelcomeView extends StatelessWidget {
  final AppTheme _theme = new AppTheme();

  @override
  Widget build(BuildContext context) {
    return _theme.page(
      context: context,
      content: Container(
        margin: EdgeInsets.only(left: 54, right: 54, bottom: 145),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Container(
              width: double.infinity,
              height: 33,
              child: RaisedButton(
                shape: _theme.buttonTheme(),
                onPressed: () {
                  Navigator.pushReplacementNamed(context, '/auth',
                      arguments: "register");
                },
                child: Text("Register Account"),
              ),
            ),
            Container(
              margin: EdgeInsets.only(top: 44),
              width: double.infinity,
              height: 33,
              child: RaisedButton(
                shape: _theme.buttonTheme(),
                onPressed: () {
                  Navigator.pushReplacementNamed(context, '/auth',
                      arguments: "login");
                },
                child: Text("Login"),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

			
	

You Can use ElevatedButton instead of deprecated RaisedButton.

Auth View (Login and Register)

			
					import 'dart:io';
import 'package:myapp/app/app_theme.dart';
import 'package:myapp/states/auth/auth_state.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class AuthView extends StatelessWidget {
  final AppTheme _theme = new AppTheme();

  Widget _loading() {
    return Platform.isAndroid
        ? Container(
            child: Center(
              child: CircularProgressIndicator(),
            ),
          )
        : Container(
            child: Center(child: CupertinoActivityIndicator()),
          );
  }

  @override
  Widget build(BuildContext context) {
    String argument = ModalRoute.of(context).settings.arguments;
    String title = argument == "login" ? "Login" : "Register new account";
    String buttonTitle = argument == "login" ? "Login" : "Create account";
    return _theme.page(
        context: context,
        content: Container(
          width: double.infinity,
          padding: EdgeInsets.only(top: 44, right: 54, left: 54, bottom: 70),
          decoration: BoxDecoration(
            color: _theme.appColors[white],
            borderRadius: BorderRadius.only(
              topRight: Radius.circular(50),
              topLeft: Radius.circular(50),
            ),
          ),
          child: ChangeNotifierProvider(
            create: (c) => AuthState(argument, context),
            child: Consumer<AuthState>(
              builder: (c, state, _) => Form(
                key: state.key,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Text(
                      title,
                      style:
                          TextStyle(fontSize: 23, fontWeight: FontWeight.bold),
                    ),
                    Container(
                      margin: EdgeInsets.only(top: 39, bottom: 39),
                      child: TextFormField(
                        decoration: InputDecoration(labelText: "Email"),
                        validator: (value) => state.emailValidator(value),
                        controller: state.email,
                      ),
                    ),
                    Container(
                      margin: EdgeInsets.only(top: 0, bottom: 55),
                      child: TextFormField(
                        controller: state.password,
                        obscureText: true,
                        validator: (value) => state.passwordValidator(value),
                        decoration: InputDecoration(labelText: "Password"),
                      ),
                    ),
                    state.authProcess
                        ? _loading()
                        : Container(
                            width: double.infinity,
                            child: RaisedButton(
                              shape: _theme.buttonTheme(),
                              color: _theme.appColor[900],
                              textColor: _theme.appColors[white],
                              onPressed: () {
                                state.auth();
                              },
                              child: Text(buttonTitle),
                            ),
                          ),
                  ],
                ),
              ),
            ),
          ),
        ),
        onTapBack: () {
          Navigator.pushReplacementNamed(context, '/welcome');
          return;
        },
     );
  }
}

			
	

Home Screen

			
					import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';

class HomeView extends StatelessWidget {
  final FirebaseAuth _auth = FirebaseAuth.instance;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        margin: EdgeInsets.all(23),
        child: Stack(
          children: [
            Center(
              child: Column(
                children: [
                  Row(
                    children: [
                      Expanded(
                        child: Container(),
                        flex: 1,
                      ),
                      Expanded(
                        flex: 6,
                        child: GestureDetector(
                          onTap: () {
                            _auth.signOut().then((value) {
                              Navigator.pushReplacementNamed(
                                  context, "/welcome");
                            });
                          },
                          child: Image.asset(
                            'assets/images/home.png',
                            height: 201,
                            width: 201,
                          ),
                        ),
                      ),
                      Expanded(
                        child: Container(),
                        flex: 2,
                      )
                    ],
                  ),
                  Container(
                    width: double.infinity,
                    child: Text(
                      "Welcome",
                      style:
                          TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
                      textAlign: TextAlign.center,
                    ),
                  ),
                  Padding(padding: EdgeInsets.only(top: 28)),
                  Container(
                    child: Text(
                      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Egestas scelerisque porttitor turpis viverra lobortis convallis. Libero tristique donec turpis elit",
                      style: TextStyle(fontSize: 12),
                      textAlign: TextAlign.center,
                    ),
                  )
                ],
                mainAxisSize: MainAxisSize.min,
              ),
            )
          ],
        ),
      ),
    );
  }
}

			
	

Auth State

			
					
import 'package:myapp/app/app_theme.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';

class AuthState with ChangeNotifier {
  bool authProcess = false;
  bool autoValidate = false;
  final TextEditingController email = TextEditingController();
  final TextEditingController password = TextEditingController();
  final key = GlobalKey<FormState>();
  final String argument;
  final BuildContext context;
  final AppTheme _theme = new AppTheme();

  AuthState(this.argument, this.context);

  auth() {
    if (key.currentState.validate()) {
      authProcess = true;
      notifyListeners();
      if (argument == "register")
        _register();
      else
        _login();
    } else {
      autoValidate = true;
      notifyListeners();
    }
  }

  FirebaseAuth _auth = FirebaseAuth.instance;

  _dialog(String message) {
    showDialog(
        context: context,
        child: AlertDialog(
          shape: _theme.buttonTheme(),
          content: Container(
            padding: EdgeInsets.all(16),
            decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(40))),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Text(
                  "Auth Failed",
                  style: TextStyle(fontSize: 23, fontWeight: FontWeight.bold),
                ),
                Padding(padding: EdgeInsets.only(top: 16)),
                Text(message),
                Container(
                  margin: EdgeInsets.only(top: 16),
                  width: 150,
                  height: 40,
                  child: RaisedButton(
                    color: _theme.appColors[red],
                    textColor: _theme.appColors[white],
                    onPressed: () {
                      Navigator.pop(context);
                    },
                    child: Text("OK"),
                    shape: _theme.buttonTheme(),
                  ),
                )
              ],
            ),
          ),
        ));
  }

  _login() {
    _auth
        .signInWithEmailAndPassword(email: email.text, password: password.text)
        .then((value) {
      authProcess = false;
      notifyListeners();
      print("res ${value.user.email}");
      Navigator.pushReplacementNamed(context, "/home");
    }).catchError((err) {
      authProcess = false;
      notifyListeners();
      print("res error $err");
      _dialog(err.toString());
    });
  }

  _register() {
    _auth
        .createUserWithEmailAndPassword(
            email: email.text, password: password.text)
        .then((value) {
      authProcess = false;
      notifyListeners();
      print("res ${value.user.email}");
      Navigator.pushReplacementNamed(context, "/home");
    }).catchError((err) {
      authProcess = false;
      notifyListeners();
      print("res error $err");
      _dialog(err.toString());
    });
  }

  String emailValidator(String value) {
    Pattern pattern =
        r'^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$';
    RegExp regex = new RegExp(pattern);
    if (!regex.hasMatch(value))
      return 'Email format is incorrect';
    else
      return null;
  }

  String passwordValidator(String value) {
    if (value.length < 6) return "Password minimal 6 character";
    return null;
  }
}

			
	

How to see users who have logged in and registered into our application.

  • Go to the Firebase site

  • Go to Authentication Menu and open the Users tab, and there is results.

  • You can also add according to your needs.