Simple Firebase Auth In Flutter With Metadata Fields (2022)

John Maeda
6 min readJul 23, 2022
Hand holding sparkler with text “Simple Firebase Auth In Flutter With Metadata Fields 2022”

Getting Firebase auth to work in Flutter is magical when you know how to do it, but unfortunately if you did it in years prior then you’re not likely to do it the same way today. I keep doing this over and over again when I start a new project, so I leave notes for myself in each year that I end up doing it. If you prefer a more automagical approach there’s the awesome flutterfire auth which looks easy-peasy at first blush, but I like to do things from scratch so I can understand them better … because it’s just my way. —JM

Packages You’ll Need

% flutter pub add firebase_auth
% flutter pub add cloud_firestore
% flutter pub add firebase_analytics

Process To Follow

Part 1: Set up backend stuff

  1. Go to the Firebase Console: https://console.firebase.google.com/
  2. Make a new project. It asks if you want to install Google Analytics, which depending upon your politics you’ll do what you think is best.
If you see this, then you can be happy.

I like to try things out on Flutter Web first because it feels easiest to me.

But you can always do this on other platforms a la Flutter’s magic …

When it asks you whether to set up Firebase Hosting, I can’t recommend it enough if you’re not wanting to overthink things when just starting out.

It all starts easy enough …

You’ll next get prompted to:

  1. Install the Firebase SDK.

npm install firebase

IMPORTANT: In the event that you’ve got an old version of Firebase and it’s asking you to update it … but it gives you a weird error message of

npm ERR! EEXIST: file already exists npm ERR! File exists: /usr/local/bin/firebase npm ERR! Remove the…

--

--

John Maeda

John Maeda: Technologist and product experience leader that bridges business, engineering, design via working inclusively. Currently VP Design and A.I. at MSFT.