Here are the versions of the plugins we have tested this tutorial with:

Flutter 2.2.2, 2.2.3 Firebase_auth 1.4.1, 2.0.0

If you are using any other version of these plugins this tutorial may not work for you (I'm going to try to keep this tutorial up to date however).

IMPORTANT STEP: The first thing you need to do is connect your Flutter app to the Firebase site. Click here for instructions on how to do that.

After you've done the initial setup at the link above you'll need to enable Authentication. You can do that by clicking the Authentication graphic on the firebase page for this project:

And then click Get Started

And then click the pencil next to email/password:

Now you can enable the top option. You can passwordless sign-in disabled. And hit save.

Switch over to the users section and minimize this page, because we will visit it again later.

We will start with our traditional tutorial boilerplate:

import 'package:flutter/material.dart'; void main() { runApp(AuthApp()); } class AuthApp extends StatefulWidget { const AuthApp({ Key? key }) : super(key: key); @override _AuthAppState createState() => _AuthAppState(); } class _AuthAppState extends State<AuthApp> { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Auth User'), ), ), ); } }

Now we will add two Text Fields to the body, one for e-mail address and one for password. We will start by adding the controllers:

class _AuthAppState extends State<AuthApp> { final emailController = TextEditingController(); final passwordController = TextEditingController(); @override

And then two text fields connected to the controllers:

), // AppBar body: Center( child: Column( children: [ TextField(controller: emailController), TextField(controller: passwordController), ], ), // Column ), // Center ), // Scaffold

And now we will Add 3 buttons, one for Sign Up, one for Sign In and one for Log Out:

TextField(controller: passwordController), Row( children: [ ElevatedButton(child: Text('Sign Up'), onPressed: () {}), ElevatedButton(child: Text('Sign In'), onPressed: () {}), ElevatedButton(child: Text('Log Out'), onPressed: () {}), ], ), // Row ],

And then we are going to put Space Around each of the buttons:

Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: [

Now we are going to install Firebase_auth into the application

open up your terminal window and type this in:

flutter pub add firebase_auth

Now you should be able to look in your pubspec.yaml file and see both installed.

Now we will import both of those at the top of the app:

import 'package:flutter/material.dart'; import 'package:firebase_core/firebase_core.dart'; import 'package:firebase_auth/firebase_auth.dart'; void main() { runApp(AuthApp()); }

And we need to initialize WidgetsFlutterBinding and Firebase in main:

void main() async { WidgetsFlutterBinding.ensureInitialized(); await Firebase.initializeApp(); runApp(AuthApp()); }

And then we will go ahead and create a new user when you press the Sign Up Button:

ElevatedButton(child: Text('Sign In'), onPressed: () async { await FirebaseAuth.instance.signInWithEmailAndPassword( email: emailController.text, password: passwordController.text, ); setState(() {}); }),

Now if you enter in an e-mail address and a password and press the Sign Up Button, you won't see any actual change in your app. BUT if you go to firebase you should see the new user.

So let's add a little indicator to let us know that the user is logged in. First we will add this inside the build widget in _AuthAppState:

Widget build(BuildContext context) { User? user = FirebaseAuth.instance.currentUser; return MaterialApp(

We have User? (with a question mark) because user can be null if they aren't logged in.

Now we will add this simple Ternary Operator to the AppBar to see if the User is logged in or not:

appBar: AppBar( title: Text( 'Auth User (Logged ' + (user == null ? 'out' : 'in') + ')'), ),

So this Ternary Operator (or a simplified if/then statement) says "out" if user is null, otherwise it says "in". And you should now see that the user is logged in.

So now we will tie the log out process to the Log Out Buttons onPressed:

ElevatedButton( onPressed: () async { await FirebaseAuth.instance.signOut(); setState(() {}); }, child: Text('Log Out')),

So this time when you run the App and press the Log Out Button, you should immediately see that the user is logged out.

One last button to set up, the Sign In Button:

ElevatedButton( onPressed: () async { await FirebaseAuth.instance.signInWithEmailAndPassword( email: emailController.text, password: passwordController.text, ); setState(() {}); }, child: Text('Sign In')),

We press that, and we're logged back in.

So this of course doesn't have any form validation or error handling in it, we will dive into that in the next video!

import 'package:flutter/material.dart'; import 'package:firebase_core/firebase_core.dart'; import 'package:firebase_auth/firebase_auth.dart'; void main() async { WidgetsFlutterBinding.ensureInitialized(); await Firebase.initializeApp(); runApp(AuthApp()); } class AuthApp extends StatefulWidget { const AuthApp({ Key? key }) : super(key: key); @override _AuthAppState createState() => _AuthAppState(); } class _AuthAppState extends State<AuthApp> { final emailController = TextEditingController(); final passwordController = TextEditingController(); @override Widget build(BuildContext context) { User? user = FirebaseAuth.instance.currentUser; return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Auth User (Logged ' + (user == null ? 'out' : 'in') + ')'), ), body: Center( child: Column( children: [ TextField(controller: emailController), TextField(controller: passwordController), Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ ElevatedButton(child: Text('Sign Up'), onPressed: () async { await FirebaseAuth.instance.createUserWithEmailAndPassword( email: emailController.text, password: passwordController.text, ); setState(() {}); }), ElevatedButton(child: Text('Sign In'), onPressed: () async { await FirebaseAuth.instance.signInWithEmailAndPassword( email: emailController.text, password: passwordController.text, ); setState(() {}); }), ElevatedButton(child: Text('Log Out'), onPressed: () async { await FirebaseAuth.instance.signOut(); setState(() {}); }), ], ), ], ), ), ), ); } }

Click here for additional resources regarding Firebase.

YouTube Description:

More Videos