Facebook Login with React Native Expo | Tutorial 2023

hello everyone welcome back to my YouTube channel I'm Beto I'm super excited to have you here and I'm super excited to be back it's been almost a month since I uploaded my last video and in today's video we're gonna learn how to integrate sign-in utilizing react native with Expo and here we have a demo of what we're gonna be doing in this video uh you know that this is going to work for Android and iOS so let's start trying this application with uh the iPhone that I have here when I press sign in we're going to have this model that opens with the login with Facebook uh don't pay attention to this red line here it's just showing because I haven't sent my Facebook application for review uh you don't have to do that if you are developing the application of course if you are ready to be in production you have to send your application uh with Facebook to be reviewed and once you're approved you won't have these this um red letters right so let's just ignore that and press continue and we are going to be redirect back to our application with the information of the user which is profile picture Name ID as well as a token of the user right so with that token we can access more information uh or whatever you need right whatever you need to do with the token you can do it let's try it with Android we're gonna have the same screen I'm gonna hit continue and we're gonna be redirect back to the application uh let's wait a moment here and now we have the information now that took a little bit let's try again I don't know why that took um like a couple seconds if we go back and go back to application you can see that it's pretty quickly of course you can show like a loading loading activity indicator or something while the the information is being fetched okay so now that we know what we're gonna be doing in this video I want to share as well some work that I've been working on on my platform code with Beto guys as you know I have a react native course and I always invite you guys to get into or getting enrolled into the course um and many of you guys have been asking me to translate this course to English so I have started to doing that and if you go to the course you can see that the first two sections are available now in English so if I press here if I press here um full screen you're gonna have this English button which is going to switch to the English version of this course and yep you can just see that this is in English cool so I wanted to invite you guys if you want to be a master and react native I'm translating this and it's going to be available completely in English I would say in the next 15 days or 20 days so you can sign in today and start taking the lessons as soon as I release them and well another thing before we start with this tutorial this this code of this tutorial is going to be available in my platform here in Kobe beta as well if you go to projects you're gonna have all these projects that we create in this uh YouTube channel completely for free if you want um of course you don't see the one that we are doing today because I haven't finished it but as soon as I release this video is going to be available here so you can just enter to the project that you want to to get the code for example and you can check the GitHub and download the project directly from here you can also find helpful um helpful commands or the dependencies that we're going to be using right okay so now that being said let's get this out of the way and let's start creating this application okay guys so let's start by creating a new Expo application like I said we're gonna be using Xbox so let's run the command MPX um create Expo app hit enter and this is going to ask us the name for this application I'm going to name this application um Facebook login right hit enter and it's creating this application cool now this is going to take a couple moments so let's wait okay guys and as you can see the project is ready that was quick so we can access the Facebook login folder that we created and now we can open this on Visual Studio by running this shortcut code dot okay guys so here we have our project and I'm going to start by installing some dependencies that we are going to be using for this video and I'm gonna open this Explorer so you can see what's going on uh for this video we're gonna be using Expo out session this is the new way recommended by export to do authentication stuff so let's bring the documentation and let's start by installing this Expo alt session package as well as the Expo random so let's copy that let's get this out of the way and we are going to paste that here so it's been it's going to be loading for a while and once that is ready we're gonna also need another dependency really important it's going to be export Dev client and I'm going to bring it here I'm going to run the command MPX Expo install as well export that claim we're gonna need Expo Dev client because we need to have like the build of the of our applications in order to be able to redirect the users back to our application once we have export Dev client we're gonna need as well another dependency which is going to be the Expo web browser if you remember when I was trying the application we have this model which shows shows the user the interface of Facebook and then that way we don't have to get out of the application to go to Safari for example and then go back to the application we can do everything inside application at least on iOS because on Android we need to go to an Explorer and then go back to the application so we're going to need Expo web browser okay guys I think those are the dependencies that we need so let's clear our terminal and we can start this project by running the command and MPX X4 run iOS this is going to start the Expo Dev client or the build for this application and note that we are not going to be using Expo go which is the application that we always use when we create applications we're going to need a standalone like I mentioned before so let's run this command and let's wait uh of course we're going to need to set up the bundle identifier for this application and I'm going to leave the default that Expo get gives me here which is going to become better Milano and then Facebook login cool so let's hit enter and this is going to start creating our application or installing the port dependencies and creating basically the build right so now while this is being done we can go to the Facebook developer account okay guys so here here we are in our meta metaphor developers account if you don't have one you are going to need to create one account in order to be able to use Facebook sign in or integrate sign in with Facebook in in your application here as you can see I have two two applications that I created before so let's create a new app I'm going to show you how you can do this let's create a new app and I'm going to select other in this case hit next and here we have a couple or well a bunch of options that we can choose from I'm going to go down here and choose none and then close this and hit next and here we can add an app name I want to name my application code with better you can name it as you want we're gonna need a contact email and you can also this is optional you can add a business account having a business account is going to allow you to have or be able to access more information of the user but you're gonna you're gonna need to send your application for review as well with meta so let's hit create application I'm going to leave that blank and put my um my password once this is done we're gonna be inside this code with battle application right cool so one important thing here is that this application at the moment is being in development so we need to hit live and we are ready to go or ready to test the application now as you can see here we have Facebook login so let's hit setup in here we're going to be redirect to this um page and you can see that we have a this quick start but we don't need to to be here we just we can just go to the settings uh section and well here we have a couple things we have the um this message that says that we have access to the public profile if we need access to more stuff we need to send the application for review like I mentioned before uh and well we have this quick start so we don't have to do that nothing with with that information we can just scroll down and enable this embedded browser oauth login because we're going to be using a browser inside application to sign in the user cool and once that's done we need as well to provide the link to redirect the user how do we get this link well let's go back to vs code and here I'm going to press yes because I'm using the other port for the other application but let's hit the 80 let's use the 8082 for this and now the the build is being done it's it's been planning the build so let's wait a little bit this can take a couple minutes maybe or one minute Maxima and yeah so let's wait and let's continue after this is done okay guys so another thing that we need to do before we can do the signing with Facebook we need to add a scheme for your application so let's go to the app.json here and you're gonna see that we have a bunch of settings here that we okay and the application is just done so you we can press open here and you can see in the background that we have now Facebook login which is the new application that we just created and we are not using xpogo we are Expo go it's up here we are using the build right so let's hit open and this is going to start loading the application and now we are using the export Dev client it's very important in order in order for this to work we need to use the Expo Dev client so let's hit guided here let's close this and we have nothing at the moment just this standard text now I'm going to go out quickly and I'm going to delete this test application so we don't get confused this is an application that I did before now let's go back to to here and an important thing here is that we have this link that Expo has given us so we can copy this link and we can use this link to redirect the users so let's go back to um Chrome and here we can add this valid out right direct like this cool so let's hit save changes and here we have a problem right okay down here guys we have this link uh and we're gonna use a part of this link to add it to Facebook so we can redirect the users back uh before we do that I'm going to add a scheme for my application up here so let me I just make sure that we don't have any anything like skin and yeah as you can see we have this Builder identifier for for iOS and we're gonna need this so after web we can add the scheme that I just mentioned so I just mentioned I'm going to say scheme like this and this scheme we're gonna need two schemes one for iOS and one for Android so for iOS we can just put the slow of the application or you can use whatever you want this is a string and for um for Android we need to add the the application ID so I'm gonna put FB on Facebook and then we can go back to Chrome and copy the ID so this ID that we have here I'm going to copy this ID and go back to my application and paste it here like this and this is for Android to work right okay so now um as you can see we we're also gonna need the Android package and we can generate that just by running um let me close this let me stop the server for now and just run the command MPX Expo for build cool let's hit enter and this is going to generate the package for Android as you can see here I'm going to leave the default as well so hit enter and this is going to add this package here so we need this to redirect the users back to our application cool so now let's copy this and let's paste it here we're going to form the link to redirect the user so I'm going to say um HTTP s um slash and then I'm going to paste my um my bundle identifier for my application and after this I'm going to paste this link that we have here that is Expo development client and all the way until the end like this and this guys is going to be the link that is going to allow us to redirect once we authenticate the user with um with Facebook right so https uh semicolon slash slash called Facebook login which is basically my package or my bundle identifier for iOS then we're going to add the Expo development client like this so let's copy this let's cut it and let me just close this here let's cut that hit save and let's go back to the valid redirects add this one like this and I'm going to save the changes and that's pretty much all we need to do here uh just make sure that you have yes in the embedded browser or auth login and then this all out redirects and once that done we can as well go to the um I believe dashboard and sometimes or setting settings basic and sometimes you're gonna need as well to add a privacy policy just to just to have you know a better UI for the user or sometimes meta also requires these so it's it's well to have this I'm going to put just my platform called libertad so I don't have anything for this application this is just a test Kids Safe changes as well and yeah just to make sure that we have everything correctly let's go back to the Facebook login settings and let's double check that we have this redirect URL so it seems that it's correct let's go to the application I think this is all we need in the Facebook platform and here we are back and now we can start again the build for iOS so I'm going to say MPX from IOS like this and let's keep working on the 8082 I'm going to make this small and now guys we can start I think um oops and now as we can start working on the actual UI right so let's close this let's go to the app.js and inside the app.js I'm going to start by importing a couple things here I'm going to start by importing Facebook from Expo out session which is a package that we installed at the beginning and we're gonna need as well the Expo web browser so let's import that we're gonna need to handle some state so I'm going to import as well use state from react um let me see use State and then we're gonna need as well use effect from react and from react native we're going to need a button an image to show the image of the user so let me just copy this here where I need a button an image stash pit to add some some Styles and then the text interview that's all we need for now now uh we need to initialize this web browser so let's say web browser and let's say maybe complete Health session this is going to set up like a listener whenever the user is trying to sign in with Facebook and this is going to open the the web browser inside the application cool so now let's hit save and now let's start adding the logic for the user I'm gonna start by initializing a variable called user and then set user like this using user state right so we're going to initialize this to be no and let's leave this like that for now now this is going to be super easy guys we need to um we're gonna be using this Facebook that we imported here so we can this is going to return us three things in an array and you're gonna see what things in a moment but let's say Facebook here and then use the hook use out request now this use of the request is going to take some configuration which is going to be basically just a client ID for our Facebook application let's go back to the Facebook and copy the app ID like this go back to the code and just paste it of course you you want to be maybe careful with this app ID it's not very safe to being to you know showing around you can see it in this in this tutorial of course because by the time you are seeing this video I'm going to delete this project so no worries for me but you you maybe have to be careful with this even um um you can you you want to be careful with this especially if you want to upload disco to GitHub for example okay so now that we have this we are going to re um I mean we're gonna get from this method a request and we're gonna get a response and we're going to get as well a function that is called prompt from async like this cool so now let's hit save and just to to have this basic example we're gonna be using a use effect and inside this use effect we are going to run some logic whenever their response changes so we're going to basically pitch the data from the API of meta and then show it to the user whenever we have a response after showing the prompt oh um to the user and the user science scene with Facebook cool so now let's check basically if we have a response and the response DOT type it's equal to success and the response dot authentication it's true cool so now here we can have a function that is basically going to fetch the data once we have the token of the user so I'm just going to paste these lines of code you can see that this is going to be an Asic function you can abstract this in another function if you want but just to show you guys how this is done basically we are doing this a single request to this endpoint of meta and we are adding the access token from the response that we're gonna get once we once the user is signing with Google right or once a user I mean with Facebook once the user accepts to share the information with our application so we we have the response then the authentication and here we are accessing the access token of the user so we need to add that add to this to this endpoint and I'm going to just bring this like this so we can see that we are adding as well these fields and these fields basically specify the information that we are asking the user to give us right so we are asking for the ID name and picture and the picture type is going to be large that's all we need for this endpoint once we have a response we can access the user informationresponse.json so we have here the user info and we are going to set the user info to the state uh setting this user that we created here right so once we have that we can basically just show the information to the user now before we do that I'm going to create another function and this function is going to be called handle press async this handle press is basically just handle the when the user presses the button with signing with Facebook uh so we're gonna get the result then prompt async basically this info this function that we are abstracting or destructuring from this Facebook hook and we're calling it here this is going to open the model once we get the result if the result type is different than success um we are going to say that something went wrong otherwise we're going to trigger this use effect because we're adding the response as a dependency so this is going to trigger this use effect and this this code is going to run now at this point we're gonna see or we're gonna know that the type is Success so this code is going to run and basically we're going to fetch the data of the user cool all right so let's now just add some basic um basic and I'm just going to paste here another part of the code basically it's another component that is going to get the user as property we are going to just you know um base as well some Styles and all this basic example I basically copy it from the Expo documentation I'm going to leave the description in the description here the guide of how to implement Facebook authentication um if you want to check it out by yourself but basically it's just a component profile and we are showing the image of the user and the username and the user ID and I'm going to show you as well uh what else we got when we when the user accepts to share their information with us right so now inside this return or inside this inside instead of having this text we're going to change this to have a view and then we're gonna check if we have a user we are going to print the profile which is basically this component we want to pass the user and otherwise if we don't have a user we're goes we're just going to show the button to sign in with Facebook and then when the user presses the button we're going to call the function handle press async so now let's hit save and I believe this is all we need to do in order to this to work but let's try to reload the application just to make sure that everything is working let's get into the Facebook login application and let's try to sign in with Facebook we're going to get this alert that is basically telling us that if we want to get out of the application and open a web browser so I'm going to say continue uh we are going to see that we have this message that says code view better is requiring access to your name profile picture and email address with with which basically is this information or the profile the of the user and of course we are getting this submit for login review because this is just a test of course we haven't sent this application to Facebook to review it so you will need to do that through the Facebook developer platform and once you have done that or once you are ready to to add this in production you you can do that but basically we can we can still working with this on testing or or in development so I'm going to continue as Alberto which is my profile and that's it we we come back to the application and we have the information cool now let's see if this works on Android because it's really important as well so let's just clear the terminal and basically run the same command but in this case we're going to serve to say Android and hit enter and we're gonna be using the export the port 80 82 now this is going to take maybe a minute or two so let's wait until this is done and then we can continue okay so while this is building guys for Android and actually that's done I'm going to bring here the Android emulator and I'm going to just move away my iPhone put this in here so we well here just so you you don't have to see my face in front of this screen uh basically we have the same that we had with uh Android I'm sorry with iOS and now we can test this out let's say sign in with Facebook we're going to the redirect and okay so we have something here something went wrong let's reload the application sometimes you know something fails let's try to reload the application and we are going to see that in a moment we have the same screen that we that we saw before on iOS and now we have a different message because this is not the first time that we are accessing so Facebook is showing a different message uh basically telling us that we again we need to send this for review so let's hit continue and we are like magic redirect back to our application and yeah that's it guys basically this is all I wanted to show you I can just um reload this application on iOS as well and we can see that this is going to work now with this uh this screen basically telling us that code we better wants to access let's hit continue and we're going to be redirect packed now just as a final note I'm going to put here the iOS and I'm going to move away the Android I just wanted to show you guys that we are getting um more information apart from the name ID and the image or the profile picture of the user we can basically check the response so I'm going to create just another variable just to show the response on screen or well instead of showing it on screen I can just open my terminal and just hit here once we enter here we can just say console.log response but this is going to be ugly so I'm going to say that Json string A5 this and then I'm going to say no and two okay so hit save open my terminal and well I'm going to just open everything here and this is the information that we are getting from the user every time that they accept so basically we're getting the URL we are getting the authentication and the access token and like I mentioned before guys this access token of course you you want to be careful with this information because um you know if someone gets this access token can basically access my information right uh of course these access tokens have an expiration date I believe this one is going to be I'm not sure I'm gonna say like minutes I'm not sure how many minutes but once you have this access token you can exchange it using the meta API to have a token that can last up to 60 days I think and yeah basically the access token it so we care in this case when we are using third-party providers to authenticate the users and just as a final note just to finish this video I want to mention that if you are using or if you have seen that there's another way to you to make this authentication using a proxy using the proxy of Expo just to tell you for the information experts removing this proxy because of security issues um yeah so you can maybe you in the past or you have tried to do this before and you have seen that you can specify I believe here like use proxy yeah and this use proxy if you make hover you can see that they don't they tell us that this option is going to be removed actually in the next release of Expo I believe export 49 won't have support for use proxy so don't use it and it's dangerous to use it as well uh I would recommend that you use just development bills with X4 and if you are wondering if this works on production it does I created a a build for test flight on iOS and I created an APK as well for Android and of course I can just bring the apk here let me just search for it and to make sure that this works on production I created an APK for Android and if you want to learn how to create apks for using Expo I created another video showing that I'm going to put the link here in the description if you want to check that out you can just create an APK and then drag and drop to your device and this is going to install it basically and this is my uh test Facebook I believe this is that the test basically this is a standalone so we can try to use it we're gonna get the same same thing and if I hit continue we're gonna get redirect back to the application so this is an APK this does not need anything um from expo at this point because it's you know it's Standalone build and it's working so I hope you you like this video guys I hope you find it helpful and basically that's all I wanted to show you before I go just don't forget to go to Kobe better.dev check out the course if you want to master react native we have um if you want to learn as well how to integrate sign in with many providers like for example when we use Firebase we we learn how to let me let me do this a little bit bigger so you can see we learned how to uh use email authentication Google authentication Facebook authentication which we learned today Apple authentication as well using Firebase if you are curious you can check it out down in the course and as well if you know amplify in the final project we integrate authentication as well with uh Apple and Google using AWS amplifier right so if you want to learn more about that just check out the course and don't forget to check the project as well if you want to check out the code of this tutorial it's going to be available here and that's it for today guys I hope you like this video I hope you learned something new and leave me a comment give it a like and I'll see you in the next one thanks bye

Channel: Code with Beto

Views: 12,983

Keywords: React Native Expo, Facebook Sign-In, React Native Tutorial, Facebook Login Integration, Expo App Development, React Native Facebook Login, Social Login, Mobile App Development, React Native App

Id: Ea7--DkHFPo

Length: 32min 25sec (1945 seconds)

Published: Mon Apr 03 2023