Firebase Authentication and Flutter Full Course 2020 | Watch on YouTube
Tags: dart, flutter, googlecloud, webdev
Published: 2020-11-20 14:02:21

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.

{% youtube oyVDDRczuJI %}

{% youtube 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
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jz4txtz2v3nmgpixy8jo.png)

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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jdr5sen18hal42z34m96.png)

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
    );
  }
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zoiy94ovt7nrp0ifg90z.png)

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

```dart
class _MyHomePageState extends State<MyHomePage> {
  // Remove commented out lines
  // 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>[],
      ),
    );
  } 
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/h6v7slq0icip5a0n2c6v.png)

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:

```dart
import 'package:flutter_signin_button/flutter_signin_button.dart';
 .. 
body: Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Expanded(
      child: Container(),
    ),
// Add the widget below
    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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nbdw4a60pjvnn1gi2t51.png)

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

---

## Sharing is caring 🤗

If you enjoyed reading this post, please share this through your social media channels. Also check out and [**subscribe**](https://youtube.com/c/CreativeBracket) to my YouTube channel (hit the bell icon too) for full-stack development tutorials on Dart and Flutter.

[**Subscribe to the newsletter**](http://eepurl.com/gipQBX) for my free 35-page Get started with Dart eBook and to be notified when new content is released.

Like, share and [**follow me**](https://twitter.com/creativ_bracket) for more content on Dart.

Originally published at [https://creativebracket.com](https://creativebracket.com/firebase-authentication-and-flutter-full-course-2020/)