React Native login With Facebook using Firebase

three hello everyone welcome back with the another video on react native mobile app development so in today's video we are going to implement with Facebook and with Firebase okay so what you have to do first of all you have to go to this website create native firebase.io and inside this you will find the social authentication section and inside this you will find this Facebook section so for our fastest tab will be to install a library so the library will be this react native Facebook SDK next okay so our first step will be to run this command I have already done that okay you have to run this command after running this command we have to come to manually link library on Android so we are now focusing on Android so our first step after that we will have to go in our Android setting.gradle and add these two lines Okay so Android and setting Dot Android and setting.gradle and we have to add these two lines okay after that what you have to do is to go to your Android app build dot URL so Android app and Bill Dot Gradle and you have to add you have to add this line inside the dependencies so let me show you okay yeah okay so you have to add this line like inside your dependencies now after that uh the installation is completed but now you don't have to run your project first what you have to do is to before getting started ensure you have installed Library okay so let's go to this section so in here we can find this quick start for Android and here you can create a project first so to create a project let's see if YT auth okay and create a new Facebook ID now here what you have to do is to click on this click on next click on Android because we are going to implement on Android and click on I am not building a game if you are building a game then you have to click this and now your app name you can uh type any name of your app then you will click on this create a button so I've already done this part also so when you do that you will find you do you can go to your my apps and you will find it over here okay so when I click on this okay so when I click on this you will find this interface like this okay so first of all then what we have to do is to like and set up Facebook developer account so we already Facebook developer account so how we can do that setup Facebook developer account so we go to product then we have to go to Quick Start and quick start we have to go to Android so in Android what we have to make few things we have to first of all we have to add this inside our dependencies at this line I've already done that that and this line inside the dependencies and after that click on next okay you have to first your Define your package name so you can find your package name inside your manifest file okay Android source and Android app source and manifest so you can copy this from here paste it over here and then you have to provide your activity recall activity so first of all you have to copy this the same stuff over here then Dot and then copy this main activity in this Okay now click on the save button click on continue now what you have to do is that you have to create your like you will need a key you will have to create a keys and a certificate management tool okay so for for those who are using Mac OS that is very simple just copy this code go inside your terminal paste over here and click on enter and it will ask you for the password so the password will be you have to come in your Android app .gradle and inside that you have to come in your debug section and this is your password Android of copy this paste it over here click on enter then you will find this key you have to copy this key and paste it over here key hashes now after pasting you have to save it and click on continue then click on next what you have to do is copy this this thing and paste it inside your a string app Source name res and values and string so you have to copy paste this thing inside your uh inside your string dot XML and Facebook app ID you can copy it from this okay so copy this app ID and paste it over here okay and after that you have to copy paste these two line in your manifest file of in metadata okay over here inside the application and after that you have to copy this code and paste it inside your paste it inside your application in an activity this like this okay and make sure this permission internet permission is added over here okay so that's it from this developer site meta developer site so when you come to this setting and basic you will find this thing is added successfully in your Android site okay so after doing that what you have to do is to go in your Firebase console and for those who are new they can check my previous video I will provide the link description so you can find how you can integrate the Facebook SDK the Firebase in your application so here you can see an authentication inside-in method what you have to do is to click on this add new provider and click on Facebook so when you click on Facebook you will have to provide two things this app ID and app secrets so app ID will be this one so app ID will be this one and app Secrets is this one okay you have to click on show and copy it and paste it inside this and you can simply save it okay guys so after that what do you have to do you have to run your Firebase you have to run your app okay and PX react native run Android and you can your app will run in your emulator so after that what we have to do is to copy this this is our function which on button click we have to trigger this function so copy this whole thing and paste it inside your like inside your sign in screen where you implemented the Facebook button so I have already make a sign in a screen and you can see it over here this is my sign in screen so for those guys who are new they can also check how I make this okay so this is the whole playlist so copy paste this thing over here and also import these two lines okay and after that you you have to you just have to like on the button click on press you just have to trigger the trigger this function so when I click on this will find a chrome is opening and my Facebook is this is opening okay so if you click on this you will find the credentials and if the app is installed then Chrome will not open the app uh the app interface will be open so this is it guys for today's video I hope you get my point and learn how to sign in implement this Facebook authentication but if you have any question you can ask me in the comment section I'll be happy to give the answers okay then I will see you guys in the next one till then take care bye

Channel: Coding With Zain

Views: 5,887

Keywords: React Native, Vscode, TypeScript, Nextjs, Android Studio, XCode, Javascript, Npm, Nodejs, Redux, codewithzain, React Native FlatList, Flutter, React Native Axios, React Native Api, React Native Props, React Native UseEffect, React Native Hooks, React Native Components, React Native Firebase, React Native SignIn with Google, Social Authentication, React Native Web Development, React Native Mobile App Development, React Native Tutorial, React Native Sign In With Facebbok, USA, Japan

Id: u2N_2cmT7xI

Length: 11min 48sec (708 seconds)

Published: Sun Apr 09 2023