# Firebase Authentication and Flutter Full Course

Firebase is a platform that provides the infrastructure needed to build apps fast. In the [previous](https://creativebracket.com/fullstack-flutter-mongodb-mini-course/) mini-course we built a mobile and web app with Flutter and MongoDB. In this full course we will build a messaging app with Firebase Authentication and Flutter.

We begin by setting up a Flutter project from scratch and building the general look and feel of our messaging UI. We then create a Firebase project while setting up and configuring our Android and Web applications. We will set up Firebase Authentication with the [**google\_sign\_in**](https://pub.dev/packages/google_sign_in) package and Cloud Firestore for storing our chat messages. We will learn how to set up the correct security rules to ensure only authenticated users are allowed to write data to our collection.

## Watch full course

%[https://youtu.be/oyVDDRczuJI] 

and the finale…

%[https://youtu.be/9zBWglEaGuQ] 

## **Set up Flutter project**

Before creating a Flutter project we need to enable Flutter Web support since we will also be running this app in the Web browser. Run the following commands to enable Flutter Web support:

```bash
$ flutter channel beta # checkout the beta channel
$ flutter upgrade
$ flutter config --enable-web
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726188588923/26493a2a-0d55-4f3e-baf9-c249c3ffe491.png align="center")

With Flutter Web enabled you can proceed to create your Flutter project:

```bash
$ flutter create my_messaging_app
```

After that process is complete open the directory in your editor of choice, whether Visual Studio Code or Android Studio as the *recommended* editors for Flutter development.

Ensure you have the relevant extensions installed for your editors. In the case of Visual Studio Code you need the [Dart Code extensions](https://dartcode.org/). For Android Studio search for “Flutter” in the plugins repository under **Configure** > **Plugins**.

## **Run the Flutter project**

Launch any of the device simulators using the steps in Visual Studio Code below. This assumes you have the listed simulators already set up using AVD Manager in Android Studio or any other means. Make sure that the simulator you select has Play Store support enabled.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726210689583/09baacfc-041c-4b5e-bbaa-55a18a376809.png align="center")

You can run a Flutter project by typing the `flutter run` command in the Terminal and hitting `Enter`. Alternatively you can use the editor controls to run your Flutter app.

## **Build UI for Firebase Authentication**

Open **lib/main.dart** and refactor the `MyApp` StatelessWidget like so:

```dart
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "The Chat Crew", // <== Change this line
      debugShowCheckedModeBanner: false, // <== Add this line
      theme: ThemeData(
        primarySwatch: Colors.purple, // <== Change this line
      ),
      home: MyHomePage(title: "The Chat Crew"), // <== Change this line
    );
  }
}
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726210753099/f21a6468-1433-4928-8b9c-9a69942b0b8c.png align="center")

Refactor the `_MyHomePageState` class by removing the `_incrementCounter()` method and `_counter` field.

```dart
class _MyHomePageState extends State<MyHomePage> {
  // int _counter = 0;

  // void _incrementCounter() {
  //  setState(() {
  //    _counter++;
  //  });
  // }

  @override
  Widget build(BuildContext context) { ... }
}
```

In the `build()` method remove the `floatingActionButton:` section of the `Scaffold()` widget and the two `Text()` widgets rendered in the `Column()` children. In fact you should have the code below once you’ve taken out the unnecessary bits:

```dart
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        centerTitle: true, // <== Added this line
      ),
      backgroundColor: Color(0xffdee2d6), // <== Added this line
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[],
      ),
    );
  }
}
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726210799145/a9d43201-541a-4970-9dd1-09d46dca7be6.png align="center")

The section below the app bar of the app consists of a message wall to display chat messages and the bottom area which will show either the sign in button or the message form.

The message wall will be rendered in an `Expanded()` widget since that takes up most of the screen real estate.

```dart
body: Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Expanded(
      child: Container(),
    ),
  ],
),
```

To display the Sign in button, install the [**flutter\_signin\_button**](https://pub.dev/packages/flutter_signin_button) package:

```bash
$ pub global activate crawl # install the crawl cli
$ crawl add flutter_signin_button
```

Import **flutter\_signin\_button** and display after the `Expanded()` widget:

```dart
import 'package:flutter_signin_button/flutter_signin_button.dart';

..

body: Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Expanded(
      child: Container(),
    ),
    Container(
      padding: const EdgeInsets.all(5),
      child: SignInButton(
        Buttons.Google,
        padding: const EdgeInsets.all(5),
        onPressed: () {},
      ),
    ),
  ],
),
```

**Stop the whole app and start again** in order to load the image assets required to display the Google logo on the sign in button.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726210902568/a6a49847-a8e9-4ef7-aabc-9065bf1ec131.png align="center")

[**Watch the full course**](https://youtu.be/oyVDDRczuJI) for details on completing the sign in and sign out flows.