Flutter & Firebase Authentication | Auth with Google, Facebook, Twitter & Phone Methods (PART 1)

the most trending video on this channel was the one where i teach you email and password authentication in flutter but most of you were asking about social sign-in like google facebook twitter and phone authentication so today we are here to implement all of those authentication providers in one single video also you have asked a lot of queries regarding shared preferences and so i thought of creating an ultimate video which covers everything so in this tutorial we will learn the social authentication the shared preference for storing sessions cloud file store for our database and also the provider state management so let's roll that intro and see what we'll be building in this video so here you can see we have our android emulator and also our iphone emulator on the right side of the screen and on the left side we have our firebase project so now let me show you how everything looks like so on our android emulator let's say i click on sign in with google so here it will ask me to choose a particular account and if i click on this particular account which i have on my emulator this will hang in to that particular account and here we have welcome mat click and the email the particular user id and we can and here you can see we are assigning a particular provider to this thing now if we reload the firebase here we have this particular email id also in our database we should see a user collection and then the document id this document id is the user id which is generated by the cloud firestore automatically after the signing of the user and then we have all these fields like email image name name provider and the user id so this was this was for google and now let me also show you that actuate preference is also working so if i open up my terminal and here i guess this thing is running the android emulator if i reload and they should show me the home screen and here you can see we have the home screen here now if i sign out and reload the application now we should be redirected to the sign in screen this means shared preference is working on both the sites i can just decrease this here and let's see about our authentication with facebook so this signing in with google finding the facebook hanging with twitter and the phone authentication is working on both android and ios so do stick to the end of the video to watch how to integrate these things in all those platforms now it is asking me to continue with the particular email id that i have for the facebook now the authentication has done here you can see i've it fetched my profile photo the name the email address and it automatically assigned a particular user id this is this is not assigned by our firebase but this is assigned by the facebook itself we have the facebook thing also now let's say i sang it with twitter this i already have my email here so i just need to click on authorize application and boom the sign-in is completed now if i reload i can see and also in a cloud file store we will be see seeing all these entries like this one is for the twitter the name email the image the user id and this one is for the facebook now the final step is let's say continue with the phone authentication i enter my phone here i'm blurring this part in the video so keep this information confidential and i'm entering my name and also [Music] proceeding with entering a email address now after click on register it will open up a verifying one not a robot section and then show me a pop-up for entering the code i just received the code on my real device i will enter this and if i click on confirm we should be redirected here so this is the particular dummy image that we are fetching and now if i go to this authentication section here you can see we have a new phone authentication added and also in our cloud firestore we should be seeing this number the email address this is a particular dummy image the name the provider and the user id so this is everything that we'll be building in this tutorial without any further ado let's get started okay the first and foremost thing that we need to do is we will open up a terminal and here let me go to my documents where i store all my projects and here we will create a newsletter project we will write this name as block or we keep this name as simple as okay as it can be now we will go to block auth and now we will open this in our visual studio code you can exit this writer and here you can see we have this new project created now the thing that we need to delete from here is the linux folder because we are not deploying developing it for linux the mac os and also our windows will be only having this main.dat file okay so now the first and foremost thing that we need to do here is we will just open up my simulator okay so now we will run the application okay so we have the dummy application which comes pre-installed with the flutter so now what we need to do is first of all we will be linking the firebase to our application so for linking the firebase to our application we will just get back to our chrome and go to this link you can directly search for firebase if you want and then go from here the firewall console i have directly entered the link here we'll click on create a new project and we will write this block auth and click on continue we don't need google analytics for this so we will be disabling them and we'll click on create project so by the time it is creating the project let me tell you what things we will be implementing so in this particular series we will be adding firebase to ios and android and doing google and facebook authentication [Music] managing shared preference so in this part what we'll be doing is we'll be doing all these tasks so we got our project created now the thing that we need to do is we will be clicking on this ios and we will be adding the particular and ios simulator to our project so for doing that we will be opening up our xcode so we got our xcode open now we will click on open a projector file and we'll go to the document folder where we just created this app and we can go to this blog art auth and then ios and then we will click on open now the benefit of this would be we will be able to find the bundle identifier we can directly get this in info plist file if you can see this the bundle identifier but what we wanted is we will be doing directly but what we will be also doing is we will be saving the configuration file also so we can open up xcode here and click on register application i'll just wait for this and like click on download google services info.plist and i'll drag this here click on finish okay and click on next click on next click on next and click on continue to console so we don't need much information right there and now we can just close this thing the other important thing that we also need to do is we will be adding the android application also right now so we can just click on this add app and click on this android now for adding the android application it is locking up for the package name so we can go to this manifest file you can also go from android app main and then a manifest and here you can see we got the package name so we'll just copy this and we will write block auth i know it is asking for the sha signature so it will open up a terminal and now i have a separate video for ssh generation if you have any issue if you don't have any issue then you can just write and you can just go to dot cd and cd and dot android and now here you can see we have the debug key store so we like key tool list v keystore debug.keystore alias so you need to just enter this command and now it is asking for the password it is android and now we got our sha signature we'll just copy and paste it here i have a separate video on this if you have any issue you can just watch that particular video in which i have proceeded with the installation of sha and the java jdk in both our windows and also our mac list click on next or rather if you don't need to click on it we need to download this google services.json file we can exit the terminal we don't need the terminal here and yeah so the file downloaded now we need to drag this end to app folder and do remember to replace everything you can just press enter and replace everything that is present after this services and we need to keep this in particular format google services.json the next thing it is asking us is adding the firebase sdk to the project level so the project level is this android level and here you can see we have this build.gradle so on this place we have to add this class path and other than that we don't need to do anything here and now it's time for app level so this was the project now we have the app level build.gradle so you can just write apply plugins and then the next thing is implementation platform uh one more thing that i usually love to do is i will enable the multi-text [Music] okay and the minimum target sdk which i can set is uh 21. and rest everything is okay if any issues come after we were after we are running the application we will just change that thing too so i guess firebase authentication is about to start so we got all the application registered here one more thing i can as we are using google twitter and also our facebook for the authentication we also can add the sha signature for more security for the application we just need to go to the cd android and then just write the particular command that you used earlier and let me write the password android we have the sha-256 you can just copy paste and save it here so i guess everything is looking fine from this thing we can now go to this and now in our authentication we can click on get started and so the providers that we'll be using is the google facebook the phone and the twitter so now before doing that do remember to add this particular extension because this will help you to add all the packages that i'm going to tell in one go so all you all you need to do is you can just enter this command if you are on windows then ctrl shift p and if you are on a mac then a command shift p and this will and here this will open up the command palette and here we can write add dependencies now that the dependencies that we need to add here is so we are using firebase so definitely will be needing our firebase code we are also using the firebase authentication so we will be using firebase auth then the next thing that we will be doing for this part one is the google sign-in so we will like google sign in and other than the google sign-in we are also going with our facebook in also so we will call the package this is the flutter facebook authentication package and the important thing is we'll be using provider for state management so we'll call provider also here so i guess everything is fine for now or i think we are also in need of our cloud file store this will act as a database as we because we will be saving the authentication data in the cloud file store remember we are not using a real-time database that is present in file store because in modern documentation in modern practice it is generally considered to use cloud firestore now if you can click on enter this now the beauty of this extension is that it will look for all the packages with the particular name and if there is no package with that name it will show you a drop down of the suggested item you can select from that i guess everything that i entered was correct so now it will do a flutter pup get and now in order to make this thing run on my simulator first of all i need to just quit the simulator and i guess you just open my terminal and flutter pubget is successfully run now if you go to their ios folder you have this part file so the thing that we need to do here with our pod file is we will just increase the ios version to 12 and rest everything is working fine if so if you are not on a m1 mac then you can just directly write pod install but remember you need to be in this directory this block auth and then this ios folder you cannot just enter the command in this directory block auth you need to be in this ios folder so you can just go here and now the thing that we need to do is you can if you are on a not on a mac m1 mac you can write part install but as i am on mn mac so i have to write this command arch x8664 pod install now what will this will do is it will do a pod install for me of all the packages that we just added to our perspective file just wait for this to finish okay so what we can do is we can click on exit here and now let's run our application after this run the export build i guess for the first time it will take a little bit of time but after that it will be fine i'll be right back after this okay so here you can see we got the application running this means the firebase is successfully installed now what we can do here is we will first of all delete everything that is present here in main.file and here we will write import material. and then we will write void main and run application now we need to create a stateless widget here this will be my app which will return our material app okay perfect so now we can just write a name here my app will provide a const value and inside this material app thing that we need to do here is we need to first of all show the splash screen so now let me just do the folder structure here now we can create a folder screens we can create a folder utils and we can create a folder provider okay so inside a provider we will write sign in provider dot dot and we will also be needing an internet provider which will check whether we have successful internet connection or not for adding or rather for checking that particular internet connectivity will be also adding up more package one more package here but uh let's go with first of all science provider then we have internet provider and in screens we will first of all create a splash screen so we can write import material dot dot splash screen state full widget and here we will return a scaffold and inside this main.file we will call the home as splash screen we can provide a cost value here and we will disable the debug banner now this was for the application where we need to also assign initialize the application so we will write widgets twitter binding dot insure initialize and also we will call our firebase here so this will be async we'll let firebase dot initialize app click on save and you can also see we can if we do hot reload everything is working fine yeah so now we'll go back to our splash screen and here inside our splash screen the thing that we will be needing here is let's say we have this scaffold then body can be safe area and we can create a center widget with a image as a set image now first of all if we go to the finder i'll just get the current project that i have okay and here you can see we have this asset so i'll copy this image and i'll just reveal this in finder here i'll create a new folder this will be assets remember this asset folder will be in the base directory that is block authentication and here i will paste this particular logo and in this util we can create a config file so this will be class config this will be static final app icon and we can write assets logo.png and if you go to a pubspec eml file we can delete all this unnecessary information from here we will write if you can see the format here you can uncomment this thing here assets images and now in a splash screen we'll call our config and we'll provide the app icon here okay i think i am making a mistake here first of all we will have to provide this insider image widget the image can be imager set config app icon height can be let's say 80 which can be 80 if i click on ok so we have this splash logo here we can okay now the thing that we need to do here is we need to create a init state so we have to go to a sign in provider and here what we'll be doing is we'll write sign in provider this will extend change notifier and whenever this sign-in provider is called we will first of all do our function sign in user inside this function we will check whether the user is signed in or not so this will be a future function so we'll write check sign in user this will be async okay so we forgot to add shared preferences here write share preferences this has added the share preferences to us and if you write basically why i added share preferences whenever a user is signed into the application will be saving a boolean value that is signed in is equal to true this means let's say a user sign in with google so when that authentication occurs and when the sign-in is successful we will be updating the boolean value to be true and every time our sign in provider this provider is called will be checking whether the user is handed or not so for checking that we will be calling the shared preferences to get that particular value from our storage so let's share preferences s this can be shared preferences dot git get instance and now we have to check whether it's signed in so we don't have this particular thing here this means we have to create it so we can create a boolean value is signed in which will be false for now google get is signed in perfect and now if we assign this so we so now whenever the function is called so now whenever the provider is called we will be going to this check sign in function and here in this text hanging function we will get this is signed in instance is signed in boolean value and we will update with get bool is signed in if it is true then it will be storing a boolean value of true else it will store a boolean value of false and then we can just notify our listeners so this works for the science provider now here let's see whether this signing provider is working or not so here you can see we have home screen dot dart and then we have login screen dot dot so let me just create a stateful widget login screen we will return a scaffold and this can be body center child text login screen we will be doing the same for our home screen also and we will return we will return a scaffold body center child text home screen and now let's see whether our sign-in provider is working perfectly fine or not right now the is signed in value would be false because we don't have anything stored in our data in our app storage with the name of this is sign with the name of this signed in so let me just create an init value init value will be the state whenever the application loads whenever there is a screen load the init value with the first value that it will be loading up so here we can create init and now for first of all we have to call this time provider so we will write sp signing provider this will be context dot read now read will not be showing here so the thing that we need to do here is we will import our provider back package for state management we will read our sign-in provider and then one more thing that we need to do here is we will go to our main.dart file first of all the thing will be we are returning a material app as of now but right now we will be returning we can wrap this with the widget this will be multi provider and the providers can be change notification provider create context provider will be signed in provider i guess one more bracket is needed perfect now if you have not initialized this in the main. file then this will not work here in any of the screen for the application so now what we can do here next is we will create a timer of two seconds to fetch the particular boolean value and then migrate to the particular screen so like timer duration can be seconds two seconds and i guess this is showing me an error if we see this we have to import this dart async now if the instance and this value is equals to false if this is false this means we have to go to the sign in screen so we'll write navigator dot push replacement this will be material page route material page route and we need to go to our sign-in screen or rather this whole login screen with the name that we created and we need to create another condition here i'll just copy it here and paste it here so instead of this we'll go to our home screen perfect now let me just reload the application and see okay so this is not able to establish a connection because we don't have because we have to reload this thing again in order to in order to make shared preferences work so let me just reload the application again okay so we got the application loaded and here you can see let me just show you again if on the splash screen we have nothing in the signed in variable this will be splash screen so this is false as of now so that's the reason we are redirected to the login screen and if this would have been true then we would have been redirected to the home screen so now what we will be doing here is we'll be going to our login screen and then we will be customizing a little bit of functionality there so this can be let's say a scaffold is okay we will be providing a scaffold key so we will write final global key this will be scaffold key and scaffold state perfect so if we can just scaffold key background color can be color dot white as usual and the body can be safe area and then a child of padding all this let's say padding from only left can be 40 right can be 40 top can be 90 and bottom can be 30 then we will have a child of column let me just reload okay inside this child we will be providing first of all a cross axis alignment inside this column so this will be start and then we will have some children like a flexible chip with a flags of 2 and the child can be column okay we are using start because we want the logo to be starting from the left side of the screen that means to the start of the column so this the children can be image this will be asset image config app icon this is a quite big size right now 80 80 fit can be boxed dot cover perfect and after this image we will can provide a site box and then a text as welcome to welcome to flutter authentication let's say provide some text style to it 20 this can be 500 okay so this is okay we are not focusing much on that design thing and then we can create another text then authentication with provider [Music] font size can be 15 and we want this to be a gray color dot gray perfect so let me just go to my web browser and show you one excite one amazing package that i'll be using here is rounded loading button so this is the package that we'll be using let me just copy it so whenever we click on this uh button it will do a rounded loading and if it is success then it will detect then this will give me a tick and on reset it will regain it will retain its original state so this is a quite good package so i'll just go and write i'll write the name of this here and this will do a flutter pop get and now let me create a column with some cross axis alignment of center and the main axis alignment of center the children will be a rounded loading button now this rounded loading button needs a controller so we will like rounded loading button controller first of all we like google controller then we will write so we are doing google and facebook in this part so we will write facebook controller and here we can write google controller another thing that this will have is success color will be colors dot green all right the successful color for a google can be read and the child can be wrapped with a children font awesome icons so we have to add icons so in order to fetch the google icon we will be adding font awesome icons so let me add that too so let's so this was the thing that i was talking about this package here you can see i entered some wrong text and it just went to the pub.dev and it fetched all the package with that particular search query and it displayed them to me so here they need this font awesome and now if we take the icon this will be font awesome icons dot google size can be 20 color can be colors not white i guess we need some more properties here on press is required so we'll write on pressed let me create it okay so we have this thing here let's see okay so this is working also let me just reload the application again we go to the splash screen then we go to the authentication screen and now in this icon the other thing that we can do here is we can write site box with a width of 15 and then write a text sign in with google and we can provide some text style as font size can be 16 or rather 15 let's say font weight as usual font weight dot 500 let me just close this and close this also so that you can see a much bigger picture from here and the font can be color worldwide let me tell you why i am writing this color dot white everywhere so the color for this button color for this button will be color dot red so we have the success color here and now we can provide a width so we want the width to be somewhat let's say 80 of the total width that is available so in order to calculate that particular width how you can do that is first of all we will get the total width of our screen and then we will multiply it with 80 so if you see this 80 percent 0.8 perfect and the width got increased and now we can do an elevation of zero order radius can be 25 and this is okay now the other thing that we'll be doing is a facebook login button so we'll just copy from copy everything that is present here i'll paste it again this will be facebook controller colors can be colored blue this can be 10 and we need this to be blue success color will be blue elevation can be this this is okay facebook controller facebook signing in with facebook done so we have this angle with google signing in with facebook now the only thing that we need to do is shift back to our sign-in provider to code up the logic behind authentication for this first of all we will be coding for the well so let me just go to my chrome and enable the google authentication first i will go to the particular project that i just clicked that we created in the earlier part we go to this authentication part and we will set up a sign-in method sign-in method will be google we'll click on enable and this support email and click on save and that's it the signing provider for google has been successfully enabled in this part firebase project and the next thing that we'll be needing here is we can go to this buddy folder and here we have this firestore database this is a database that will be storing all the authentication data so right now we can create this thing it will take a little bit of time for it to come but we can just create a database right now there is no issue in that we'll create and start in production mode and click on enable and just wait for this to finish by the time it is doing the provision cloud firestore let me just tell you what things we need to add here in the manner that we have created this signed in instance we have to also create instance like has error code then provider this will be google providers facebook provider or a twitter provider or a phone authentication provider and we have to create the same for uid same for email same for name same for image url and that's it so let's start creating those first of all we have to create as error this will be false and you can see this and you can see the power of tab 9 so you can just install this tab 9 and it is a great way for auto completion right now i'm on a free plan so no need to pro purchase a pro plan because everything in this free plan is also work also works perfectly fine so we have has error created now the thing that we have to do here is we create a string value for error code and the pool and this can be get error code error code now the provider the same that we did here provider now the user id see the tab line is working so brilliant that all the auto completion for me have been done by them and i just need to press tab and look at the auto completion part [Music] has error is done is signed in has done provider run uid is an email image url only the thing that we are left with is a name and now let me just tell you something here you can see we have this authentication part and we have this database so the thing that will be storing to our cloud store database are first of all let me just do this so the first thing that we'll be storing is the image url second thing will be the name third thing will be our email fourth thing will be user id and up last thing will be provider so after every authentication we will be getting the values in this particular sign-in provider and then storing those value to the cloud store database so now we can create a sign in with google so for this google or rather sign in with google [Music] what we need to do here is we will first of all call our sign in account through which you want to do the sign in and then we will wait for google sign-in to take place and remember we have to create instance here instance of firebase on facebook and google so this will be final firebase auth firebase or firebase all dots at instance then we'll have facebook auth [Music] face book or facebook or thought instance then we have google sign in we google sign in and here we will write google hang in dot sign in so this will store the sign information to this particular google sign-in account that has been passed to here and now we have to check whether this particular thing that we got as a response is null or not so if this google sign in account that we got is not equal to null only then we will be executing our authentication and if this is not null then what we can do here is we will write else condition and has error the boolean value that we created here will become to true and then we will notify our listeners now other than that now let's say we have this as not null here and the google sign-in account has some value in it so we need to try with we need to try a particular thing and on firebase or exception we will catch all those values here so in this try method what we will be doing is we will be writing google sign-in authentication this will be google sign in authentication and then we will wait for that particular google sign-in account that we have above to do the authentication for us after we got authentication done then we will be storing all the author auth credential this auth credential is a part of the firebase will be storing all the credentials here and the credential we can get from auth provider dot credential credential meaning credential here means that the access token so this access token we will be getting from google schengen authentication part google sign in authentication dot access token and then we need id token which will be id token perfect so we got a credential here now the final thing that we'll be doing is sign in to firebase user instance so this will be final user user details this will be firebase auth without signing in with credential and the credential let's say we have this async so this will be await we're storing the value in user perfect and now it's time to save all the values that we get in this user details instance okay so let me just shift it here and now so i guess you got your answer we will be saving all those value in this instance that we created so first of all a name would be user detail dot display name and our email can be userdetail.email and then we have the image url which will be image url okay so there is nothing as image url here so this will be photo url and then we will be storing the provider as google so this is a custom storage so this is a custom value that will be storing here now let me just see if there were some other values that we are also going to import the image url is done the name is done the email is done the user id yeah user id okay and then all we need to do is load notify the listeners and we need to maintain this thing if any case happens so let's say you can just visit this flutter auth exception library rather this is firebase or exception i was writing flutter or exception we have this particular code here account exist so we can write switch e dot code case with this we will be displaying the error code as you already have an account with us use correct provider and then we will return a hash provider as has error as true notify there is listener and then break you can create a case of null here also if there's a null we'll write some unexpected error while trying to sign in and has error will be true and notify the listener and the break and at last the default error code will be e2 string [Music] and there are true notify listener true so this was everything related to the error handling many of the many of you guys were asking how can you manage the error handling that are done in firebase authentication so that's the reason i coded this thing for you guys now the thing that we need to do here is i guess everything is working fine that we can go to our login screen we will be creating a new function handling google sign-in so this will be future handle google sign-in this will be an async function and we can assign this thing here whenever this button is clicked so on pills perfect so first of all we will be calling our instance so final sp context dot read so read is not showing us to so read is not showing to us this means we need to import the provider package i can go back there and then we'll be calling our signing provider one of the important thing that we will be doing is internet provider so for that i guess i have to show you the package so the package name is connectivity rather not the connectivity because this connectivity has been discontinued rather a new enhanced version of this connectivity plus so we'll just copy paste it here and by the time it is doing a plotter upgrade for us we will be just seeing everything that we can do here so we can just import we can fetch the content connectivity result and of the current connectivity result to the mobile and this means we are connected to the mobile network if the connectivity result is a wi-fi network then that means we are connected to the wi-fi network all we need to see whether the connection is established or not so we can go to our internet provider and here we will do an internet provider which will extend the chain notifier and pool has internet the same as the one we created is signed in so this will be bool get has internet perfect and whenever the signing provider is called we will be create fetching this function we can create a future function here [Music] check internet connection this will be async and here if you see the usage we can get a result so this will be await connectivity dot check connectivity if result is equal equal to connectivity result dot none as internet will be false this means there is no result for the internet then this value will be false else this value will be true and we can just notify our listeners about this particular action perfect we also need to call this here in our main dot dot file else this will not be working fine you just copy that thing from there and we'll let internet provider perfect we'll just close the application and run the app again so as to reload the connectivity package that we just added okay so we have just restarted our application and here you can see we have this connectivity package successfully added so we can go to the internet provider this is completed i've also added this in our main.file now the only thing or the only place that we have to call here is this place this will be internet provider now now first of all we need to wait for the internet provider to get active check internet connection and after this provider has checked the internet connection we can go to the ip and it we can has internet and if this is a false then we will open a snack bar right now we don't have this property so we can go to this utils and go and write a snack bar here this will be open we can get the content the snack message and the color if we want for the error we can give the red color and for the success we can get some word like a green color here we need to import our material so this is the scaffold messenger sort of contact and then we'll be showing a snapbar this will be snapba content would be text snap message and the texas style can be let's say 14 cost value i guess you got the content here we can get the background color as this and yeah i don't need any on press or rather we can display a snag bar action with a label okay and the text color can be white on press could be nail for now if we come here we'll call our snack bar context will be context check your internet connection colors can be color start red and we can do the reset of these buttons by chance they have been pressed and we don't have internet connection though they will be loading up content consistently so we need to just close that else we will wait for sign-in provider to sign in with google and if the sign is completed okay so now here is the important part so first of all we will call our assignment provider then we will sign in with google and here if this sign in provider has error then we will do i'll open bar okay so i forgot to remove this this google controller or rather this whole google sign in will only be activated when we click on this sign in with google so we don't need to remove uh add the facebook controller.reset here we only need to add this google controller dot reset what here it means is let's say we let's say a user comes and clicks on this and click on the sign in with google so if we have the internet then we can move to this particular part where we will be signed in we will be proceeding with the sign-in process but if the internet is not present that will be only showing the snack bar that check your internet connection but as we have clicked this sign in with google so it will be constantly loading and not resulting in anything so we just need to reset the state of this we will be writing google controller dot reset and this will be red and as far as error is concerned so we will go with error code dot to string and again we will just reset the controller here if there is no error so this was when the error is there if there is no error we need to check so checking whether user exists or not so how you can check that particular thing here is we'll be going to our second provider and here we have the check sign in user so this will be checking whether user is signed in on to the application or not we don't need to touch that part this is hanging with google so now we need to create another function which will be first of all we can also create a sign out function we have not created sign up till now so this will be async this will be await firebase or sign out with google sign-in and we can just update this value assigned at the falls notify listeners and then clear or storage information this storage information will be all the data that is saved through shared preferences so we need to create a function let's say here stored data this would be anything we'll call the instant of shared preferences there get instance and now we will do a clear of everything that has been stored here so clear or rather this can be clear store data so the sign out and the clearing of everything has been done here but this was not the thing that we wanted to implement we wanted to implement a check in our database to see whether user exists or not so cloud fire store first of all let me go to this cloud file store and here in the rules section the important thing that you need to update here is you just click on this rule section and modify this particular thing allow read comma write if you can either do the true here but with this true mentioned here your database will can be accessed by anyone in this world without any authentication done so it's better to do this request.odd is not equal to null and then click on publish and this is the safest safest way to not let attackers enter your database and now if we check whether user exists or not so this will be a boolean value check user exist async document snapshot snap is equal to await file base file store dot instance dot collection users and then if we will check the user id you get if not exist we will return a true imprint existing user else this login screen so the thing that you are checking here is we'll call our sign-in provider and check whether user exists or not and then get the value this will be an async and i can provide a closing here if value is equal equals to true this means user exists else user doesn't exist when the user exists what we need to do here is we will be awaiting the service provider sign-in provider to go and get the user data from firestore so now the part here comes is of cloud store so generally the cloud file store works like we have a collection then a document and inside the document we store our information so we can go to science provider and let's say can create all the entries entry for cloud file store so get user data from firestore this is for the users who are already registered to the application so this can be firebase firestore dot instance will get the collection that the user exists and we can get a particular user id from here and then async here rather i guess okay so i made a mistake here this will be like this then snapshot snapshot where it went okay then we can fetch the values like snapshot and this will be user id name display name email email image url image url provider so this was if the user already exists so this was for that now if the user don't exist then we have to save a particular data so save data to firestore now we need first of all to create a reference for the document so this can be our firebase file store dot instance spot collection and then we will get a user id and await a set function here so name then we will have email then we have user id then we have image url and not last we have the provider we can close this and notify our listeners about this particular change that we have made and again if we go to this place first of all we have no data in right now in our authentication so no need to worry much directly we can move to this section the user does not exist so we will code this thing first and once we create an entry in the database then we can test this part also so right now user does not exist in a database so what we have to do is we will call our sign in provider to save to the data to save the data to the file store and then we'll take that particular value and save that particular data to the shared preferences also so this is an important part we have to save all the data that we have in the shared preferences because later on when the user is redirected to the home screen after the user opens the app again we have all the data from shared preferences fetched again and this was the part that most of you guys were asking in the comment section the implementation of shared preferences so let's say future save data to share preference so this can be first of all we have to call the shared preferences as a wait share preferences and this will be get instance wait s dot set string and a string will be name and a name this can be null so we have to write this also wait set string email awaits a string user id await set string image url away string provider so we have one two three four five and that's all we can now notify our listeners about this thing perfect so we can go here and save data to share preferences once that particular data is safe to share preferences again so we have to set the sign in also so here if you see we were checking the sign in but there is no place yes where we are citing that user has been successfully signed in this means you are not changing the issuance to true anywhere so we have to create that thing also so this will be in async final shape preferences get instance then set bool signed in and this can be true then is signed in with equals to true notify listeners perfect now what we need to do here is sign in provider set sign in once the sign-in is set then at last what we need to do here is we have to close this thing and inside this function we will display a success and handle after signing we have to create this handle after sign-in because this same function will be used by facebook the google the twitter and also the phone authentication so we can create a common function here handle after sign-in so the thing that will be here here in this handle this sign in here is and after sign in this cannot be an async function we don't need anything to be this we can display a delay of let's say 100 seconds all right the thousand seconds and then do let's say we can create a utility here this will be next screen dot dot and here next screen we'll be using this everywhere so we can just create it here navigator dot push navigator is showing error because we need to import material also navigator dot push context comma material page route and this will be page for next screen replace navigator dot push replacement material is pulled out and i guess we can do next screen replace this will be home screen and we can also update our splash screen here this will be next screen and this will be login screen so try to use something that will reduce the amount of code that you write and provide a little bit of clear view to the one who is reading your code now let's see whether everything is working fine or not into a hot reload i guess hot reload is not working because of this so now we can do a hard reload and we are not saying so we will be redirected to this screen and now the important thing let me just open this here and see whether google signing is working totally fine or not in our ios simulator if we click on this sign in with google but i also want you to see everything that is happening here so what we can do here is click on sign in with google okay so we lost connection i don't know why me just restart the app i don't know why that's close okay so we restarted the application and now let's see the debug panel and sign you with google okay it is showing me some error here i guess your app is missing support for falling url let's see what's the thing here okay so i guess what we need to do here is we will go to our info.plist and first of all we can copy this google services we can open this google services info.plist and copy everything that is present here so we have to add this to our info.plist now the place where we can add this particular thing is cf bundle url type we need to search for url types so there is nothing as url types guess we have to create our r value so we can do here is this can be key and cf bundle url types we can then create an array and then our dictionary and this dictionary will have a key cf bundle type role and string editor cf bundle rather this is not required we just need to create a url schema so i guess cf bundle url schemes and then we can create an another array with a string of value that we just copied let's see whether this will work or not okay so we have some errors here so you can copy this thing from the description i will be adding the link there like this this will be like this let's see whether this will work okay we need to do this i guess this is not working for me again let's see enter this value here let's see if this works if this don't work then i guess i would have to open my xcode for this remember the url schema is nothing but just reminding the application about the redirection like you have seen when authenticating in ios whenever a particular authentication like a google authentication is happening a new safari browser window opens up now the opening of that thing is not an issue but when authentication is successful there is a need for entry point that will be redirected during the authentication so the firebase need to be configured in the manner that the redirection should be added in this info.plist and how you can get this particular redirection view schema is through the google services that we downloaded you can see the reserve client id this is the client id that we have for our application whenever any successful authentication is successful authentication happens it will be redirected to that particular application through which it happened like a block authentication app will open up a safari thing then after authentication it will again open the block authentication and i guess if things work this would be working fine now this not we this won't be working fine because there's issue here so we copied the code from this and we forgot to place our own value here so let me just copy this and now if i paste this here and then reload we need to close the simulator because right now we are editing something that is in the core elements of the ios folder this means the hot reload will not work in these folders so we have to just close the application then run it again and it won't take that long okay so we have the application running now let's see whether this will work this time or not just like click on sign in with google it is showing me a url schema this means if i click on continue this will open up a safari window and here if i enter the email and password for some of my account it will sign in and redirect to the particular account here a new user because we have no values right now so if i reload definitely it has added a macbook address gmail.com and inside our files to database also let's see whether all values are perfectly or find or not so this created the particular user id here as you can see we have an email the image url the name the provider and the user id so this is the thing that i love about firebase is everything is documented everything has been solved before and you don't need to reinvent the wheel you just need to stick with the issue that you are facing and eventually you will find a prop a solution for that and that's the beauty of coding because when you find a solution for anything that you have been stuck in a day or two days the price or the risk to reward ratio is great so now we got this thing created we can go to our assignment provider or rather not the same provider we can go to our login screen what am i doing and what are so much excited i guess so the user does does not exist so that's the thing here and what if the user exists so we have to do weight sp dot [Music] or rather this will be await sp dot you get user data from firestore sp dot user id then sp dot save data to the shared preferences then sp dot set sign in and then we can do a google controller dot success and this will close here and we can handle after signing so the google authentication is quite done now i don't think we have much here if i go to home screen so i can sign out here and check whether everything is working fine or not so this can be child elevated button [Music] and this child text sign out and on press we need to call our sp so we can call our sp here context dot read hang in provider and import provider here and now on sign on press sp user sign out and then handle up or rather next screen replace this will be costing now let's see if i click on sign in we are redirected here if i also reload the application we have to see whether it signed in is working fine or not and let's say i click on sign in i select the particular account this should show me that the user already exists and let's say let me just go to my login screen and here if i or not the login screen home screen here if i don't do a next screen replace i click on save i click on sign out and you can see in the debug console we are read so okay we are not showing any hangout activity here but if i reload the application i guess we should be redirected to the login screen yeah so the sync order is also working fine the thing that we need to now do is customizing our home screen and that's all the google authentication will be done from here don't need much data here so like right now so if you are still following so if you are still following me till here then this means you are totally committed towards coding better in flutter and i promise you whatever issue you have you can just mention in the comment section and you can check the data i am replying to most of the comment that is having issue in the comment section of my channel so without so enough enough of conversation now let me just create an init state and the reason why i'm creating an init state in the home screen of this file here let me just go to the home screen let me just authenticate and now we can see we are in the home screen and the reason i am doing an init state here because whenever the home screen is loaded i need to fetch the data and what data i need to fetch the image url i need to fetch the name of the user i need to fetch the user id i need to find the provider that was used but not from our cloud file store i can just directly fetch it from the shared preferences because i am storing their data i am storing that data in the shared preferences so i can just call that particular data so we can write future we get data this will be an async and final sp this will be context dot read and the sign in provider and now all i need to do is sp dot get data from sp but now the twist is we don't have any function that will get the data from the sheet preferences so let's get back to the shape hanging provider again and the place where we were saving the future uh the place where we were saving the data to the shared preferences and below that will be creating another function where we will be getting the data get data from shared preferences this will be in ac so again we will just initialize share preferences name can be named email can be email image url can be image url we have uid uid provider can be provided can be provider so one two three four five okay we can get this data from here and at last we can notify the listener that all the data has been fetched now we can do get data from shared preferences and done and whenever init state has been called we just need to call this function get data perfect so now in our home screen what we need to do here is we will be returning a scaffold we can return a sender then i guess we need to return a child this will be column the mean and the cost can be centered and the children children can be let's say self because of the background image network image and i guess sp and remember we are to change read to watch to watch any changes that happen to the provider and not read only the read only will not fetch the data again and again but while watch will be using keeping a watch on everything that has been changing in the data so we just need to do here is sp dot image url and i don't know why this showing mean okay so the reason is pushing any error it is can be 50 okay so okay the image is showing me here i can rather provide a padding okay the padding will not work background colors can be white yeah that is okay you can create a site box height can be 20 text text will be welcome in the name sb dot or rather sp dot name style can be text style 15 let's say and point weight 500 welcome mac flicks so this was the name that we have been saved from the database this can be 10 and we need to also fetch the email address sp dot email and we can provide the same thing that we did here but the font size can be this perfect and then we can display the user id also this will become user id this is okay and now we need to create a row the provider that's five color can be color thought red sorry for not speaking i was so much i thought of coding it so far that i just forgot to speak or explain anything so now we got the row done the last one that we need to do is the elevated button on press this will be fb dot user sign out and next screen replace sign in screen or rather we have the login screen child can be let's say sign out perfect you can just provide and if i click on sign out we are right redirected here you can click on continue this is working fine let's see the database is also working fine here let me just reload and see and rest as far as we see the database database is also working fine if i let's say update is googly click on sign out click on sign in with google again click on continue use this account it should be shown with this one two three four five e so this is showing us here you can redirect it back and now this was working fine you the another important thing is many people ask to show the android emulator also so let's start a pixel emulator here so here you can see we just run the application that we have on our android emulator and let's say we log in with the email address and this should show me as existing user and yeah so now the android and the ios simulator is working fine for us the next thing that we need to do is we have to sign in with facebook we have to add this authentication method of sign in with facebook so now if you go to your firebase console here in the authentication section you will see we have this particular user and then also in the database we have the data for that particular user the other thing that we have to add now here is add a new provider we have to enter the app id for facebook provider and also the app secret but we don't have anything as such right now so we will go to developer.facebook.com i guess we can remove this okay developers.facebook.com just click on my application and it will be redirecting you to sign in with facebook after you sign in to the facebook you will be redirected to this section i have the sample app working in the background so let's just create a new application and this will be a none we don't need any app type here and then the display name can be block auth and create an application this is asking us for the password [Music] now so we have the app id here so you can just copy and paste this here and we have to set up the facebook login so you can click on setup and now it is asking us to start with the pros to start with the step for adding facebook to our android and ios devices first of all as android emulator is running right now so we will go with the android installation so we don't need to download any facebook sdk here because we already have our package facebook flutter facebook authentication package so now important things here are first of all we have to copy and paste this inside the app level so this will be first of all let me just close this ios part we will be doing later on android later on means in this tutorial only don't worry that we will be doing the ios part in other parts the google and facebook authentication will be completed by the end of this video so right now and android then app and then build.gradle and we have to paste it under this dependence under this dependencies area and click on save we don't need to do anything as such here so now it is asking for the package name and also the default activity class so we will go to our android manifest and here we can copy the package name here and then for the default activity class name we just need to copy the packet name here and then add a full stop and write main activity please remember to keep the main activity in this particular format only this is a camel case this means m is capital in a is capital then click on save and just wait for this to finish and click on continue now the important thing is we have to create a key hash here so if you are on windows what you have to do is first of all go to my video which has generated the sha signature and proceed with everything there and then after that you can just copy and paste this command in the cmd and everything will be fine for you so for me what i have to do here is i'll copy this code go to my terminal and paste this here it will ask for the [Music] password and now it has generated the particular key hash for me so [Music] let me just paste this key hash here and click on save click on continue click on save and now we need to go to our app resources value and a strings.xml folder in flutter we don't have any strings.xml folder so we have to create this so we have to go app then source and then main then we will go to a resources folder and here in the values we'll create a new file which will be strings dot xml and here we need to do this thing xml version 1.1 encoding utf-8 perfect this has been done by the timeline extension only so now we need to provide a resource here and first thing will be our app name this can be flutter auth and other values will be the values provided by our documentation so this can be like this perfect you can close this here and now the other thing will be going to our android manifest file and here add the metadata elements to this thing here so you can add this metadata above this metadata okay let me copy you can remove this remove this remove this this is fine here now the next thing that we have to do here is we have to add all this code here we'll copy and after this activity got completed we will enter this here and if you have been remembering how i am doing this this is with the control and a bracket command this bracket okay and this can be command in a bracket in mac and a control with a bracket in windows i don't i'm not remembering what was the name of that particular bracket and now we have to add the permission of internet this is an optional so we don't need to do that rest we don't need anything from here click on next we also don't need to design a login button we don't need to register any callback and we don't need to check this and i guess our facebook part is done so we can also proceed with our ios part the facebook part for android is done we can proceed with the ios part you can click on ios here and click on next it is asking for the bundle id so we open up our xcode [Music] and now xcode is open remember we recently opened this particular folder so we can just directly go from here if you go into this runner here you have the bundle id you can save this click on continue and click on next and now we have to add all of these values here so let me just first of all take this go to info.plist and the first value will be url types so i guess we already have done the url types okay url schemes and we need to add a new string this will be fb app id or rather this and be like this the keys here so i guess i have to remove this and paste all of these values here fb app id okay let's say we do this thing here and paste the app id app id is this [Music] and facebook app id will be this facebook client token so for finding a client token we can go here we open this in a new tab we'll be also using the client token here so this is a client token copy this and paste it here and i guess we are done with our work so we just added these things here and other than that we already have this click on next don't need to do anything from here not this also you can go back to a dashboard and also i forgot to place the app secret here and then copy paste it here and now close everything from here okay i guess we have to open this again if i can see this settings basic app id click on save now we got the facebook enabled it's time to code our application so first of all the thing that i wanted to do right now is close this and run the command again by the time it is opening our application we can go to our login screen and here in our login screen the things that we need to do is we will just create another function this will be like handling facebook facebook auth you will write the name of this as handle facebook auth and you'll also copy this and place it inside the ongress function okay and now the thing that we need to do here is first of all we have this sign-in provider the internet provider all these things are okay we just need to change this to facebook controller if there are any error we change this to facebook controller and now we need to replace this as sign in with google with the sign in with facebook the rest everything is perfect we don't need to change anything from here all we need to do is create a new function in signing provider so we had our sign in with google here we will be creating signing in with facebook so now it's time to code our sign in with facebook first of all if you open up a safari and go to this pub.dev and here if we open up the pretter facebook auth the package that we have installed so i guess if we have any documentation for making a login request we will be requiring a result function first from fetching the result so this will be future signing in with facebook this will be in async so we can write login result this will be a result and then facebook dot instance dot login i guess we already have initialized facebook author so we can just go and write this as facebook.login now [Music] getting the profile i wanted to tell you that if you open up this url i will be linking this in the description here you can see how to get a better profile photo from facebook graph api so we have to write this command here for getting the profile image because facebook don't provide that to us and this is saying me http is not find as a package so we need to write http or rather we have to import http into our shutter package flutter project just wait for this to finish and i guess now we can call import http as http and rest this will show me as an error because we need to do uri dot pass and here okay now it is asking for the fb token how you can get fb token is we will go to the result and then go to the access token and then fetch the token from there now we can fetch the response and store this in a profile so this will be json decode because the result is a response so we will write json decode then graph response dot body and now if the result status is login status or success if the login is successful then we can do a try and catch else has error is equal to true and notify listener and now we need to do a try and on firebase i guess we can copy the on firebase from here okay we can copy on firebase we just need to do uh or credential potential facebook provider dot credential login the credential will be our token the way we failed here is access token token done and now we can just wait for firebase to sign in with credential and we can power the value of credential data the important part here is saving the values so this will be profile remember the thing that we have name email the image url [Music] will be picture the url data and then the url we cannot directly fetch the picture because it profile photo because it is placed inside this picture then inside the data and then the url for the image of the user user id can be we don't have user id here we have id in facebook has error is equal to false notifier list or rather we left something which was provided this will be facebook and then notify listeners and you can just click on save and i guess everything should be working fine you just need to go to this handle facebook and here we will like sign in with facebook and let's see whether this is working or not if i just reload we are redirected from splash screen to the signing screen if i click on sign in with facebook it will open up a new browser window for me invalid app id the provided app id does not look like a valid app id so let me see why is this showing this error if i go to android manifest facebook app id okay okay i remember the string that we added the facebook app id and the client token will need to change those i just copied from the documentation the app id will be this and client token can be this and now i just need to close the application and run the app again you can click on sign in with facebook okay i will enter my email and password let's say whether i will be able to sign in if i click on continue as shivan then this should show me as a new user perfect and this should take me here as i saw while signing in the face i guess i made a change here to make a change here this is google sign-in okay google controller google controller and in facebook's hanging we need to change this this will be facebook controller dot success and a facebook controller dot success and now here you can see we have the facebook data fetched successfully and also if you go to the authentication part we have the facebook added here and in database also i guess okay perfect so we have this thing also added this is the image url from my photo so just downloaded the image so you can just close this and yeah so the android is working fine let me just check whether ios is also working or not so we can close this thing we will open up our uh pixel or not of pixel will open up our ios simulator and now let's see whether our ios simulator is working or not we will go to run without debugging and open up our deeper console and see what changes we can see here and just wait for this to start okay so we just got the xcode build done i guess this should start any time and we are getting the application opened here let's see whether we are able to sign in using facebook and google so if i click on sign in with facebook okay so this exited the application i don't know why let me just report and see what exceptions we all got we got here so i'll be fixing this and be coming soon just give me a minute okay so i was going through the info.plist and as i go to the info.plist i was a little bit confused whether i have doing this right or not so then i went to the documentation of this flutter facebook authentication and here you can see first of all in this url schemes uh before this app id i need to provide the fb sign here so this will be fb and now we can just close this and run this again on an iphone 11 pro max so all i did is i went to this info p info.plist and the place where we created this url schema we entered the app id for facebook here but then we forgot to add fb in front of it so now let's see whether this will work or not just wait for this to finish okay so here you can see in the debug console the xcode build has been done now let's see whether our application will work or not if i click on find you in facebook and now this is showing me a continue and let's say i log in with email id and password click on login and click on continue it should be redirected here and also in our debug console we should be shown with an existing user and perfect so the android and ios simulator is working fine the sign in with google is done signing in with facebook is done in the next part we'll be doing the sign-in with phone authentication and also signing in with twitter but i wanted to tell you something that if you are going to do the authentication with twitter first of all you can go to developers.twitter.com and here you can just sign in with the account that you have and then visit the particular developer portal and create a new project so i have created a blog login here so if you go to this pro products twitter api version 2 so the first and foremost thing that you will be shown there is if you create a new application the plan will be an eventual plan but the problem is that with the essential plans we are not able to fetch the user profiles so you can do what you can do here is you can create a new application here and then request for the elevated plan and i guess it will take uh less than 24 hours for the twitter developer for the twitter community to respond to your query or rather request for this elevated plan and then you can do that this is a totally if this is totally a free option so after you code this google and facebook you can take a rest for one day and then by the time you can just apply this twitter authentication also so i guess this was everything for this tutorial all the best and keep coding thank you

Channel: Backslash Flutter

Views: 25,070

Keywords: flutter and firebase authentication, auth with google, auth with facebook, firebase social provider authentication, social auth flutter, social auth firebase flutter, sign in with google in flutter, sign in with facebook in flutter, facebook authentication, firebase social authentication, firebase social login, flutter firebase auth, firebase signup login tutorial, twitter auth firebase flutter, facebook auth firebase flutter, flutter tutorial, firebase authentication

Id: VgMzp3-SzuY

Length: 119min 44sec (7184 seconds)

Published: Sat Jul 16 2022