Flutter Firebase Authentication with Email and Password (part - I)

Introduction:

Enable Firebase Authentication :

Setup Authentication Package :

dependencies:
firebase_auth: ^1.1.3 (current version)
<script src="https://www.gstatic.com/firebasejs/8.5.0/firebase-app.js"></script><!--Add this line-->
<script src="https://www.gstatic.com/firebasejs/8.5.0/firebase-auth.js"></script>

Describe a flow of application:

Dive into the code:

lib:
| Service:
| | authService.dart
| Screens:
| | authScreen.dart
| | homeScreen.dart
| main.dart
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
class AuthService{
// initialise firebase auth
final FirebaseAuth _initFirebaseAuth = FirebaseAuth.instance;
// stream user auth status
Stream<User> get userStatus => _initFirebaseAuth.authStateChanges();
// write a function for signup user
Future signinUser(){...}
Future signupUser(){...}
signoutUser(){...};
}
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Firebase',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: AuthChecker(),
);
}
}
//AuthChecker Classclass AuthChecker extends StatelessWidget {
@override
Widget build(BuildContext context) {
return StreamBuilder(
// stream from AuthService class, and userStatus is a get method
stream: AuthService().userStatus(),
builder:(BuildContext context, AsyncSnapshot<User> snapshot){
//check the connection state with firebase properties.
if(snapshot.connectionState == ConnectionState.active){
//check the uid(user id) is null or not
if(snapshot.data?.uid == null){
//if user not logged in before, compiler redirect AuthScreen
return AuthScreen();
}
else{
//the user was already logged in, compiler redirect HomeScreen
return HomeScreen();
}
}
}
);
}
}
Future signinUser({@required String email, @required String password}) async{
try {
return await _initFirebaseAuth.signInWithEmailAndPassword(email: email, password: password).then((value) => value.user.uid);
} on FirebaseAuthException catch (e) {
return e.code;
}
}
}
Future signupUser({@required String email, @required String password}) async {
try {
return await _initFirebaseAuth.createUserWithEmailAndPassword(email: email, password: password).then((value) => value.user.uid);
} on FirebaseAuthException catch (e) {
return e.code;
}
}
}
signoutUser() {
return _initFirebaseAuth.signOut();
}

Design Application:

import 'package:flutter/material.dart';class AuthScreen extends StatelessWidget {
TextEditingController _emailController = new TextEditingController();
TextEditingController _passwordController = new TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
padding: EdgeInsets.symmetric(horizontal: 30),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 20),
Text("Email"),
TextField(
controller: _emailController,
),

SizedBox(height: 20),
Text("Password"),
TextField(
controller: _passwordController,
),

SizedBox(height: 20),
Row(
children: [
Expanded(
flex: 1,
child: MaterialButton(
minWidth: double.infinity,
height: 70,
color: Colors.black,
onPressed: () {
var res = AuthService().signinUser(
email: _emailController.text,
password: _passwordController.text);
print(res);
},

child: Text(
"Login",
style: TextStyle(color: Colors.white),
),
),
),
SizedBox(width: 10),
Expanded(
flex: 1,
child: MaterialButton(
minWidth: double.infinity,
height: 70,
color: Colors.black,
onPressed: () {
var res = AuthService().signupUser(
email: _emailController.text,
password: _passwordController.text);
print(res);
},

child: Text(
"SignUp",
style: TextStyle(color: Colors.white),
),
),
),
],
),
],
),
),
);
}
}
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text("User Login"),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
AuthService().signoutUser();
},

child: Icon(Icons.logout),
),
);
}
}

Conclusion:

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Zinzuvadiya Meet

Hey there! I’m a mobile app developer who passionate about creating websites & applications through flutter as well as provides firebase services to clients.