Google Authentication with React Js and Firebase || Signup with Google in React Js and Firebase

hello everyone in this video I will show you Google sign in with Firebase in react.js let's start here I already created a react project and I'm running this project okay and I'm going to browser here type firebase.google.com okay and click enter it will navigate to this page click get start before that you need to create your account okay after that click this add project and you can give your project name maybe anything okay here I give a multi-shop that's shop okay and yeah click continue and yeah again click continue you can select default account from Firebase for February sorry and click create project it will take some time few moment okay click continue now our Firebase project is created click this this icon web okay click that and yeah you can give your web app name nickname okay here I give YouTube yeah I just give YouTube and register app before that copy this okay you need to install the Firebase npm package okay here paste that and click enter okay here in my case I already installed okay after that I'm going here down copy this this entire code okay enter this is the access key and something APK it's like that okay we are going to communicate with the Firebase using this key okay click continue to console yeah it's fine and also go here I already created a config.js file paste that here okay after that click the build and go to authentication I mean click that authentication it will navigate to this page here get started that okay and we are going to authenticate to Google Okay Google sign in okay so that I'm going to click the Google and here this enable this option and select here project support email okay here this is my email ID so I select that and click save okay it will save yeah Google sign in is enabled okay go to users okay here you can see login user email IDs okay and go to our vs code here I'm going to remove some unwanted code I don't want analytics and go here and remove that okay yeah this is fine after that I'm going to import I mean get Earth from Firebase slash auth okay and here get out okay also I'm going to Google Earth provider okay this is fine and copy this get Earth I don't want this Analytics and after this const ant guitar and I'm going to pause this app okay they get Earth after that I'm going to create accounts for provider provider is used to sign in copy that provider here type new and provider yeah this is fine and after that I'm going to export this Earth and provider okay I am exporting this and save this file and go to sign in okay here I'm going to import that exported file Athen provider from dot slash config okay name is config okay I'm going to use this exported files after that I'm going to import sign in with popup okay from Firebase Firebase slash odd okay yeah here sign in with pop up okay when you click the sign in button it will open on pop-up and you can able to select your email ID okay here I'm going to copy this go here yeah before that I need to create one button okay this is sign in with I mean Google okay here on click handle click copy that go here create one function const AME is handle click yeah I'm going to copy this sign in with pop-up I'm going to pass the auth provider dot then here I'm just click on data to get the sign in details okay and here I'm going to create one state okay const his name is yeah I just give value set value new state it's imported here initially the same empties okay here I'm going to copy this set value and pass the sorry pause the data dot user dot email yeah after that I'm going to create a local storage and I'm going to set the user email ID because if user is already signed in means we are navigate to the home page right so set item email and I'm going to set the data dot user dot email yeah I'm just set this value okay here I'm going to click on use effect yeah it's imported here okay here I'm going to sit every time this page is open means I'm going to set value set the value of local storage set I'm going to set the Google series email ID value okay dot get item here email yeah copy that and after this I'm going to paste that value and here if any data in the value means I'm going to navigate to Home pins home okay it means this is our home page okay I'm going to copy this home and go here yeah I paste that and I'm going to import that yeah it's imported here by close that page okay else I'm going to display the button okay okay go to browser here I refresh this page yeah we had we have a sign in with Google button Google's building is wrong sorry for this pulling mistake sorry I didn't notice it Google Okay click sign in with Google button will open pop-up and it will show now already used the email IDs I'm going to continue with this email address okay I'm going to click it yeah it is signed in and also we are navigate to home page and also go to Firebase and here initially I'm not getting any email IDs I'm refreshing this page yeah I got a logged in email ID okay okay and yeah here I want to display One log out button okay go here after that I'm going to create one button its name is log out create conflict okay here I'm going to create one I mean logout logout function after this const paste that value maybe yeah function name and here I'm just reset this local storage okay local storage Dot clear yeah I refresh this page local storages clicked okay however I mean I'm going to inspect boot application here our local Regis reset but if I click refresh wins it's back to this page but we need to reload our window Dot location Dot reload okay save this file okay go to browser here I refresh this page I'm going to inspect and go to application yeah here we don't have any email ID in our local storage click sign in with Google yeah it's signing signing in yeah you get a local search value email IDs navigate to home page okay now I'm going to click a log out your page is getting reloaded and back to sign in page okay and our local storage is also signed out okay I mean cleared okay yeah this is what I try to do in this video bye

Channel: Coding Comics

Views: 32,564

Keywords: google sign in react js and firebase, react firebase authentication and implement google signin, login with google api, firebase google authentication, react-firebase google sign in, how to authenticate with google using firebase in react, gogole signin in react js, login with google in react js, react-google-login npm, signin with google in react js, react firebase google authentication, how to connect firebase in react, signup with google in react, login with google in react

Id: 5IZdrh1kHHw

Length: 11min 36sec (696 seconds)

Published: Sat Nov 12 2022