Flutter Auth with Firebase Example

Jeff McMorris
3 min readFeb 20, 2019
Flutter Firebase Auth Example Screenshots

IMPORTANT: This project has been replaced by a new version I created with more features and made in a more flutter way.

There are numerous tutorials on using firebase auth with flutter. I went through many of these to work through making my own take on a Firebase Auth flutter project that worked the way I needed it to. Definitely check out these projects which provide much more in depth tutorials.

[Simple Recipe app made in flutter firebase and google sign in]

[Instaflutter]

[Flutter login UI]

[How to do user login with firebase]

I am still new to flutter so there are probably better ways to handle many of the options in this code.

I setup my project to combine firebase auth with saving my user info to shared preferences on the mobile device. When logging in it reads the info from local storage first. If it doesn’t exist, the user logs into firebase and the user and settings data is retrieved from Firestore and stored locally. This minimizes the number of requests required from Firestore. I wanted to login with an email and password as opposed to logging in with google sign in or facebook sign in.

I also use validation for text fields and handle and display error messages via a snackbar style notification [flushbar package]. Finally I use global state to keep track of when the data changes. Here is a link to the github project.

Overview of files…

main.dart— this file initializes the app and contains the routing as well as the global state setup and references the custom theme.

/ui/

theme.dart — contains some custom theme info.

/ui/screens/

home.dart — HomeScreen when the user is logged in, also redirects the user when he is not logged in to the SignInScreen.

--

--