Firebase Facebook Login in Flutter | Flutter FIrebase Course | Programming Addict

in this video i'm going to show you how to implement facebook authentication in a flutter app and how to hook it up with firebase authentication but before that we're going to build this ui where we give the user a choice of the way they want to log in we're going to use the flutter facebook auth package we installed in the first part of the course so to build the ui we're first going to create a new dart file and just call it login and in there we're going to add a stateful widget let's import material design and now we can start out building the ui so let's add the scaffold and in there add a center widget because we're going to center everything horizontally and then let's add a column and we're going to make sure to align everything in that column vertically to the center and there we are going to add some children before we continue let's take a quick look at the application so we have these two titles that say restaurants and login and they have the exact same styling the exact same color the same font size the same font weight so if we just try to build this we would just be copy pasting code so for the sake of not doing that let's build a widget that's going to have that shared styling so let's go here and add a new file and call it login text let's make it a stateless widget and let's import material so let's make a constructor where we're going to take in some text let's display a text widget put in the text we got in our constructor put in a basic text style and in there we're just going to put some basic stylings set the color to primary make it a bit bigger with a different font size and just add some font weight to it so now we can add this to the login widget so just add the restaurants title and the login title but we're going to put a little bit of a gap between them with a size box so the next thing we need to build in this ui are the buttons so they kind of have the same structure they're just going to have different icons different text and different colors but still they can be made into a widget so let's create that widget right now so i just called this widget button and added a couple of parameters to it so we're going to take in a color we're going to take in an image provider so either a network image or a asset image i believe we're going to take in text which is going to be the text that is shown in the middle of the button and we have the on press method which is the standard thing when the user clicks that method is going to be executed because these buttons are going to do different things so now let's add in a gesture detector with the ontap handler and just call the on press method we got passed in so let's then add a container in that container we're going to set the height of the buttons we're going to add a box decoration that is going to give it a colorful border and it's also going to give it a nice border radius which is just going to curve it up at the sides here let's add some padding so internal padding inside the button let's put in a row and inside that row a little bit of horizontal space let's put in an image let's add some more horizontal space to have between our icon and our text let's add an expanded widget which is going to contain a row and that row is going to contain our text and we're doing this just to try to center the text inside this row since our button is complete now we can start using it so let's add a login with email button let's add the login with facebook button just with a different color and different logo and also now let's add the login with google button again with a different color and a different logo to add these logo files into your app just go download the project from the description copy these three files and then go into the project and add a new folder call it assets under that add another folder and call it images and then in there just paste the files and in order to include these files in the flutter app you'll have to go into pubspec.yaml and declare them after that just run pubget and you should be good now when we run the app we still see the email login even though we want to see the new login page we created so in order to fix that we're going to have to go into the main.dart file and change the home page to login instead of email login okay now from what i can see the ui looks good i'm not going to add the sign up button right now we're going to add it later once we're actually implementing signing up users so since we already have the login with email page when the login with email button is clicked we should redirect the user to that page so we're going to get the navigator with the context and just push it using the material page route and that route takes in a builder which is just a function that returns a widget and we're just going to return email login there and now when we go into the app and press login with email it works so now we can actually get started with logging in the user with facebook so i'm going to call this non-existent method called login with facebook and i'm going to declare it above the declaration of the build method okay so now we're going to be referencing this flutter facebook login documentation to seek i know what we have to do in order to get this working so the android documentation says this assumes you've done the associate your package name and default class with your app and provide development and release key hashes for your app in the facebook documentation for android site so let's go to facebook documentation and see what's up so we have to log in with facebook so i'm going to log myself in and let's see now so we can select or create a new app since this is a new app i'm going to create a new app in my account for the app type select consumer products and permissions like facebook login and instagram basic display and i'm going to say continue here type in the name of your app and if you want you can add a business manager account if you need it but it's not required so let's click create app enter your password just to be sure and now our app is created so now we're back in the documentation and i'm going to select the newly created app here and now we can go to the next step so now we need to check if we're using jsenter in our gradle build script repositories so in android studio go into the android folder and immediately there you will see the build.gradle file and here in the repositories you can see we already have jsenter if you don't have it added but if you just followed along with the course you should have it there so back to documentation now we need to add a dependency directly to the facebook login sdk and now we need to add it to the app level build.gradle file so just copy the code snippet from the website paste it in the dependencies section of your build.gradle file and that's it okay now to the next step we need to create a strings.xml file inside our android project and declare two strings one is going to be the facebook app id and the other one fb protocol scheme so now go into android studio and under this directory structure that you see on the screen in the values folder add a new file and call it strings.xml here i'm going to paste in the code from facebook and i'm also going to copy and paste this boilerplate resources tag that we need in all android resource files the next thing we're going to add is the internet permission inside of androidmanifest.xml now we have to add two activities to our android manifest and also this metadata tag so i'm just going to copy the metadata tag first go into androidmanifest.xml and just paste this under the existing metadata tag this tag we added actually references the variable we declared here which is facebook app id okay now let's copy the activities so i'm actually going to copy both of them at the same time and i'm just going to paste them below the metadata tag and that should be it on to the next step we need to put in the package name or the app id of our application and we can find that in the build.gradle file if you remember we already used this when we were registering the firebase project okay so now let's copy the app id go back to the documentation and paste it okay and now the default activity class name is going to be just the package name followed by main activity and when we try to save we get a warning message that our packaging could not be verified on google play but that's okay since our app is not published to google play so there is no way to verify it just click on use this package name and continue okay so in the next step we need to generate a development keyhash and what that keyhash is basically going to do is it's going to generate a key unique to our development environment and we're going to put that key into facebook and then when somebody tries to log in with facebook or basically we try to log in with facebook from our development environment facebook will know that that request is legitimate and will approve it the same thing stands when we go into production we're going to generate a production key hash but that production key cash is going to be based on the production key store which is tied directly to the production app so that's how facebook is going to know that the requests coming from our app are legit login requests okay now in the shell on windows or in the terminal on mac os or linux you're going to run this command so basically copy the command from the facebook website and i modified only a couple of things i changed the path to open ssl that's in the facebook documentation with just openssl.exe you also want to make sure to install openssl from the google code archive you have the link on the facebook documentation page and you can just run this command and it will output a keyhash so when you try to run this command it's going to ask you for a keystore password and since here we're pointing to the android debug store the default password for that is just android but when you're about to go into production you're going to point this to your production key store and there you will set the password for that keystore so you're going to use that password but for development just use android and it's all good so after i ran the command i got the key cache and i'm just going to copy and paste it into the facebook website and that's it for the keyhash we can click save and that should be it now this documentation continues to go on about the facebook log button registering callbacks and all of that but here that doesn't apply to us because this is android specific documentation and here we're using flutter so we really don't need any of the other steps so right now we should be done with setting it up on the facebook side now we should go into the firebase console and enable the facebook sign-in method so we need to pass in the app id which we can get from the facebook console and also the app secret which we're going to find in settings basic section after we paste the app secret and click save we should be good to go okay now we can finally start coding so the first thing we're going to add is a loading variable because we're going to display a loading indicator when the user is logging in so they cannot try to log in multiple times by hammering on a button just like we did in the email login part okay so when the user tries to log in we're going to show the loading indicator by setting its state and then we're going to have everything in a try block because a lot of stuff can go wrong and we want to handle the errors properly so now we're going to call the facebook auth.login method and the facebook login fails an exception is going to be thrown and then we're going to handle that in the catch method but if everything goes as it's supposed to go code will just continue executing so now we're going to grab the user data from the currently logged in user because as i said if the user is successfully logged in the code will continue executing and we will know that the user was successfully authenticated with facebook and we're going to grab some user data to insert into our user like email name and profile image okay so here comes the part where we're going to hook up facebook authentication to firebase so now we're going to take the access token that we got to facebook and we're going to make a firebase credential out of that and then we're going to use firebase authentication to sign in with that credential and now we're signed into facebook but we're also signed into firebase authentication through facebook and now we're going to keep a copy of the user we just logged in in our firestore collection called users and this is where the whole user data thing comes in where we have the email the picture url of the user and also the name and after that we're just going to push the user to the home page now we need to make sure to add the catch block so we can handle the errors but we're going to handle the errors in just a minute let's just make sure that we're hiding the loading indicator after everything is done okay so now let's handle the errors first i'm going to declare a variable called title and then i'm going to make a switch statement for the error code that we got from firebase and here is a definition of all of the codes we can get from firebase and we're going to use these codes to display appropriate errors so the first case is going to be for the account exists for a different credential that's basically when you have an account in a different account provider for example if i have a google account registered with firebase and that account has a certain email and if i log into a facebook account with that same email and try to sign in with firebase this error will be thrown the next one is invalid credential i don't know how this can happen to a regular user but even then how could you explain it to them so i'm just going to say unknown error occurred the next couple of ones are pretty self-explanatory they're just kind of translated from an error code into actual language okay now that we have actual text to display let's use the show dialog method and pass in the build context and then we're just going to declare a builder that's going to return an alert dialog with a generic title and the content also let's add an action button that's just going to remove us from the pop-up and also i'll rename this title variable into content okay now i think we're in a position where we can try to run the app okay so when i try to run it i got this error which basically here says that the string app name was not found and that's because of the code we added to our android manifest that actually tries to use the app name variable so let's just go and add the app name variable into our strings.xml file okay so now when we try to run the app and log in with facebook let's see what happens so yes i can continue but after that i'm not transferred to the home page instead we get this error in the console that says that the firestore apis were not enabled that's because we didn't use cloud firestore yet in our project so we have to go manually into the console and enable it by ourselves so all we have to do in the firebase console is just go to the cloud firestore section and click on create a database and we're going to start in test mode because we're just playing but later i'm going to show you how to harden these rules to actually make your database secure now you can choose a region choose whichever one you like or is the nearest to you and that's it and now when we create the database and go to login after we press continue we're taken to the homepage right away which means that everything works as expected and now in the firestore database you can see that there was a document added which means we have done almost everything we needed to do the last thing we need to do is just hide these buttons if we're loading so if we're not loading we're going to show the buttons but if we are loading we're just going to show a circular progress indicator and now when we go back to the app you can see there's a nice loading there so you cannot spam the button multiple times that's it in the next video i'm going to show you how to implement google authentication

Channel: Programming Addict

Views: 23,672

Keywords: flutter tutorial, google flutter, flutter widgets, flutter app, flutter app development, flutter apps, flutter free tutorial, flutter mobile app, learn flutter, flutter app development tutorial, flutter firebase, firebase, firestore, flutter fire, flutter firebase project, firebase firestore project, flutter authentication, flutter auth, flutter firebase auth, flutter firebase facebook, facebook login, firebase facebook, flutter facebook, facebook login flutter

Id: PweQbVgR9iI

Length: 17min 56sec (1076 seconds)

Published: Wed Jul 21 2021