Flutter Login With Firebase Gmail & Password

Flutter Login With Firebase Gmail & Password:

In this tutorial we are going to learn Login flutter App with Firebase Email & Password. Because it is very important validate user before performing any transaction OR any activity in any App to avoid loss of any data, history of transactions you have performed or our confidential information put into save from accessing other people for this reason we are learning login with firebase email Authentication with password.

Steps to follow to Create gmail & password Login  Flutter App:

  1. Create a Flutter project
  2. Integrate it with Firebase Database

Click here to Know How to Integrate Flutter with Firebase Database?

 

Adding Dependency Packages to pubspec.yaml file:

dependencies:
firebase_auth:
firebase_core:
With out adding dependency package we cannot enable and use Sign in methods it will shows exceptions are errors. After Adding dependencies run the get method to import all the required files for Flutter App.

 

Aftre Integrating go to firebase console select the project name. In Firebase Database go to Authentication select Sign in methods and enable Email & password as shown in below image

Creating main.dart file:

From this main.dart file we are navigating to the login.dart file. So we are importing this login .dart file into main.dart file means we are importing otherwise it will shows error. 

main.dart

import 'package:flutter/material.dart';
import 'login_page.dart';

void main(){
runApp(new MyApp());

}
class MyApp extends StatelessWidget{

@override
Widget build(BuildContext context){

return new MaterialApp(
title: 'Flutter login demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new LoginPage()

);
}
}

creating login.dart file

this login file represents user interface means here we enters input values i.e. Email Id & Password.

with login option. If already have an it will shows login otherwise we have to create an account it shows create account option 

login.dart:    

import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';

class LoginPage extends StatefulWidget{
@override
State createState() => new _LoginPageState();

}

enum FormType{
login,
register
}

class _LoginPageState extends State{

final formKey = new GlobalKey();

String _email;
String _password;
FormType _formType = FormType.login;
//before void instead of bool
bool validateAndSave(){
final form = formKey.currentState;
if(form.validate()){
form.save();
return true;

}

return false;

}

void validateAndSubmit() async{

if(validateAndSave()){
try{
if(_formType == FormType.login){
FirebaseUser user = await FirebaseAuth.instance.signInWithEmailAndPassword(email: _email, password: _password);
print('Signed In: ${user.uid} ') ;
}else{
FirebaseUser user = await FirebaseAuth.instance.createUserWithEmailAndPassword(email: _email, password: _password);
print('Registered user: ${user.uid} ') ;
}

}
catch(e){
print('error: $e');

}

}
}
void moveToRegister(){
formKey.currentState.reset();
setState(() {
_formType = FormType.register;
});

}

void moveToLogin(){
formKey.currentState.reset();

setState(() {
_formType = FormType.login;
});

}

@override
Widget build(BuildContext context){

return new Scaffold(
appBar: new AppBar(
title: new Text('flutter login demo'),
),
body: new Container(
padding: EdgeInsets.all(16.0),
child: new Form(
key: formKey,
child: new Column(

crossAxisAlignment: CrossAxisAlignment.stretch,
children: buildInputs() + buildSubmitButtons(),

),
)
)

);

}

List buildInputs(){
return[

new TextFormField(
decoration: new InputDecoration(labelText: 'email'),
validator: (value) => value.isEmpty ? 'Email can't be empty' : null,
onSaved: (value) => _email = value,
),
new TextFormField(
decoration: new InputDecoration(labelText: 'passwors'),
validator: (value) => value.isEmpty ? 'Password can't be empty' : null,
onSaved: (value) => _password = value,

//to hide password values
obscureText: true,
),
];

}
List buildSubmitButtons(){

if(_formType == FormType.login){

return[

new RaisedButton(
child: new Text('Login', style: new TextStyle(fontSize: 20.0)),
//validateAndSave replaced by validateAndSubmit
onPressed: validateAndSubmit,
),
new FlatButton(
child: new Text('create an acount', style: new TextStyle(fontSize: 20.0)),
onPressed: moveToRegister,
)

];

} else{

return[

new RaisedButton(
child: new Text('create an account', style: new TextStyle(fontSize: 20.0)),
//validateAndSave replaced by validateAndSubmit
onPressed: validateAndSubmit,
),
new FlatButton(
child: new Text('Have an account? Login', style: new TextStyle(fontSize: 20.0)),
onPressed: moveToLogin,
)

];

}

}
}

We will see below login screen from above login page

When we enter create account we will see below screen with user Id in Debug Console 

In Firebase console we will see the Above userid along with its email id in Authenticated users in Firebase consele as shown below

Congratulations You Have Learned Login Flutter App with Firebase Authentication Using Email Id and Password…..!!!

Share It With Your Friends If It Is Helpful….!!!

If You Have Any Query Make A Comment….!!!

 

Leave a Reply

Categories

Shein WW