React Google Authentication - Firebase Authentication Tutorial

hey guys how's it going i'm back here with another video and today i decided to bring this tutorial where i'm going to go over how to create um google authentication for your react application using the firebase um service and this is basically what we're going to be building over here as you can see i can click on this button a pop-up will appear i can log in with one of my accounts and um you should see that like i i actually authenticated if i refresh my data shows um the data of the person who logged in so it shows like the name of the person the email and the profile pic obviously the important part is knowing that you authenticated with google and you can get information about the user based on that so you can implement that inside of your project so if you're interested in seeing the code all the code will be in the description um and yeah that's that's basically it before we get into the video if you guys could leave a like and subscribe i would massively appreciate it because it would help push my videos to more people you guys support has been amazing lately and i'm just thankful for everything so if you could just leave a like and subscribe i'll be very happy so with that in mind let's get into the tutorial [Music] [Applause] [Music] [Applause] okay everyone so in order to start out building your project i actually already have a simple react application already set up i basically didn't do anything all i did was i ran create react app then i basically just deleted three of the files that were here which comes with create react app which were the index.css file the setup test file and also the logo um that comes with the create react app um command and now these are the only files that i have left and i basically just related everything that is was inside of the app.js file and just left with um this text saying hello world so right now our project basically just says hello world we're going to zoom in a bit on this so you guys can see it better but what we are going to do is we're going to be using our firebase account over here to create a new project that will allow us to integrate google authentication into our project so the way we do this is we'll click on add project and you can just give a name for a project in firebase um if you're from if you're not familiar with firebase i'm gonna leave a link in the description for um for the website you just sign up with your google account and you'll probably be in this step over here and then you can just click on add project now to create a project you just put a name i'm going to name it google auth but you can call it whatever you want and i'm going to click on continue then you have all this stuff over here i'm just going to remove this thing over here called google analytics because i really don't care about it but you can do you can put it whatever if you want it or not um it doesn't really matter for our use case then i'm going to click on create project and it will start creating our project one thing we need to do before it creates is we need to install um a package into our react application so i'm gonna open up my terminal over here and i'm gonna open a new terminal so that because this one is already running react as you can see i already ran yarn start and i'm gonna install the package called firebase now if you're using npm you can run npm install i'm gonna use yarn so i'm gonna say yarn add then you're an ad firebase and i'll just press enter and it should start installing the firebase project package inside of our project now hopefully this is already done and you can see our project is ready i'll click on continue and it will open up the website and the first thing we need to do is we need to go to project settings uh by clicking on this little icon over here then project settings and then what we want is we want to see what uh like code do we need to write to make the connection between the project we just created into firebase on the website and our react application the way you do this is by clicking on this button over here you'll see that it will ask you to register an app so we just give it a name again it's it's it really doesn't matter at least for our use case you can call it whatever you want want depending on what what project you're building i'm gonna call it google auth again um and then i'm gonna click on register app you can set up firebase hosting but that's for another video um and yeah i'll just click on register app then it should not take a lot yeah as you can see and we now get this over here basically this should be enough to help us connect our fronted or our application with the project we just created in the website so just copy all of this and where we want to paste it is basically we want to create a file in an application in our source folder and this file is very commonly created as a way to establish the connection so we can call it something like firebase like this so firebase.js and this file will just exist for the purpose of establishing everything relation related to configuring firebase so i'll just paste that thing that we just copied and i'll delete all the comments because they don't matter but basically as you can see this will contain all of the keys everything you want um that will help you connect to firebase also this is this there's this thing called initialize app that we are importing from the firebase library you'll see a lot of tutorials online um just importing this from firebase uh there was an update this is firebase nine um so basically a lot of the things you might see online might not work and that's why i'm making this few videos um if you're following my channel i'm making a few a good amount of videos in firebase because a lot of people don't have resources necessary to learn the new version of firebase so i'm pointing this out so you guys can understand it better now what we use with the initialize app is basically we create this variable called app which will represent all of our firebase connection so what exactly does that mean well for example if i want to utilize anything from the firebase platform and what i mean by anything is you can actually do a lot of different stuff with this you can host you can do authentication which is what we're going to be doing you can create a database you can have a real-time database you can have buckets and storage and everything you want inside of firebase so there's many different services we might want to use and in our case we're only going to use the authentication service so i'll click on this over here and click on get started and it will appear all of this over here which i'll explain in a second basically there's many ways that firebase allows you to um to authenticate right the most common one is email and password which i do have a video on that if you're interested you can also authenticate with phone calls like phone numbers which is really cool and all of these other providers over here are also valid um it is very common to see on a website something saying like oh sign in with google sign in with microsoft sign in with github if it's related to coding um so that's what we're going to do in this video i'm going to click on sign in with google and if we click on this enable thing over here it should enable google authentication one thing we also need to do is click on the um email thing over here and choose which email we want to um use obviously i blurred out my email because this isn't the email that i have public um but you just choose the email you want as the support email and basically what this will do is um if if anything happens this is the email that serves as support that's pretty self-explanatory but i'm going to click on save and this should basically save and enable authentication for our project as you can see it says uh google authentication is enabled now with this done what we need to do is we need to come to visual studio code and we need to start by importing some stuff from another firebase service so as i mentioned there's many services and the way you import stuff from different services is by following the following um format basically if we're trying to import from the authentication service we just say import from firebase auth and everything related to authentication will exist inside of this path over here so what we want to get from the firebase auth service is something called get off and this will allow us to create a variable called auth into our project and what we say is we say const auth is equal to get off and pass the app and this over here will represent everything related to the user currently authenticated in firebase inside of your project so what does that mean well you can technically use this to get who is currently authenticated like information about who's currently authenticated just to figure out which user is currently authenticated based on what firebase is saying so this will be very useful for us and we definitely need to access this in different files so since we want to access this in different files we say export because we might want to import this in a future file or component that we are that we're going to create now what we want to do is uh we want to write the logic that will establish that that we're going to be using in gmail authentication so there's there's different things you got to do if you're for the different methods of authentication you want to use for gmail it is um very simple the first thing we need to do is we need to create something called a provider or google or gmail provider whatever you want to call it i'm going to call it provider and set it equal to new and we want to import this class from the authentication service called google auth provider as you can see over here and we're going to say new google of provider and this variable again will represent everything related to google authentication then we're going to come over here and we're basically going to create a function that will represent the sign in uh for google so whenever we want to sign in or use this function uh we're going to import it from this file so i'm going to create this function called sign in with google and the function will be pretty simple um what we're going to include inside of here is a method that um appears from the auth of the auth service called sign in with pop-up now what does this method means well when you usually sign in with google there's different ways you can do this you can open the google like sign-in thing as a pop-up you can be redirected to to the website to google there's many things you can do um technically in my opinion signing in with a pop-up is better because it doesn't remove the user from your website which is kind of like why would you want them to be redirected to to another website just to sign in when you can just have a little pop-up appearing so keeping that in mind firebase created different functions that will allow you to customize it based on what you prefer and i prefer signing in with pop-up so i will use this function so with this i'll just click come over here and i'll say sign in with pop-up then i'll pass first the off variable that we created and then the provider variable and what it can do is this will return this by itself will actually work this will when we click when we call this function it will automatically appear the pop-up and ask us to sign in now what happens is we are we won't be doing anything with that um and in order to deal with like for example what email the person used or information about the user based on their um based on who signed in we can we can do that by clicking on dot then and then grabbing a variable called results and creating a function that will return um what happens after the user authenticates so this over here returns a promise and we can handle that promise by accessing the result variable over here and if there's also any errors while signing in for example the user doesn't sign in we can cache the errors by saying catch then error and for now what we're going to do is we're just going to alert a message saying um error yeah actually let's just console.log the error um console.log error now what do we want to do with the result well for now let's just console log the results so you guys can see what information we can get from the user just based on gmail authentication and that would be good because it will give you an idea of what websites know about you when you sign in with google so for now let's just leave it like this and let's export this function so that we can um use it as as a as a on click in buttons throughout our website so for now what we just want to do is we just want to use create a button over here which will say something like sign in with google like this and you'll see that the button should appear in the screen if i come over here into our react app it says sign in with google but when i click on it nothing happens now let's import from the the file we just created so dot slash firebase let's import the function we created called sign in with google if we pass this function as the on click to the button we should see that if i click on the button it will appear a little pop up over here ask us to sign in i'll click on my email and it should authenticate and we don't have any confirmation obviously because we didn't tell the website to do anything related to like anything after you you authenticate but what we do see is that when we console log it comes to log something saying user credential and this basically i really don't want to show everything but like it includes a lot of information about the user for example the user's email the user's name um stuff like [Music] their profile pic all that kind of stuff you can see through this again i don't want to show my information so i'm not going to be looking at this object over here but please do take a look at everything you can do with um this this information so that you can tailor your project um directly towards that um what i will show you guys is um how we can use that to display the picture of who signed in and also their name so if you take a look at the object again i don't want to show the object but if we take a look at that this results object over here includes a lot of fields including the following the result object contains a property called user which contains three different properties email display name and folder url so those are the three things that we want from this function so what i can do is for example i can create a variable called name is equal to result dot user dot display name and now we get the name of the user who logged in we can then see the email by saying const email is equal to result dot email dot actually not dot email dot user dot email and we get the email and finally i want the picture so i'll say profile pic is equal to result dot user dot photo url and um this are the three informations we want and how will we access this well we need to think about it this way we want to access this somewhere in our website right a good way to do it in our case over here we're only using this function once so i want to point out if you're going to use this function multiple times inside of your website i wouldn't write the logic for the dot then inside of here i would actually just create a function like this like i'll create the same i would create the same function but instead of writing like sign up with pop-up and then handling the promise i'll just give the this like this and um tell the user to or or like i would myself handle the the dot then and the dot catch on whichever file i'm using this however since this will be only used one time in my project i'll keep it like this and the way i want to store this information when the user logs in is by using the local storage so i'll say something like local storage dot set item um then i'll i'll set it an item called name and give it a value of name then i'll do the same thing for the email and the profile pic what i'm doing here and for those who don't know this the local storage is just a kind of a local database or a local place you can store um information on your browser and um we're just storing this information about the user so that we remember or the web the browser remembers who is logged in i'll put also the email and i'll also put the profile pic and again i'll just put those information over here now when the user logs in you should see that and i'll open this up so you guys can see if i go to my application the local storage currently doesn't have anything as you can see over here but if i click on sign in with google then i sign in with uh my account over here um you should see that the three pieces of information that we we told to store in the local storage now appears over here and um what we can do with them well i can come to my app.js over here and i can do something like h1 um and just display that information like localstorage.getitem i'll get the name then i'll do the same for the email like email then i'll do the same for the picture for the pictures a bit different i'll just say image then pass the src and give it make it equal to local storage dot get item um image i think i called it image right now i called it profile pic and now if i save this um i'll just come over here and you can see that the information appears in our website it says my name my email and my profile page because those are the three things i logged in with this can work with multiple accounts uh if you're trying to sign in i can come over here log in with this one and you should see that uh it should refresh my page display the new information well why do i need to refresh my page because we're storing it in the local storage but you can handle um what happens when you log in um on your own time i this purpose of this video is just to show how to authenticate with google and as you can see we can do it perfectly also just as a a bonus i i found this code that some css that basically makes the button looks like look like this which i find it really cool when i click on it you can see i can still log in as before so if you're interested in seeing the code i'm gonna leave out the link for the code in the description give it credit to the person who wrote this um which i find it really cool so yeah if you're interested just look in the description and it will basically give you all the css to make it look like this now this was basically it i really hope you guys enjoyed the video if you enjoyed it please leave a like down below and comment what you want to see next subscribe because i'm posting um two times a week and i would massively appreciate if you guys could support the channel and yeah that's that's basically it really hope you guys enjoyed it and i see you guys next time [Music] [Applause] [Music] you

Channel: PedroTech

Views: 2,676

Keywords: computer science, crud, css, databases, javascript, learn reactjs, mysql, nodejs, programming, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js crash course, react js, node js, express js, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, deved, pedro tech, google authentication, react authentication, google authentication firebase, firebase react, firebase react authentication, firebase authentication

Id: vDT7EnUpEoo

Length: 20min 22sec (1222 seconds)

Published: Tue Nov 16 2021