Flutter - Facebook login Authentication with firebase How to add Facebook Authentication in Flutter

hello guys my name is junaid khan and today i'm going to show you that how you can use firebase facebook authentication with your flutter app so i'm using the same project from my previous video in which i showed you how you can use the google authentication from firebase but today i'm going to show you again that how you can connect your firebase with flutter app so for the start for start you need to open your firebase console which you can just open it from this link and go to console and after that you need to open your project again after that you need to click on add app you need to select android because right now i'm showing you how to use it on android after that you need to add your package name which you can get it from build.gradle file this is this one is your package name application id just copy it and you need to paste it here after that you need to get your shaq although it's optional but if you need to use the firebase authentication then you need to define the define your shaky okay so how you can get it just open your terminal in android studio go to android directory and type this command signing report it will take almost 10 to 15 seconds to show you the shaky okay depending on the system okay you need to copy this sha1 key copy it and you need to paste it here register your app after that you need to download this json file okay i already have it let's remove it you need to drag this file in this project and write in the app folder you need to place this okay press ok done click on the next step you need to copy this line and you need to paste this line in the project level of build.gradle right below this scotland version line after that you need to go to the go to this line you need to copy this line and you need to open the build.gradle file which is an app folder and you need to paste this line here and i hope that our firebase is connected successfully just click next and continue to console and after that you need to open your authentication panel where you need to enable your okay i already enabled okay you need to enable your facebook let me remove this first okay you need to enable your facebook app id sorry you need to enable this method um so we are required two things which is app id and app secret so we will get this these things from facebook so you need to open your developer.facebook.com and you need to sign in with your facebook id facebook account after that you need to open your my apps okay and you need to create a new app and you need to define that what type of app you are building so i'm just selecting consumer next display name flatter your flutter firebase auth okay create an app i need to define my password okay yeah so the app have has been created successfully okay so this one is our app id i will just copy it and i need to paste this here and after that we need to get the app secret so we are getting it from the basic i think so yeah this one is our app secret and we need to paste it here and yeah so now we can save it and yes our facebook method is enabled successfully okay after that you need to open your developers.facebook account again and you need to add your and you need to set up your facebook login just click on setup and it will ask you on which platform you are going to set it just click android i'm just clicking next and yeah next tell us about you now you need to define your yeah and you need to define your activity as well which is main activity save it after that yeah click continue just yeah you need to define your key hash so i'm showing you uh easy method i'm showing you an easy method how you can convert your shaky to key hash sha key hash i think so no sorry sha toki hash i think so this one i will also mention this link in the description of this video so you don't need to search for it after that you need to add your sha key and you need to remove your columns from this and you need to convert to this hex you need to copy this and you need to open your browser just paste it and click save and after that you need to click continue just leave as it is you don't need to change anything yeah now you need to copy these two lines okay just click copy and open your project and you need to open your app folder src main and after that rds and you need to create a new file which you can name it as strings or let me see that yeah string file okay and after you need to paste these two lines here okay right you need to define one more thing here which is app name i think so yeah app app name which is um flutter firebase auth practice you need you can close this line after that you need to open your androidmanifest.exe file okay and you need to copy this permission internet permission i think so yeah and you need to define it here after that you need to copy this whole code just copy it and you need to place it right right before the closing tag of application yeah okay now i think so we already defined this facebook login protocol scheme facebook app id app name in our strings folder you can close this and yeah i think so click next next next so this this is basically a code for the uh native platform if we are developing the uh an app with um java or kotlin so you need to get this code but we are working with flutter so we don't need these things okay so i think so yeah now click dashboard and now you can see that our facebook login is showing it here after that we need to open our project again and just for the start we can test it by installing it on a real device i connected my device with visor so i can show you my real device here okay it will take some time to install the app okay i'm just pausing the video so after i will continue the video when it is installed so now the app is being installed so click install it depends on the os okay yeah so it right now it's showing me only the login with google method so i need to create an button for facebook as well so i'm just copying this copy this code and i need to create a screen for my login with facebook as well so login with facebook stateful login with facebook need to import few libraries okay and login with facebook and need to change this check as well yeah good now we need to show one thing center cross access alignment as well to center and hot reload yeah one more thing we need to define this in container if because a column takes only the width it requires so width is media query dot off dot size dot width yeah correct so when we click on this we will go to our when we click on this we will go to this screen and if we click on this yeah it's working fine after that we need to work in uh work on our facebook activity so i'm just copying the code yeah most of the code will be the same scaffold title text login with facebook and after that we need to define the body after that we need to define the body which will be in column because we are showing two things here one is the user email and the other one is the method basically three things one is the user email with which user have logged in and the other one is [Music] the button for logging in and the third one is for logging out okay so we just create a row with children and there will be two things one is user email and the other one is the email with which user logged in okay we need to define a new variable here user email and we will initialize is as empty and we will pass this user email here okay so we need to do some a little bit of design here first we need to hot reload and we need to check yeah it's perfect okay now we need to define again main access alignment dot center cross x alignment dot yeah center we need to define it in container with media query dot off context dot size dot width okay hot reload and let me check yeah working fine okay so now we need to main access alignment meaning space between and we need to add some padding here default padding and after that we need to add a new button here on pressed and text login and we are just copying and pasting the same button with a different text which will be log out okay now let's see how it's looking yeah perfect okay so now we need to perform the functionality on this button first and after that we will perform the functionality on the logout so i'm just navigating to my favorite site which is flutter file i'm just opening this site and authentication documentation and social auth now just navigate to flutter facebook off so it's saying that we need to uh use a package which is fl flutter facebook auth just click on this and it will redirect you towards pub.dev but or where you can find amazing packages for flutter just copy this and you need to open this and open your webspec yaml file pubget [Music] yeah so it will take two to three seconds it must take two to three seconds to show yeah 9.7 seconds okay just close this and after that you need to close this okay so according to this website that they are saying that we need to use this code only for facebook authentication so just copy this code and and create a new function here and import the libraries back files it requires click alt enter and it will automatically get this okay so it's saying that yeah null um it's saying that we need to add a null check because i am developing the this project on the latest version of twitter so it's null safety okay now i think so it should work but we need to save but we need to save the email in our in our this variable variable sorry okay so we just click on user email and facebook auth dot instance dot get user data um sorry one more thing i missed the permissions which we require from the user that we need to say his public email we need to see his public profile picture these things so we need to define the permissions and you can define the permissions like this so i'm just checking that how we can add okay so just add these lines and it will show you when the pop-up will show to the user that you can log in with this account so it will show that this app will have you need that need an access for to your email public profile user birthday so that's like this and after that we need to get var user data and file sorry facebook auth instance dot get user data yeah like this and after that we need to save this user data like this because it's a mapped array so we can just get it like this i think so it must yeah sorry we need to change it to final sorry it's a promising function that's why it was written like this okay so now um i just written the code that how we can just get the user sign in with facebook and we need to set state so it can reload build function to show the email here okay so just save it and we will check our code login with facebook login and it should show me the pop-up and why it's not showing me let me check that okay yeah yeah so uh when i add this when i added this face flutter facebook auth so we need to run our app again reinstall our app because uh it works on methods channel invoking these methods so it needs to restart the app in order to properly working okay so i tried to compile this but i am having this error so let's try to solve this okay so i think so we need to increase our kotlin version which can be like this and we also need to change our gradle version as well so we can just open this like wait a second where yeah so we need to just increase to 6.9 minus all dot zip and we try to run our app again and see whether the issue presets or it solved so just wait and watch it will take some time to run so don't lose patience okay now it's showing us the error that it needs a multi-text enabled okay so no problem just open your code let me see okay now we need to open our yeah let me see yeah we need to open this and we need to write multi text enabled enable true and yeah wait a second multi-text multi-text enabled true yeah okay now we need to run our app again and check whether this fix our problem or not and yes it solved our problem okay so let me open the visor again and view my device and [Music] let us let me try to run my app again and open visor again log in with facebook try to click login yeah it's working app not setup this app is in still develop mode and you don't have to access access okay yeah we need to on the yeah you must provide valid pro uh privacy policy url okay so just click on basic and settings and basic and you need to define any privacy policy url right now proglaps dot go labs.go and save changes and check the app again no it's still and let me check that whether it's yeah now it's live so we can log in with any account we want oh yeah so we need to log in with our facebook account with the developers facebook account in our app so let me login in my mobile with my prog labs account facebook account and after that i will show it to you that how it will look like okay now i logged in with in my on my mobile with my developers.facebook.account so i will just click on login and see that it's asking me the permission that your name profile picture email address and data but this app will be required so continue as prog labs and wait for few seconds and it should show the user email okay so we need to check so it's showing me that firebase app is not being initialized so sorry we need to open our main method again main file and we need to make it as future white is sync and after that we need to add this line widgets binding dot ensure initialized and await and firebase dot initialize app done now we need to run our app again open the run panel and also my mobile as well log in with facebook login it should continue as prog labs and wait for few seconds and should return our email here it's sending the request now click on continuous prog labs and it should yeah as you can see that our email has been returned and now you can verify and also i have stored this in my firebase as well that from this line it's being stored on firebase firebase auth dot instance dot sign with credential and now we are passing the facebook auth credentials so you need to open this and users and see your users have been signed in and you can see the unique user unique id as well so that's for this tutorial and i hope we will meet again in our next tutorial in which i will show you that how you can use phone otp method for logging the users with firebase and flutter so take care and subscribe our channel and press the bell icon so you will be notified for our each and every video so bye

Channel: Proglabs Official

Views: 16,230

Keywords: flutter, facebook, authentication, auth, how to, facebook login, flutter firebase facebook, firebase facebook, flutter facebook, facebook login flutter, users, signin, login, coding, programming, learn, software, development, apps, apple, iphone, ios, android, login screen, ui, ui/ux, google flutter, flutter tutorial, flutter widgets, flutter app, flutter app development, flutter apps, flutter free tutorial, flutter mobile app, tutorial, learn flutter, flutter app development tutorial

Id: AG_hO03Vyto

Length: 27min 49sec (1669 seconds)

Published: Sat Oct 09 2021