Add Facebook Login to Your Expo React Native Apps using react-native-fbsdk-next + Graph Requests

hi everyone today I'm going to show you how to add Facebook authentication to your Expo reaction native app we're going to start out by creating our Expo app using this create Expo app um CLI Tool uh we're going to call it Expo Facebook login tutorial then I'm going to change into that directory and I'm going to install the Expo div client so the reason we need that Expo div client is we are going to build a standalone build and that's because we will have a config plug-in for connecting to Facebook login um so yeah we need to build a standalone um app so that the like the config plug-in can be applied to like the infop list and um Android manifest settings um when I done that I config the build so I go Asos build configure and I say I want both Android and iOS I have a command code dot that will open Visual Studio you conf can configure that inside Visual Studio itself I'm not going to show that today um but my build configuration is here and inside development I'm adding iOS simulator true because when I generate the um build for the development profile I want it to be installable on the simulator for testing on an actual device I'll use the preview um profile and I'll show you that a bit later too I then run the EAS credentials command cuz I'm going to need um some of the credentials to enable me to connect to my um Android so like configure a login for Android um but before I do that I actually need to update the app. Json with the Android package and also the iOS bundle identifier so this is an Android package I'm going to have the same for iOS but it'll be called bundle identifier awesome now I can go back and generate those credentials going to have to contrl C out to uh run the command again to enable me to generate it and then it goes ahead and gives me a few options I just choose the defaults and that gives me my bill credentials and that sh one fingerprint is what I'm going to need to turn into a hex code over on Facebook website I select I go to this website here that I'll link in the description and select their wanted Facebook login and enter things like the app name just putting in Facebook login tutorial there go here and create my app it gives me this error that I can't use the keyword Facebook so I went login tutorial instead that'll just be to keep people from pretending to be Facebook and getting people to use their apps and trust their apps when they shouldn't um so preventing malicious behavior basically I'm going to want to go to this customize adding a Facebook login button once I've um created my app and there's a few different things you can do you can add permissions if you want permissions to access different Facebook apis I'm just going to keep it as public profile and then I'm going to go to quick start this is where I can set up my IOS and Android um apps and you're wanting to skip most of the steps most of the steps are unnecessary because they relate to implementing it natively um I'm just going to go ahead and get my bundle identifier so that's that same thing you put in the app. Json before generating the credentials and I'm just going to enable this everything else is actually handled for us by um by the config plugin so we don't actually need to worry about anything else so I'm over on Android now and I need to enter the package name and then once I've entered the package name I can enter the default activity class name this is actually just your package name with main activity appended to it um and that's what it would be if you um had the actual like Android files that would be that would be your entry point next up is an important step it's adding your development and release hashes um so for your release build you're going to have to also generate new hashes um but for now I'm just going to show you development and you can figure out the release from there so I'm going to this website here that I'm going to link in the description but basically it converts my sh one fingerprint into the hex code that will allow me to use my um Facebook login with Android so just copy and paste that value you can add multiple there so if you had the release ones you could add it there as well and I'm just enabling single sign on once again so that's everything I need to set up for IOS and Android now I'm going to go to my app settings so you can see my app settings has an app ID and that app ID is what I um use to um configure my Facebook login you can also check that your IOS and Android has been set up cuz they should show under the app settings so now we're going across to our app again and what we're going to do is we're going to install the necessary um packages so we're going to install the Facebook login package and we're also going to stall install a tracking transparency package that tracking transparency package is going to be useful to get whether the users allowing us to track things for like ad serving preferences so if I want personalized ads I need to sort of check that um to be in line with the iOS guidelines so I'll just run that command there and I'll go ahead and install and what that actually is going to do is inside that app. Json it's going to add plugin sections cuz both of those are config plugins um which basically means they use something native that um and create like a bridge basically between the native and the JavaScript code and it means you can update um your like info pist and Android manifest without having to actually um eject from Expo so it's quite useful so we've got this react native Facebook SDK next um that is our main package that we're going to use to interact with Facebook login but it also requires some configuration settings so it requires an app ID um it also requires a client token and it requires a scheme and also it requires um a display name I believe this is what is displayed when you go to log in but I could be wrong there it could be coming from the app itself the scheme is actually just um FB and the app ID so I actually don't know why they make you define it um separately I don't know why they don't programmatically figure that out on their own um it would save probably a few people misconfigured things accidentally if they didn't realize what it was um so I'm going to copy this app ID across and I'm going to put in an app ID and also at the end of FB then I'm going to go ahead and get my client token that's actually under Advanced so I click through to Advanced and I copy across this client token the other settings are just like um configuration settings around what's actually allowed so whether you can um track stuff and stuff like that and you can adjust these settings after um using the SDK so yeah I'll show you that in a second I'm then going to go ahead and build my um Standalone app for IOS and Android so the reason I'm doing this is because it's I have to test it as a standalone app so I need to do this to be able to test it but it's good to configure everything inside your app. Json first so you don't need to rebuild um you can make changes inside the app.js after you have configured your build uh built your app standlone app and they will be reflected inside your Standalone app so yeah once you've got all the configuration done it's a good time to build the app and it can take a little while in the build cues um so like if it's queued and waiting for example so you can choose to build it locally but I just haven't configured that on my computer at this stage it's really convenient to just build it on Expo but there is a limit um I don't tend to hit it though because I don't have a whole heap of free time or maybe hit one third of the limit so I'm importing use effect from react and I'm doing that because I'm going to want to run this code once to um when the app first loads to check whether I need to um whether the user will allow me to track their like add preferences so I'm just going to have this request tracking function it's asynchronous which basically means it's going to have something long running inside it that I'm going to have to wait for the result for which means I want to be able to give people who call the request tracking function the ability to await a result so I've got the status that's going to be whether the um user has granted the permission or not and then I'm going to re request tracking permissions async you can see that automatically added that um import so that's quite nice and when I did settings it also automatically added that input I'm going to initialize the SDK for react native Facebook and then if the status is granted then I'm going to to change a setting so I'm going to set that Advertiser tracking enabled to true if the um user allows it that'll just mean that they get more targeted advertising so now there is a login button component that uh Facebook supplies for you so I'm going to go ahead and add that I'm going to um add the a function that will be called when you log out so once log out is finished it's going to call this function I'm just going to have an output that I've logged out to console um you would probably do something more useful if you're actually using this um maybe do some clear up of What's um sort of persistent in your state so that next time they log in it's sort of consistent with them being logged out then I'm going to have a on login function that's going to be called when the user finishes logging in um or cancels logging in so it's going to either log that error or um the data that comes back from the login and you can actually get the access token separately if you want to so I'm just going to show you how to do that um you wouldn't typically necessarily do it here but um and you don't actually need to get it if you just want to call the Facebook apis but you might want it so if you want it this is how you get it I'm just console logging it cuz I just want to show you how to get it not so much how to use it because you don't need to use it if you're just calling Facebook apis because there is a um inbuilt way of connecting to those graph um graph apis now I'm going to head on over to just check the progress of my build because I feel like it'd be a nice time to show you what's going on you can see that's still building if you want you can check the different steps to make sure everything's going well um I just paused and now I'm downloading it so I'm going to drag my iOS simulator onto screen and I've downloaded the file which I'll then drag across onto the iOS simulator um there'll be some instructions on how to do things like installing the Standalone app but once you've installed it you're going to run Expo d-d client that's going to mean that it op inside your Standalone App instead of um Expo go which wouldn't work in this case because we can't test Facebook login inside expoo due to the config plugins so I'm going to go ahead and click open when it prompts me and it's going to go ahead and open my Standalone app and I'm going to allow it to deliver personalized ads to me and I'm going to click log in on this Facebook button it's going to open this website and because it's like a um it's not in review yet it gives me the option to submit for review um but I just click through to log in it gives me back the access token and um also my granted permissions and and whether it was cancelled which was false because I did choose to log in fully now that I've got that I'm going to go ahead and add another function that's going to allow me to get data from the graph um API so I'm just going to show you how to do that so I'm going to create a new button called get data and I'm press I'm going to call this function get data so the graph apis that you have access to will be dependent on what permissions you have and some permissions will requ require that you actually um go and get your app reviewed I'm not sure if you can use it in div without getting it reviewed so yeah that's something that you would need to look into but I'm using one that doesn't require any review cuz it's just basic um data so first off you're going to build a request using this graph request and you just pass in the path that the path of the API and you can pass in any config that you want and a call back that's going to get called um when the result or error comes back so if you called something that was um you didn't have access to it would give you an error saying like unauthorized access or something like that um but I'm going to have access to this because it's the most basic um endpoint or if I called an endpoint that didn't exist it would also give me an error so once I've got my request I can use this graph request manager to start add the request and then sort of start the request so when I click on that get data B button it's going to build my request and then start that request and return back that data by console logging it you would obviously probably want to do something more useful with that um data but yeah let's click get data you can see it returns my name and my ID I'm going to add another button now which is the share link so you can use the share dialogue to share certain data so it can be um links or um pictures or I think pretty much most sort of things that you could share to Facebook is the sort of things you can share um this is my share link function that I'm going to call um because I'm going to share a link in this case because it's quite easy to build up a share for a link so first off I've got this variable that's going to hold my content object and I'm going to have a content type which is link if it was photo be something like Photo you can see the exact um details on the Facebook documentation which I'll link and then you're going to have a Content URL I'm just going to put my YouTube um page then you can check whether you can show using this um share dialogue. can show and you specify the share content and it just checks whether you can show it because I'm awaiting something I need to make this Sher link function a sync so if I can show I'm going to do stuff basically I'm going to try to share it and if there's an error I'll sh I'll console log the error so when I go to share there's going to be um some values I can get back so one of them would be is cancelled so whether I cancelled my share and one would be the post ID if I actually did follow through of posting it so I'm going to await that share dialogue doow which is going to pop up a share dialog um logged into your Facebook and try to sh and it'll like be trying to share that content that you've specified um if it's cancelled I'm just going to say that it's cancelled which is what I'm going to do cuz I don't actually want to share to my Facebook and otherwise it's going to just log out the post ID basically and I can catch any errors and just log those as well cool so you can see that sheer links now showing up and if I click it it opens Facebook in the browser which I'd need to log into again um I can't actually install Facebook on the simulator which would show you a more seamless experience um so I'm going to go ahead and show you a little bit later how to install it on your Standalone app on on an actual physical device so you can install like apps that you might be interacting with like Facebook for example in this case so yeah this is me generating the build for the profile internal that's going to enable me to oh sorry it's actually preview um that's going to enable me to get an app that I can install on my physical device it's going to get you to specify your registered devices that you want to be able to install the app on um I've got mine already linked to my Apple ID so I can just select that I want to use those same ones it just gets you a gives you a few things to verify and yeah this is where it allows me to select what devices I want to um be able to install my app on creates the new profile that's required specify whether you want to set up push notifications I actually didn't um so I canceled out to start again so yes I accidentally enabled push notifications last time so I just skipped back to this point to show you what the rest of the steps are it basically just generates um a new link and now my um Android build is now ready for me to go ahead and show you that um I do find that with Android emulator I have some issues when I am not on like a fresh restart for some reason um so if you are having issues just completely restart your your device not even just your emulator like your full computer um and then it typically allows me to do um login I don't know why it's sort of is a bit sort of flaky um but this is how it typically works for B so we've got it on the Android and it's going to go ahead and we're going to show you logging in my Android device is also incredibly slow always which is a bit painful I need to get a physical device um and yeah that plan is for next year but for now I just use the emulator so that was me showing you it not working on before I restarted um this time it's going to go ahead and work a little bit more seamlessly if you're watched in my Google um authentication videos you would have seen that this was also a problem for Google just seems to be some sort of issue with maybe the state the emulator gets into and I don't know if it's specific to my emulator but yeah if anyone's experienced that issue you're not alone so yeah I can click this get dat link and it will get data as well I'm not going to bother clicking that share link it would just open the um browser which would require login because I don't have Facebook installed on the emulator so now I'm showing you on a physical device um this is my preview build and it's got a QR code that you scan on your physical device click on open iTunes install and then you can go ahead and open the app I've said that I want to log in it gives me the option to open in Facebook so it opens in Facebook app itself then I can continueous Chelsea and it's logged me in then I can go and click that share link and you can see that YouTube link is there I hope you've enjoyed this tutorial today if you have please like And subscribe for more content or my code will be available on GitHub

Channel: MissCoding

Views: 4,495

Keywords: misscoding, tech tutorials, learn to code, mobile development, tech career, software engineer, woman in tech, react native tutorial, mobile app development, react native, expo react native, expo react native facebook login, facebook login react native, react-native-fbsdk-next, react native graph request, react native share to facebook

Id: VADy1X8NHeo

Length: 28min 3sec (1683 seconds)

Published: Thu Jan 11 2024