Log In / Sign Up Using Google OAuth with Firebase in Full Stack MERN Application | PART 1

it's been excellent progress so far so now we're going to be adding the Google ooth authentication to our sign up and signin Pages what we're going to do is we're going to add all of this so let's go to our application over here remember just uh navigate all of this and what I'm going to do is actually I'm going to go to the source uh and in the you know client file uh there's a source and then inside the source I have to go to the components I'm going to add a new component and this is going to be called o o so it's going to be called o and then o a u. jsx what we're going to do is I I think I created a folder no way um so what we're going to do is we're going to go in the components and we're going to create a file which is going to be called oo so oo. jsx and inside of this we're going to do rafc so once we have all of this done we save it and we could also just call this as oo at the moment uh you know at the moment we'll just call it oo okay so now what we have to do is we have to import this everywhere uh the the meaning what I'm talking about importing is because U if I look at to the sign in and the sign up Pages they're actually in the pages folder so over here we have the sign in and the sign up pages so what you're going to do is you're going to go to the signin and on the bottom where you see the button right this is the button you'll have the oo uh you know component added as well so just type in oo like that and it just should update it and it should be added on the top as well so there you go same that goes for the sign up go on the bottom where's the button the button and right after the button just write oo and so o off and you know import it and then it should add it so now you know that's added over here as well good and if we go to the application we see ooth and we'll go to sign up and we'll see ooth all right so let's fix this up so let's go to sign in and let's go and uh put this on the right so I'm essentially going to put this on the right and I'm also going to put this on the left and I'm going to go to the ooth uh jsx and over here I'm going to fix it up so first of all instead of a div let's put this as a button now it's in the center now um of course we need some classes for this so uh some of the best classes that you would have for uh this would be class name so I'm going to use tailwind and inside here we're going to say BG background uh col background BG red 700 so this color of the background is 700 red text is white so that it's easy to read uh P padding is three everywhere so it's a little uh fat so you can see over here perfect and now we have rounded LG which is you know the borders you see now it's rounded um now we'll have the uppercase text so that it's all uppercase and we'll have an hover effect so that when you hover over it you'll have the opacity change to um opacity change to 9 95% so just let me show you and demonstrate it um if I hover over it you'll see a slight variation in the opacity um the type of this is very important because actually I put this inside of a form and by default all buttons are of type submit and we have to change the type to just a a normal button so we're just going to type change the type to a button so that it doesn't do any kind of Randomness uh inside the form there's already U you know a trigger so now after that we have um this uh you know class and let's just change this text to call it uh continue uh with Google all right and this is just going to add that text over there perfectly done um now once we have all of this out of the way um we could go and uh you know go and um create this onclick uh function so uh for this onclick handle we're going to have a function which is going to be called um handle Google Google click I'll just call it like that right now it's everything is going to be disappeared because you have to create one over here so it'll say cons handle Google click and it just uh you know adds this thing for me I don't know why um but yeah it adds the async um you could leave it as it is and just close this for now I'll just close it so that the error is gone and I could just see everything okay now after that uh handle Google click will have you know some things that we have to look upon so um if we look at the handle Google click um we have this thing which is uh try and catch and we're going to use this uh for most of the things first of all in the catch we'll say console.log I'm not going to put an error handle but I'm just going to say you know uh couldn't could uh so couldn't so could not sign in with Google that's good error uh and then just throw in the error as well pass it so like that okay so after uh this is done you could go into the try now the try part is that you know we have to use Google oo authentication for this purpose and obviously it's going to be using the internet um so that's why we're using async it's going to take some time um at the same time we're going to have to you know add this thing so let's let's go here and uh I'm going to go to the website over here I'm going to maximize the screen and I'm going to go here and I'm going to go and type in the following which is Firebase uh so fire base. google.com if I type this in you'll see this website open up so make your app the best it can be click on go to console I'm already logged in so you can see my uh you know account is logged in so you go to console over go to console um make sure you have an account and then go to console and then welcome to Firebase you create a project here you name your project and I'm going to type in M estate like like that uh you know it's going to be there uh you know it gives us a a unique identifier for your project you accept all of these stuffs and you go and continue after that you see Google analytics for your Firebase project I'm going to disable the Google ad analytics for now but if you want to add them in the future you definitely could so create project after that with some time it's going to create our project so we just have to wait and it's going to be called M hyphen estate so once we're you know waiting we could just look into this uh part and just maximize the screen as well so essentially what I have to do is I have to add some uh you know States over here um provided by Google ooth provider and um I'm going to be able to do that until you know everything is settled within this so it's already done create we have the project ready so we continue here and now it's going to load it up to our dashboard here you can see it's an overview and you could see over here that uh get started by adding Firebase to your app what kind of kind of app is it is an Apple device is an Android uh phone is it a web application a Unity project or for where I have a web application we'll click there okay now uh we have to give a nickname to our app again um so you could just call it the same thing um app nickname we'll call it m apppp or M estate hyphen hyphen estate and uh also set up Firebase hosting for this app no we're not going to do that so with M State uh the hosting going to be set up later this is no there is no cost to to get started anytime all right we don't have to include that we go register app and in a moment it will just do it for us um and now it says uh you know you have to add Firebase SDK which is a software software development kit and if you're already using npm and a mobile B uh bundler such as webpack or rollup you can you run the following command to install the latest SDK so just use npm install Firebase copy this thing go into your uh terminal over here where your client is remember make sure your client is there and in there just type in npm installed Firebase it should install Firebase for you so let's just install it it's not that big either and it's just going to done be completed in a moment once it's done uh we'll go to the next step after this and you'll see that it's going to automatically refresh my server and as well as you know my client is on my server is on but at the moment is installing uh Firebase so it's almost there and uh yeah so um let me go back here and see now this is over here then initialize Firebase and begin using the spks for the products you like to use this is actually the complete uh initialization of the app and then the API keys that it provides and then basically initializes the Firebase app for me so we copy this and we have to go back to our application we'll see that it's almost there it's still uh installing Firebase but um what we have to do uh in this part is we have to uh you know go to the uh client side and in there we're going to have to go you know okay okay what's happening oh yeah perfect everything is installed and you know restarted everything worked so we'll go here in the client side and inside the client we have this uh Source folder and inside the source just create a file which is going to be called fire base.js and over there just paste the entire code that you got from you know the website now the thing is over here we have this app and we have have my API key here and all of this information so what happens is that import the functions you need to need from the sdks you need so it's basically from the S okay import initialize app from firebaseapp and then after that we have the cons Firebase configuration these are some of the settings that we need obviously the key and all and then initialize Firebase it basically creates an app and it says initialize app and then uh you know it's been coming from firebaseapp and you put this Firebase config and initializes it actually we need to export it so we could use it in different files so I'll just put an export here rest other than that you know other than that everything is done uh let's go back to the website here so um now that we know we have all of this done one thing is that you know this API key is you know you don't want it to be uploaded on GitHub or something so there's a you know set thing I could do over there go in the client folder I know that there is actually if we go and scroll down we have one APV outside in our root directory but inside the client this is something related to the front end so we'll go and click on the client folder and inside here just type in a new EnV and and this EnV will only have the you know the Firebase credential so it's going to be called V API key yeah I'm calling it a Firebase API Tok key whatever key so V Firebase uh and then underscore API uncore key okay all of this is done and then we put the uh API key in here so like let's see let's go back in Firebase and you see that there's a string right this one actually we CAU we cut this entire thing and we put it inside here and put a semicolon now the thing is that this Firebase uh you could just copy from here and you could actually use it um there's a special way to uh add this and it's called import. meta do EnV Dot and then you have you know your V uh so underscore what you just typed in Vore Firebase Firebase and then underscore API uncore key like that okay so that's perfect I mean everything seems to work EnV is there and read Firebase uh Firebase it looks looks okay the spelling should be correct make sure everything is correct I'll just paste this in and everything looks perfect all right so now that everything is done let's go back to the uh console so let's go here um I mean over here uh back to the window and over here we'll continue to console now once we do all of that um you know everything seems to work now the thing is then we have to authenticate uh use authentication so authenticate and manage user so we could either do this one uh store and sync up data in milliseconds uh choose a product to add to your app so we could either use this authentication option from here there's two ways to get it from here or go to build and then authentication and it just goes to that same place now inside here uh you have to click on authentication authenticate and manage users from a variety of providers without server side code so you get started there's going to be a lot of providers but we only need Google for now so you can see additional providers we have Google Facebook and all these kind of things but we're going to use Google and over here we're going to have to click on enable and over here we have public facing name for the project so just type in like M let's say let's call it um um let's call it m estate so I'm I'm going to call it estate app all right so this is the public facing name for a project and support email for uh project you can just use your own email that you're logged into and then after that you can just click on Save after that it should allow you to go to the next step after this okay so now Google enabled you can see it's enabled now we are allowed to use Google authentication in our application what a great great job okay so now where we're going to go is um you have to go to the try uh you know where the all was we have to in inside here we have to uh you know write the following so um cons provider since remember it's providing Google so we're say new Google o o provider and this is coming from somewhere so let me show you this is coming from import um Google Au Provider from Firebase all right let's just just remove this from the top okay I think everything seems good okay now after that we need to import another thing so uh let me just first add it so con res uh Au authentication and it's get authentication and essentially you need to put the authentication uh to the app you're getting so where's this app coming from I'll U you know I'll tell you where this is coming from this is coming from your app you created from Firebase so import app from that Firebase but actually if you look into this uh it's not here this is the wrong path you have to go to dot dot I mean you have to go back one step and inside the source there's all obviously there's this Firebase so um yes I mean that was the right path so you just have to go slash and then Firebase all right and that's your path and this is the app remember this app we were exporting it now we're using that and we said let's uh use that app inside of this get app get off and then applicate application all right so authentication and now after that we have a result so we have result and we say await because this is going to take some time because we have to authenticate um so we're going to say sign in with popup window so this is going to be popup um authentication remember we already got it from this and the provider that we're using which is Google now these two things will give us result we could either console log the results for now so console log the result and you know this should you know appear and you'll see some things let's see if sign in with a pop it's there all of this thing is imported um but we have to see if this actually you know seems to work um let me just connect my mic properly just okay yeah so we have to make sure that this is working or not so okay so let's go back to the application here and uh I believe uh I mean we don't have any problems let's see what happened uh let's go to the Y okay seems okay running running okay what happened here uh there's an issue refresh this page and let's go to console and see what happened so in the console it says syntax uh error the request module you know does not provide an export name default all right uh I I guess we didn't have to type in default if you go to the uh Firebase export okay 1 minute where are you been talking about bro uh let's go back here it says over here export named default at oo. jsx okay o. jsx okay I don't know why uh it's uh creating this issue okay it says the requested module Firebase source firebase.com and I believe um we might have done something there okay so export const app initialize app Firebase config looks good over here and you know looks good over here as well um it should work fine I mean add the JS Firebase I don't know okay it's still giving the issue let me let me turn off the server I know it's um it's just a uh you know just to see if what's happening so login again okay we still have this issue and it's in the console and it says the same thing the requested module / sourcefire base.js does not provide an export named default DFA UL T so again we could either you know find that let's go and uh you know go to the fireb base.js again you can see over here sign in. jsx o. jsx you have all your code Snippets as well okay so what we're going to go is we're going to go to the console you know we obviously uh you know you want to try this but it's not going to work at the moment nothing's going to you know appear so we're going to go back here and uh let's see is this even allowed import app okay I think the reason we're having this issue is we have to put this like like this because it's a single thing and probably this is going to be the issue okay the request module does not provide an export name default fail to reload this could not be due to syntax errors or imported okay um so app from dotf Firebase and then after that do this one this one this one and this one let me just see what happens now um okay all the errors are gone continue with Google and you get the login yep uh the issue where we're receiving is that the API is not valid API key is not valid please use a valid API key if not valid all right so we go back to the uh you know authentication here I mean we'll we'll try it but at the same time you know things are working well uh you could see that uh you know there's some progress that has been made but the thing is that um uh the API key has an issue I don't know why um probably that but other than that I guess everything seems to go well Firebase API key and Firebase API key over here um let's go back to the off and uh let's run it one more time yep it was the semicolon issue oh my God it was the semicolon issue and I removed the semicolon from the API key and now the Google oo thing is working which is perfect um now let's step move on to the next steps so you can see these cross origin Pol uh course issues would block the window. close call this is not a problem from us this is a problem from Firebase so you don't have to worry about this Firebase will fix it later on um so um we're done with that which is really great

Channel: Coding Cleverly

Views: 297

Keywords:

Id: 7Uv0gCy8cG4

Length: 21min 6sec (1266 seconds)

Published: Thu Jan 11 2024