Login With Google Using React & Node - MERN Auth 2.0

what's up guys welcome to my channel today we're gonna learn how to integrate google authentication in monsta without wasting time let's see a demo of what we're gonna be building today as you can see this is our login page built with react by clicking on sign in with google button we can log in with our google account but before that let's see how our signup page is gonna look like i hope you like this ui let's sign up with our google account by clicking on this button it will prompt all our google accounts select which do you want to use and then that's it we are logged in as you can see now we can access profile picture username and email of logged in user let's log out by clicking here that's it guys this is the project we're gonna be building in this video before we continue those who haven't subscribed to my channel please subscribe guys it gives me a motivation to make more quality content like this video so that youtube algorithm can suggest other developers who are looking for the same feature so without wasting time let's jump into our vs code and get started to integrate google authentication in our application we gonna use password module which is a middleware for node.js that makes easy to implement authentication and authorization for google authentication we need a strategy click on strategy link and search for google we're gonna use passport google worth 20 because lots of people has downloaded it if you have encountered any error please refer to this doc which is very good actually but to use google strategy we need to have google client id and secret key go to google cloud website and create your account and then in apis and services tab first create oauth's content screen and then in credential tabs click on create credentials and select oauth client id application type will be web application at authorized redirect url add url http localhost 3000 and add one more url localhost idit or google callback then click on save button now copy your client id secret id and save it somewhere or download json file now we have our client id and secret id let's open up a command prompt first let's create a folder named google earth and then navigate into it in this folder create a folder named server and then navigate into it here we gonna initialize this project with npm with default values after initializing let's install dependencies we need in this project which are express nodemon course dot env passport password google oauth 2-0 cookie session after installing dependencies open this project in vs code in root directory create a file named server.js then in package.json change main file to be server.js in scripts remove test scripts and add start script nodebond server.js save this file and open server.js file in this file let's import dot env module which we gonna use for accessing environment variables then import express module course module password module and cookie session module call express function and save its instance in app variable we're gonna use cookie sessions here i'm gonna name it session keys will be cyber wool and max edge will be this much then we'll be using password and initialize it and we also use passport session after that we use course origin will be our front-end url methods which we gonna allow are get push put and delete and credentials are required so set it to be true define port variable which can be environmental port or atit then we listen our app on port and console log listening on port save this file and in root directory create dot env file in this file add your google client id google secret id and client url which in my case i am running it on port 3000 after adding details save this file and create passport.js file in root directory in this file import strategy from passport google or 20 module and save its instance in a google strategy variable then import password module in password.use add new google strategy inside that object add your client id client secret callback url and scope for callback response i am just gonna return profile details we are using cookie sessions so we need to serialize user and dc realize user let's save this file now and import it in server.js file after importing create routes folder in root directory inside that folder create earth.js file in this file import router from express module and import passport module here also let's add gate api with endpoint google callback and add password dot authenticate and add google init if it success we redirect to home url if it's failure we redirect to login field route we haven't created that route yet let's create now it's gonna be a gate api with endpoint login slash failed we just gonna return with status code of 401 and json object error to be true message will be login failure let's add a git api with endpoint login success which we call it from frontend to check whether the user logged in or not password will verify user by comparing session from front-end and back-end if request.user does not exist we return with response with status code of 403 and json object will be error to be true message will be not authorized if user exists we return response with status code of 200 and json object will be error will be false message successfully logged in user to be request dot user we gonna add another gate api with endpoint slash google and add password dot authenticate method inside that provide google and scope let's add last api with endpoint slash logout in that function call request.logout method and then redirect to client url after adding all these apis let's export this router and save this file in server.js import routes and use them at endpoint slash earth after configuring routes let's save this file okay guys our backend part is completed now let's focus on front end open up a command prompt inside our project folder run command npx create react app i'm naming it client you can name it anything you want it's gonna take a while to create so i will fast forward video after creating react application successfully let's navigate into it here we gonna download some dependencies we need in this project which are excels and react router dom after installing dependencies open this project in vs code before we jump into writing code let's remove unwanted files and code first now our project looks clean let's create dot env file in root directory in this file let's add our backend url which in my case i am running it on port 8080 make sure to append react app for every environment variable you use if you want append then you can't access environment variables after adding api url save this file and open index.js file in this file import browser router from react router dom then wrap it around app component after making changes save this file and open index.css file in this file import poppins font style from google fonts check out google font's website you will find this url or copy it from github repo add font family to be poppins and sans serif save this file now then in source directory create folder named pages inside that folder create login folder inside that folder create index.jsx file and styles.module.css file in this file import link from react router dom then import styles from styles.module.css create a function which returns development and name it login and don't forget to export it inside the div add a heading login form and add div with class name form container inside the div add two more divs with class names left and right in left div add image element and provide login image which located in public folders inside images folder you can download these pictures from github repo or use different pictures after adding pictures inside right div add heading members login then add email input and password input also add login button and or text in p tag [Music] after that add google button on click event call google earth function which we haven't created yet then at last add this text in p tag by clicking sign up text we will redirect to sign up page without reloading page that's the specialty of link component let's create a function named google earth inside that function call window.open method and pass our callback url i want to show google prompt in same page that is why i am setting self that's it guys save this file now sign up page is almost identical to login page so without wasting time let's copy this whole code in pages folder create signup folder inside that folder create index.jsx and styles.module.css files in index.jsx paste the whole code which we have copied from login page let's change its name to sign up heading will be signup form image will be signup.jpg and change all text to signup form heading will be create account we need extra element here for username change type to password for password input change login to sign up button google button will be sign up with google change text to already have account and let them navigate to login page that's it guys save this file let's copy signup component code in pages folder creates home folder inside that folder create index.jsx and styles.module.css files in index.jsx paste the code we have copied from signup page we don't need link in this component so remove it change function name to home change google earth function to logout we will pass user details from app.js as params user details save user details in a variable here we gonna call logout api not callback change heading to home in left div image will be profile.jpg and alt will be profile change form heading to profile set default value for username value we get from user details and also set default value for email also remove password input we don't required here remove this whole code which we don't required change signup button to logout button on click event call logout function here we also show picture of user so copy the image element from above class name will be profile image and source will be user dot picture let's export home component everything looks fine let's say now let's open up app.js file in this file import router route and navigate from react router dom module then import use effect and use it from react module import xus from xios import home component then import login component and signup component create state for user and set default value to be null next create get user async function and add try catch block in it save login success api in a variable called url call gate api with xcos and don't forget to add with credential to be true set user details in a user state if any error occurred while calling api console log the error call get user function in use effect hook and add class name to be container for div inside the div add route stack inside routes configure home route with routes component set path and we would only allow users if they are authenticated or else they redirect to login page exactly like home route configure login route set path and if they are authenticated redirect to home page or else show login page signup route is also same as login route after configuring these routes save this file let's open up a app.css file and add these styles after adding the styles save this file that's it guys we have completed our project successfully let's open up two command prompts one for client and one for server first let's start our client application with command npm start until it start build let's start our back end with same command npm start okay our back end is running successfully on port 8080 front end is also running successfully on port 3000 open localhost 3000 in browser to see our project i hope you have learned something new today guys if you like my work like this video and subscribe to my channel you

Channel: CyberWolves

Views: 105,606

Keywords: login with google, login with google php, google api, mern stack, mern project, mern stack project, google oath, google oauth node js, login with google in mern stack, passport node js, google node js, authentication in mern stack, mern auth, oauth 2.0, passportjs, google authentication, in node js, in react js, google integration, mern tutorial, sign in with google, google oauth 2.0 tutorial, react project, node js tutorial, login with google account using javascript

Id: pdd04JzJrDw

Length: 18min 0sec (1080 seconds)

Published: Wed May 25 2022