Hi Guys, Welcome to Proto Coders Point, This tutorial is about how to connect facebook developer console app to firebase authentication so that we can integrate facebook login/ sign in method in our android, IOS(flutter) application.
Video Tutorial
For that We need facebook App ID and App secret code, that we need to add in firebase facebook authentication and make it enable.
You can see in below screenshot, to connect facebook developer app to firebase we need app id and app secret code.
Step 3: Adding Your flutter (android) app to facebook login
Click on the products + sign you will see a list of facebook services in that you need to select Facebook Login and click on setup.
then you may see the window as shown in below screenshot. In that you need to select as per your requirement, In my case i will select only Android ( because i don’t have mac book to show you set up for IOS, very sorry for that).
Step 4: adding android package in facebook app
Then, you need to add android package name in facebook ap
to get android package name, in you flutter project you will see a folder by name android open it
Just follow below screenshot
then just copy the package name and paste it in facebook console.
Step 5: Add Your Development and Release Key Hashes
you need to create key hashes, follow step given in facebook developer account or follow us
Windows
You will need the following:
Key and Certificate Management Tool (keytool) from the Java Development Kit
Add the following meta-data element, an activity for Facebook, and an activity and intent filter for Chrome Custom Tabs inside your application element:
This Flutter Tutorial is the 3 part of Getx Firebase Authentication, so in this Flutter Dev Tutorial we will add one more feature i.e. Google Sign In using which your application user can easily make use of google authentication to sign in/ get authorized to your app.
Video Tutorial on Firebase Flutter Google Sign In using GetX
Flutter Firebase Google Sign In method – Getx firebase Authentication
Method in GetXController Class
Firebase GoogleSignIn.SignIn() method
GoogleSignIn googleSignIn = GoogleSignIn(scopes: ['email']); //initialization with scope as Email
void google_signIn() async{
final GoogleSignInAccount googleUser = await googleSignIn.signIn(); //calling signIn method // this will open a dialog pop where user can select his email id to signin to the app
final GoogleSignInAuthentication googleAuth = await googleUser.authentication;
final AuthCredential credential = GoogleAuthProvider.getCredential(
idToken: googleAuth.idToken, //create a login credential
accessToken: googleAuth.accessToken
);
final User user = (await _auth.signInWithCredential(credential).then((value) => Get.offAll(Dashboard()))); //if credential success, then using _auth signed in user data will be stored
}
GoogleSignIn.SignOut() method
Using which user can easily signout from your flutter application.
Installation of Velocity X in your Flutter project
Step 1: Create a new Flutter
Offcouse you need to create a new Flutter Project in your favorite IDE, In my Case i m making us of Android-Studio to build Flutter Android & IOS apps.
Step 2: Open Pubspec.yaml file & add Velocity X dependencies
Once your Project is been build successful, Navigate/Open pubspec.yaml, and under dependencies section add velocity x library dependencies.
You can install the above dependency by running the following code with pub: flutter pub get
Step 3: Import Velocity X
Once Velocity X is been added you need to import velocity x where required.
import "package:velocity_x/velocity_x.dart";
VxToast
Using Velocity X you can easily show toast message and you can even show custom toast message.
Velocity X comes with a class VxToast to show a toast in your flutter apps.
Using VxToast class
VxToast.show(context, msg: "Hello from vx"); //using VxToast class
Show Circular Loading using VxToast.showloading class
VxToast.showLoading(context, msg: "Loading");
Loading Indicator using Context
final close = context.showLoading(msg: "Loading");
Future.delayed(2.seconds, close); // Removes toast after 2 seconds
In above snippet code you just need to create a final variable with velocity X show loading with some message as parameter and to remove the toast from flutter app screen make us of future delayed to remove the toast loading indicator.
Properties of VxToast
Properties
Default
Description
showTime
2000
To set duration of the toast
bgColor
__
Sets background color of the toast
textColor
__
Sets text color of the toast
textSize
14
Sets text font size of the toast
position
VxToastPosition.bottom
Available options – top, center, bottom
pdHorizontal
20
Sets horizontal padding
pdVertical
10
Sets vertical padding
Make use of above Velocity X VxToast Properties to customize your toast message or loading indicator.
In the continuation of previous tutorial, We are going to add feature like Flutter Firebase Forget password(using this user can send password reset email flutter) and Firebase Delete auth Account (using which user can permanently delete firebase auth account from firebase auth authentication)
So if a user forgot his authentication and then he want to reset his firebase password then a developer can make use of a firebase function
sendPasswordResetEmail
that will help developer to send password reset email to user email address,
To build this we need a UI from where a user can request for a password reset,
Note: For this user should atleast remember his email account using which he had create user account on firebase console authentication.
Understanding the process of Authentication password Change/forgot password change
1st Step: User will click Forgot Password button or text
2nd Step: User will be in reset password UI page where he enter his email and the submit
3rd Step : User will get email on his email with a link to reset firebase email auth password
4th Step : Clicking on that link user will change the password
Snippet Code / Method to send password reset email
Called this method will send a request to firebase auth to send a email link to reset the password
void sendpasswordresetemail(String email) async{
await _auth.sendPasswordResetEmail(email: email).then((value) {
Get.offAll(LoginPage());
Get.snackbar("Password Reset email link is been sent", "Success");
}).catchError((onError)=> Get.snackbar("Error In Email Reset", onError.message) );
}
So from UI or reset password UI page you need to called this method and pass a parameter email i.e. entered by the user. (Complete code is below)
Deleting account / Firebase auth delete created account
Note: To delete a account, the user must enter his email and password to re-check his authentication, In other words we need to check if the account holder is the one who want to delete his account.
Understanding the process of firebase Authentication delete account
1st Step: Create a user for deleting account UI Using which user can delete his account
2nd Step: Pass parameter email and password to method
Code is below
3rd Step: Check for Firebase AuthCredential using EmailAuthProvider.credential
4th Step: Then make use of user and reauthentictewithcredential to check if credential get successed or failed.
5th Step : Depending on the credential result if credential pass then just delete the user account and move the user to LoginPage()
So from UI or delete firebase auth account UI page you need to called this method and pass a parameter email and password i.e. entered by the user. (Complete code is below)
In delete account page we have 2 textfield to enter Email & Password then a button that called deleteaccount method by passing email,password as parameter.
then the delete auth account process will start as above.
Hi Guys, Welcome to Proto Coders Point, In this Android Tutorial we will discuss What is Model View Controller (MVC) & Implement an Android Login Validation form using MVC Pattern.
What is MVC – Model View Controller?
An MVC Pattern – stands for MODEL VIEW CONTROLLER, It is a Software Design Pattern, usually used in developing user interfaces. MVC Architecture pattern is a way how the information or data is been presented to the user & how the user interacts/deals with the data view. An MVC framework is nearly utilized in all development processes like Web development and portable application like android MVC and IOS MVC.
MVC Architecture Components
It has 3 Components i.e. MODEL-VIEW-CONTROLLER.
MODEL Here Model is nothing but a data, it directly manages the data, logic and rules of the application. A Model is responsible for managing data of an app.
VIEW A View in MVC is nothing but a UI design, How you can display the data to the USER screen. A view means presentation of the data in a particular format.
CONTROLLER A Controller is typically a piece, which control all the task/event that a user perform, Such as event handling, navigation, Communication between model & view happens in controller in MVC. A Controller recieve the input, validate it, & pass the validated input to Model.
Video Tutorial on MVC
#MVCArchitecture
MVC model view Controller architecture
Recommended Video to Learn more about MVC
Android MVC Example Tutorial – Login Validation using MVC
So let’s build a simple Login Validation android app by making user of MVC Architecture Pattern android example.
My Final Project Structure,
So then, Let’s Begin with MVC android example Code
Step 1: Create a new Android Project for MVC Example
Start your Android-Studio and create a new Project to build a simple Login Validation using MVC pattern.
File > New > New Project > Select Empty Activity > Next > Give a name to your project as MVC EXAMPLE > finish.
Step 2: Creating 3 MVC Components Package Folder in your project
So you know that we are here to work and learn about how to implement MVC in android,
We will create 3 package in our android project
Model
View
Controller
Just Checkout above Project Structure we have 3 package, in each package we have 1 – 2 files ( java class or interface ).
How to Create Folder or Package in Android Studio project?
Right Click > New > Package Here Create 3 Package by name Controller,Model, View as you can see in above image.
Step 3: Creating Interface and Classes and Coding it.
Then, you need to Create some java files in respective Package directory as follow
In Model Package create 2 files and add the code as below
IUser.java( Interface)
package com.example.mvcexample.Model;
public interface IUser {
String getEmail();
String getPassword();
int isValid();
}
User.java (class)
package com.example.mvcexample.Model;
import android.text.TextUtils;
import android.util.Patterns;
public class User implements IUser{
private String email,password;
public User(String email, String password) {
this.email = email;
this.password = password;
}
@Override
public String getEmail() {
return email;
}
@Override
public String getPassword() {
return password;
}
@Override
public int isValid() {
// 0. Check for Email Empty
// 1. Check for Email Match pattern
// 2. Check for Password > 6
if(TextUtils.isEmpty(getEmail()))
return 0;
else if(!Patterns.EMAIL_ADDRESS.matcher(getEmail()).matches())
return 1;
else if(TextUtils.isEmpty(getPassword()))
return 2;
else if(getPassword().length()<=6)
return 3;
else
return -1;
}
}
In Controller Package Create 2 files and add the code as below
We have Implemented a Interface ILoginView Which overrides 2 method OnLoginSuccess and OnLoginError, Both of this Simply show a Toast message.
Then
I have Created a Object with LoginController class that Helps us to send user inputed data on button press by using OnLogin method and then it check for Validation return the result if all the User entered field is success or error.
And depending on this result user will get a toast saying success login or some error message.
Conclusion
In this Android tutorial article we learnt what is MVC? & it’s MVC Architecture and we also implemented MVC pattern example in Android app in a form if login Validation.
Hi Guys,Welcome to Proto Coders Point, In this flutter tutorial we will connect flutter to firebase console project & also implement flutter firebase authentication using getx library.
So Let’s Begin.
VIDEO TUTORIAL
Create a new Flutter Project & Connect it to Firebase Console Project
Create a new Flutter Project
OffCourse you need to Create a new Flutter Project – In Recommend you to use Android-Studio as your IDE for Building Flutter Application.
How to Connect Flutter app to Firebase – Android
Adding/Create a new Project in Firebase Console
Select Platform – I have selected Android, Because this tutorial is only on Android
Registering your Flutter android to Firebase
You will find your Flutter android package name under
Copy android package name and paste it into firebase console app registration as soon below.
Then, Hit Register app
Firebase will give you a google-services.json file a show below, you need to just download it and paste in your flutter project under project > Android > app Last Step add all the dependencies, as guided by Firebase app registration steps Then after completing all the above task you need to add a flutter plugin dependencies i.e firebase_core:
and then in flutter main.dart file you need to call Firebase.initializeApp(); so that your flutter app will call firebase server and your app will get connected to firebase console. So Now your Flutter App is been Connect to Firebase Console Project
It’s time to Start Implementing Flutter Firebase Auth using Flutter Getx Library.
Implementation of Flutter Firebase Authentication using GetX Library
In this project we have designed a Beautiful UI design for Login and Registration page by using VelocityX library
Add this all dependencies in pubspec.yaml file under dependencies tag:
flutter_svg: To show svg image in our UI design. velocity_x: To build UI design much faster. get: As this Tutorial is on Getx Firbase Auth Example. cloud_firebase: Need to send register/store user data in Firebase cloud store. firebase_auth: To send create Auth and Login Auth Request to Flutter Firebase Authentication service.
Step 2: Turn on Authentication service in Firebase Console
Then, now Go to Firebase Console, open your Flutter firebase project and on the left navigation you may see Authentication open, go into it.
There you need to turn on Firebase Email/password Auth. Step 3 : Create a Cloud Firestore database
Just go to Cloud Firestore and Hit that Create Database button and then change the Rules to any one can access
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write; // here allow read, write means any one can access your data // which is not the safe method for Real project
}
}
}
This is how our registered user data will be store in firebase firestore
So, Now we are done will all the Firebase setup for Flutter registration email, Let’s Check the flutter dart coding.
Step 4: Coding in Flutter Project
Here is the Project Structure with all the dart file.
We have 3 Directorys
GetXHelper : Here we have FirebaseController.dart file which will help you to communicate with Firebase Auth and Firestore server.
Screen : In the Folder we have 3 Pages
Login Page
Registration Page
Dashboard Page
Widgets : This is just Social Sign Row, Because In UI we have Common Google and Facebook SignIN Icons.
Codes
FirebaseController.dart
In below code We have
_auth : that will help us in creating and user login.
firebaseUser : which will help user to keep user logged in into the app whenever user re-open flutter app.
then we have
3 method that will help us in Creating account in Firebase auth, Login in using Firebase auth and signOut the user from app.
And We are done your flutter app is now connected with firebase and provides Flutter Firebase auth with Getx and also store user register data to firebase database.
I have selected Android, Because this tutorial is only on Android
Last Step add all the dependencies, as guided by Firebase app registration steps
Then after completing all the above task you need to add a flutter plugin dependencies i.e 
So Now your Flutter App is been Connect to Firebase Console Project
You may download/clone this 
Step 3 : Create a Cloud Firestore database
