![flutter-logo.jpg](https://steemitimages.com/DQmbFAKjCq1GWcT8qxs3NWXo5zJywJcVv9Eec35euxMs41F/flutter-logo.jpg)


#### Repository
https://github.com/flutter/flutter

#### What Will I Learn?


- You will learn how to use add authentication to Firebase/Firestore projects
- You will learn how to use OAuth 2.0 with Firebase/Firestore
- You will learn how to use image filter widgets in flutter
- You will learn how to manage singleton object in a provider class
- You will learn how to use assertions and logic to verify data


#### Requirements
##### System Requirements: 
- [IDEA intellij](https://www.jetbrains.com/idea/), [Visual Studio Code](https://code.visualstudio.com/) with the Dart/Flutter [Plugins](https://github.com/flutter/flutter-intellij), [Android Studio](https://developer.android.com/studio/index.html) or [Xcode](https://developer.apple.com/xcode/) 
- The [Flutter SDK](https://flutter.io/get-started/install/) on the latest Master Build
- An Android or iOS Emulator or device for testing
##### OS Support for Flutter:
- Windows 7 SP1 or later (64-bit)
- macOS (64-bit)
- Linux (64-bit)
#### Required Knowledge
- A little understanding of key/value stores
- A fair understanding of Mobile development and Imperative or Object Oriented Programming
- Some understanding of realtime databases

#### Resources for Flutter and this Project:
- Flutter Website: https://flutter.io/
- Flutter Official Documentation: https://flutter.io/docs/
- Flutter Installation Information: https://flutter.io/get-started/install/
- Flutter GitHub repository: https://github.com/flutter/flutter
- Flutter Dart 2 Preview Information: https://github.com/flutter/flutter/wiki/Trying-the-preview-of-Dart-2-in-Flutter
- Flutter Technical Overview: https://flutter.io/technical-overview/
- Dart Website: https://www.dartlang.org/
- Flutter Awesome GitHub Repository: https://github.com/Solido/awesome-flutter  

#### Sources:
Flutter Logo (Google): https://flutter.io/


#### Difficulty


- Intermediate


#### Description

##### Outline and Overview

In this **Flutter Video Tutorial**, we take a look at how it is possible to authenticate a user using the **Google Sign In** plugin inside of **Firebase** and **Firestore**.  The application uses a login page which allows the user to navigate to the home page only if the user is authenticated by Google.  Google sends a token to the **Firebase console** which them verifies that the user is authenticated.  If they are authenticated then the user can read and write to our **Firestore database**.  We also make use of the Image Filter Widget in this application to allow us to create a unique aesthetic for our login page.  The Singleton pattern is also used and we use assertions in our provider logic. 



##### Outline for this Tutorial

##### Item 1: Authentication via Google for Firebase/Firestore

There are various reasons why you would want to authenticate a user in a mobile application.  With **Firebase** we are able to not only restrict which users can read and write from our database, we can also use the authentication to identify the users.  This allows us to preform **analytics** as well as save **security data** in the cloud.  We are also able to **personalize the application experience** with this information to increase application retention.


![fb_rules.jpg](https://steemitimages.com/DQmRtmEoPoEACsn52tYnnSNKZcLapMbB2zge8ghSSEGMuWt/fb_rules.jpg)


This image shows the rules that were used for our **cloud firestore database** in this application.  These **rules** only allow a user to **read and write our data** if the request they make is **authenticated** beforehand.  This rule set is very simple but it can be expanded in different ways for various types of applications. 

##### Item 2: Using OAuth 2.0 Inside of Flutter

One of the larger advantages of using the **Firebase Authentication system** is that it makes use of the **OAuth 2.0 standard**.  This allows us to authenticate our users from a single click.  We also **avoid potential security risks** which come from using a more traditional validation system that actually requires that the user inputs their email and password into our application.  

![fb_static.png](https://steemitimages.com/DQmURUethMGYtDqiZA1JJtnjcLJQaSiPWdQMMGqntVHPZx8/fb_static.png)

This image shows the method that we use to authenticate the user inside of our application.  First, we ask **Google** to authenticate the user by having them sign in to the **Google Playstore** or another **Google application**.  We then are able to get the Authentication Tokens from this sign in event through our `GoogleSignInAuthentication` object.  These tokens are passed into the **FirebaseUser object** which then confirms that the user is indeed who they say they are. The information is then passed back into **firebase** on a **successful authentication**.  

##### Item 3: Using the Singleton Pattern to Fetch Consistent Data

**Firebase Authentication** and the libraries surrounding Firebase all use the **Singleton Pattern**.  This is useful because it allows the application to keep the **same instance of the object** consistent across the entire code base.  In this case, we are able to easily pass the user data from the **API provider** to the **view layer** of our application. 

![streambuilder-2.png](https://steemitimages.com/DQmeFUvwZZUVF2ERUUNEpDtKshs1oFoV8xBRfzRm7UeT5nP/streambuilder-2.png)

Just as we were able to use a **Stream Builder widget** to dynamically change the widget tree in the base application, we are also able to display information about the user to our home screen.  In this case, we are taking the `FirebaseAuth` instance object and calling the `currentUser` method on it to get the currently signed in user.  We are then able to access any piece of information associated with this user in the widget tree below this **Stream Builder**. 


The source code for this project can be found [here](https://github.com/tensor-programming/flutter_fb_google_auth_example)

The Commands and Firebase Rules used in this tutorial can be found [here](https://gist.github.com/tensor-programming/9a5a24874860cfa365b1049d094465d7)

#### Video Tutorial
<iframe width="560" height="315" src="https://www.youtube.com/embed/ZNt_e5ojGzQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

#### Related Videos

- [Using Cloud Firestore as a Realtime Datastore for CRUD with Dart's Flutter Framework](https://steemit.com/utopian-io/@tensor/using-cloud-firestore-as-a-realtime-datastore-for-crud-with-dart-s-flutter-framework)

#### Projects and Series
> ##### Stand Alone Projects:
> - [Dart Flutter Cross Platform Chat Application Tutorial](https://steemit.com/@tensor/dart-flutter-cross-platform-chat-application-tutorial)
> - [Building a Temperature Conversion Application using Dart's Flutter Framework](https://steemit.com/utopian-io/@tensor/building-a-temperature-conversion-application-using-dart-s-flutter-framework)
> - [Managing State with Flutter Flux and Building a Crypto Tracker Application with Dart's Flutter Framework](https://steemit.com/utopian-io/@tensor/managing-state-with-flutter-flux-and-building-a-crypto-tracker-application-with-dart-s-flutter-framework)
> ##### Building a Calculator
> - [Building a Calculator Layout using Dart's Flutter Framework](https://steemit.com/utopian-io/@tensor/building-a-calculator-layout-using-dart-s-flutter-framework)
> - [Finishing our Calculator Application with Dart's Flutter Framework](https://steemit.com/utopian-io/@tensor/finishing-our-calculator-application-with-dart-s-flutter-framework)
> ##### Movie Searcher Application
> - [Building a Movie Searcher with RxDart and SQLite in Dart's Flutter Framework (Part 1)](https://steemit.com/utopian-io/@tensor/building-a-movie-searcher-with-rxdart-and-sqlite-in-dart-s-flutter-framework-part-1)
> - [Building a Movie Searcher with RxDart and SQLite in Dart's Flutter Framework (Part 2)](https://steemit.com/utopian-io/@tensor/building-a-movie-searcher-with-rxdart-and-sqlite-in-dart-s-flutter-framework-part-2)
> - [Building a Movie Searcher with RxDart and SQLite in Dart's Flutter Framework (Part 3, Final)](https://steemit.com/utopian-io/@tensor/building-a-movie-searcher-with-rxdart-and-sqlite-in-dart-s-flutter-framework-part-3-final)
> #### Minesweeper Game
> - [Building a Mine Sweeper Game using Dart's Flutter Framework (Part 1)](https://steemit.com/utopian-io/@tensor/building-a-mine-sweeper-game-using-dart-s-flutter-framework-part-1)
> - [Building a Mine Sweeper Game using Dart's Flutter Framework (Part 2)](https://steemit.com/utopian-io/@tensor/building-a-mine-sweeper-game-using-dart-s-flutter-framework-part-2)
> - [Building a Mine Sweeper Game using Dart's Flutter Framework (Part 3)](https://steemit.com/utopian-io/@tensor/building-a-mine-sweeper-game-using-dart-s-flutter-framework-part-3)
> - [Building a Mine Sweeper Game using Dart's Flutter Framework (Part 4, Final)](https://steemit.com/utopian-io/@tensor/building-a-mine-sweeper-game-using-dart-s-flutter-framework-part-4-final)
> #### Weather Application
> - [Building a Weather Application with Dart's Flutter Framework (Part 1, Handling Complex JSON with Built Code Generation)](https://steemit.com/utopian-io/@tensor/building-a-weather-application-with-dart-s-flutter-framework-part-1-handling-complex-json-with-built-code-generation)
> - [Building a Weather Application with Dart's Flutter Framework (Part 2, Creating a Repository and Model)](https://steemit.com/utopian-io/@tensor/building-a-weather-application-with-dart-s-flutter-framework-part-2-creating-a-repository-and-model)
> - [Building a Weather Application with Dart's Flutter Framework (Part 3, RxCommand (RxDart) and Adding an Inherited Widget)](https://steemit.com/utopian-io/@tensor/building-a-weather-application-with-dart-s-flutter-framework-part-3-rxcommand-rxdart-and-adding-an-inherited-widget)
> - [Building a Weather Application with Dart's Flutter Framework (Part 4, Using RxWidget to Build a Reactive User Interface)](https://steemit.com/utopian-io/@tensor/building-a-weather-application-with-dart-s-flutter-framework-part-4-using-rxwidget-to-build-a-reactive-user-interface)
> - [Localize and Internationalize Applications with Intl and the Flutter SDK in Dart's Flutter Framework](https://steemit.com/utopian-io/@tensor/localize-and-internationalize-applications-with-intl-and-the-flutter-sdk-in-dart-s-flutter-framework)

#### Curriculum

- [Building a Multi-Page Application with Dart's Flutter Mobile Framework](https://steemit.com/utopian-io/@tensor/building-a-multi-page-application-with-dart-s-flutter-mobile-framework)    
- [Making Http requests and Using Json in Dart's Flutter Framework](https://steemit.com/utopian-io/@tensor/making-http-requests-and-using-json-in-dart-s-flutter-framework)
- [Building Dynamic Lists with Streams in Dart's Flutter Framework](https://steemit.com/utopian-io/@tensor/building-dynamic-lists-with-streams-in-dart-s-flutter-framework)
- [Using GridView, Tabs, and Steppers in Dart's Flutter Framework](https://steemit.com/utopian-io/@tensor/using-gridview-tabs-and-steppers-in-dart-s-flutter-framework)
- [Using Global Keys to get State and Validate Input in Dart's Flutter Framework](https://steemit.com/utopian-io/@tensor/using-global-keys-to-get-state-and-validate-input-in-dart-s-flutter-framework)
- [The Basics of Animation with Dart's Flutter Framework](https://steemit.com/utopian-io/@tensor/the-basics-of-animation-with-dart-s-flutter-framework)
- [Advanced Physics Based Animations in Dart's Flutter Framework](https://steemit.com/utopian-io/@tensor/advanced-physics-based-animations-in-dart-s-flutter-framework)
- [Building a Drag and Drop Application with Dart's Flutter Framework](https://steemit.com/utopian-io/@tensor/building-a-drag-and-drop-application-with-dart-s-flutter-framework)
- [Building a Hero Animation and an Application Drawer in Dart's Flutter Framework](https://steemit.com/utopian-io/@tensor/building-a-hero-animation-and-an-application-drawer-in-dart-s-flutter-framework)
- [Using Inherited Widgets and Gesture Detectors in Dart's Flutter Framework](https://steemit.com/utopian-io/@tensor/using-inherited-widgets-and-gesture-detectors-in-dart-s-flutter-framework)
- [Using Gradients, Fractional Offsets, Page Views and Other Widgets in Dart's Flutter Framework](https://steemit.com/utopian-io/@tensor/using-gradients-fractional-offsets-page-views-and-other-widgets-in-dart-s-flutter-framework)
- [Making use of Shared Preferences, Flex Widgets and Dismissibles with Dart's Flutter framework](https://steemit.com/utopian-io/@tensor/making-use-of-shared-preferences-flex-widgets-and-dismissibles-with-dart-s-flutter-framework)
- [Using the Different Style Widgets and Properties in Dart's Flutter Framework](https://steemit.com/utopian-io/@tensor/using-the-different-style-widgets-and-properties-in-dart-s-flutter-framework)
- [Composing Animations and Chaining Animations in Dart's Flutter Framework](https://steemit.com/utopian-io/@tensor/composing-animations-and-chaining-animations-in-dart-s-flutter-framework)
- [Building a Countdown Timer with a Custom Painter and Animations in Dart's Flutter Framework](https://steemit.com/utopian-io/@tensor/building-a-countdown-timer-with-a-custom-painter-and-animations-in-dart-s-flutter-framework)
- [Reading and Writing Data and Files with Path Provider using Dart's Flutter Framework](https://steemit.com/utopian-io/@tensor/reading-and-writing-data-and-files-with-path-provider-using-dart-s-flutter-framework)
- [Exploring Webviews and the Url Launcher Plugin in Dart's Flutter Framework](https://steemit.com/utopian-io/@tensor/exploring-webviews-and-the-url-launcher-plugin-in-dart-s-flutter-framework)
- [Adding a Real-time Database to a Flutter application with Firebase](https://steemit.com/utopian-io/@tensor/adding-a-real-time-database-to-a-flutter-application-with-firebase)
- [Building a List in Redux with Dart's Flutter Framework](https://steemit.com/utopian-io/@tensor/building-a-list-in-redux-with-dart-s-flutter-framework)
- [Managing State with the Scoped Model Pattern in Dart's Flutter Framework](https://steemit.com/utopian-io/@tensor/managing-state-with-the-scoped-model-pattern-in-dart-s-flutter-framework)
- [Authenticating Guest Users for Firebase using Dart's Flutter Framework](https://steemit.com/utopian-io/@tensor/authenticating-guest-users-for-firebase-using-dart-s-flutter-framework)
- [How to Monetize Your Flutter Applications Using Admob](https://steemit.com/utopian-io/@tensor/how-to-monetize-your-flutter-applications-using-admob)
- [Using Geolocator to Communicate with the GPS and Build a Map in Dart's Flutter Framework](https://steemit.com/utopian-io/@tensor/using-geolocator-to-communicate-with-the-gps-and-build-a-map-in-dart-s-flutter-framework)
- [Managing the App Life Cycle and the Screen Orientation in Dart's Flutter Framework](https://steemit.com/utopian-io/@tensor/managing-the-app-life-cycle-and-the-screen-orientation-in-dart-s-flutter-framework)
- [Making use of General Utility Libraries for Dart's Flutter Framework](https://steemit.com/utopian-io/@tensor/making-use-of-general-utility-libraries-for-dart-s-flutter-framework)
- [Interfacing with Websockets and Streams in Dart's Flutter Framework](https://steemit.com/utopian-io/@tensor/interfacing-with-websockets-and-streams-in-dart-s-flutter-framework)
- [Playing Local, Network and YouTube Videos with the Video Player Plugin in Dart's Flutter Framework](https://steemit.com/utopian-io/@tensor/playing-local-network-and-youtube-videos-with-the-video-player-plugin-in-dart-s-flutter-framework)
- [Building Custom Scroll Physics and Simulations with Dart's Flutter Framework](https://steemit.com/utopian-io/@tensor/building-custom-scroll-physics-and-simulations-with-dart-s-flutter-framework)
- [Making Dynamic Layouts with Slivers in Dart's Flutter Framework](https://steemit.com/utopian-io/@tensor/making-dynamic-layouts-with-slivers-in-dart-s-flutter-framework)
- [Building a Sketch Application by using Custom Painters in Dart's Flutter Framework](https://steemit.com/utopian-io/@tensor/building-a-sketch-application-by-using-custom-painters-in-dart-s-flutter-framework)
- [Using Dart Isolates, Dependency Injection and Future Builders in Dart's Flutter Framework](https://steemit.com/utopian-io/@tensor/using-dart-isolates-dependency-injection-and-future-builders-in-dart-s-flutter-framework)
- [Looking at the Main Features of the Beta Three Release of Dart's Flutter Framework](https://steemit.com/utopian-io/@tensor/looking-at-the-main-features-of-the-beta-three-release-of-dart-s-flutter-framework)
- [Working with Material Theme and Custom Fonts in Dart's Flutter Framework](https://steemit.com/utopian-io/@tensor/working-with-material-theme-and-custom-fonts-in-dart-s-flutter-framework)



#### Proof of Work Done
https://github.com/tensor-programming