Whenever you play a game or go to some site, 100% of the time you will have to log in to your account before moving on, handing out your account name and password to confirm your identity. Unaware that someone may be spying on you for your account information, this can lead to accounts being stolen with your personal information being deleted, sold online, or posted on social media, making you hesitate whenever you make an account. Luckly Google released an authentication application to calm your fear. Google Auth, or Oauth 2.0, will allow you to log in and create an account without having to put in your password or email account. This is done by having Google create an access token that will be sent to the account you’re trying to login to, and say, “Hey this this is the account created by this use so let her/him in”.
Fun facts
Oauth began development in November 2006, when later in 2007 a small group of implementers was created. The Group discussed ideas and proposed drafts for the Oauth application. Soon in July of the same year, google heard about Oauth and showed an interest in supporting the project. In April 2010 the Ouath 1.0 was released, with Oauth 2.0 being released two
years later in October. This application is free to use, but you need to have a Google account to use it. So let’s look at where to get started.
Creating a Google Auth project
To use Oauth 2.0 you will need to create a project on Google Cloud.
Go to this site https://console.cloud.google.com/ Then, if you don’t have any project created, you should see a new/create project. If not, then next to the Google Cloud symbol you should see a button with three circles. Click it and you should see a new/create project button.
After you click it, it will ask for a project name and organization name. You can skip the organization name.
When your project gets created, you should be sent to your project folder. Go to the search bar and search for Oauth consent screen. It should be under API and services.
After clicking you should see a screen asking how you want to configure your app, elect external (allow you to use test user with any account), then click create it.
You will then see another screen. It will ask you to name your app, user support email, and developer contact email. Then click save and continue.
Next you will see a button called add or remove scopes. Click it and another screen will appear with checkboxes. Check the boxes that say auth/user/email and auth/user/profile. Press update then click save and continue.
Next it will ask you to add a test account. This could be any Google regular account. But if you don’t want your project to mess with something on one of your Google accounts, just create a new Google account for testing. But be careful because the account you added will be the only one able to log in. Then click save and continue.
Next you will see a summary screen which you can skip and then you just need to click back to dashboard.
When you get to the dashboard screen, under API & service, click credential. Then click Create credentials. Finally, click Oauth client ID.
It will then ask for a link to where your web application is being hosted (example: http://localhost:3000). Pass it in the authorized JavaScript origins and authorized uris, then click Create.
You should then get a client ID and secret. Save them somewhen like a Google Doc file or text file.
Now it’s coding time.
If you’ve never used react before, here is a link to a blog I did that talks about the basics of react https://dev.to/gagecantrelle/the-basics-of-react-57a1 . If you don’t feel like making a react application from scratch, run this command in an empty folder in the terminal npx create-react-app. Then add the name of the file you will create npx create-react-app client. Npx should be installed when you install node same as npm. If you’re not sure, run the command npx –v, this will show what version of npx you have. Then after all that cd into the folder you create (client) run npm install gapi-script then npm install react-google-login. Next, create a component folder that holds two js files login and logout. Then create a function for login and logout with a const holding your ClientID you got when making your Google project.
Import { GoogleLogin } from ‘react-google-login’;
Const clientId = ‘your client id’;
Function login(){
Return();
};
Export default loging;
Import { GoogleLogout } from ‘react-google-login’;
Const clientId = ‘your client id’;
Function logout(){
Return();
};
Export default logout;
Next for your login and logout function pass these in return, this code will go and try to log in you Google account
(
<div id=”signInButton>
<GoogleLogin
clientId={clientId}
buttonText=”login”
onSuccess={onSuccess}
onFailure={onFailure}
cookiePolicy={‘single_host_origin’}
isSignIn={true}
/>
</div>
)
(
<div id=”signInButton>
<GoogleLogout
clientId={clientId}
buttonText=”login”
onSuccess={onSuccess}
/>
</div>
)
Now that we have that setup, we then need to create an onScuccess and onFailure function. These functions will take in a parameter, For onSuccess it takes in an object that holds a profileObj key. which like the name implies it an object that holds some information from your google account. for onFailure it takes in the same object as onSuccess.
console.log(‘hey it worked”, res.profileObj);
};
onFailure(res){
console.log(‘error: cant log in’, res);
};
Finally, let’s add our login and logout function to the app.js/app.jsx file or the main file you’re using for your React project. In your app file, you’ll import both login and logout functions, useEffect from react, and gapi from the gapi-script we installed. Along with your client ID. The useEffect hook allows you to fetch data, directly updating the dom, and used it as a timer for side effects in your component. Then inside of your app call the useEffect and pass it a function called start that runs gapi.clent.int function. That takes in an object that holds the clientId and scope, the scope is empty unless you’re using some API’s alongside Google auth. Then run the start function with gapi.load function. After that, put the imported login and logout functions inside the return div.
Import login from ‘./components/Login’;
Import logout from ‘./components/Logout’;
Import { useEffect } from ‘react’;
Import { gapi } from ‘gapi-script’;
Const clientId = ‘your client id’;
Function App(){
useEffect(() =>{
function start(){
gapi.client.init({
clientId: clientId,
scope: “”
});
};
Gapi.loade(‘client:auth2’, start)
});
Return(<div className=”app”>
<login />
<logout />
</div>)
}
After that run your react application and test it out. You should see a login and logout button. Click login then you should see a Google select account screen pop up. Select the test account you pick when setting up your project in Google Cloud, and that it’s. Click the inspect button to check your console log for the login function and you should see a console log with an object containing the information about that account minus the password. Then when you click the logout button you’ll be logged out.
Also, like I said in the beginning google auth creates an access token for other sites to use, instead giving them your password and email account. To get that generated token, use this command in the code block. Remember this token is not permanent, it has a time limit before it goes bad.
So now that you know about Google auth and how to use it, you probably see how useful it is. Allowing you to create accounts connected to a Google account, without taking in personal information like a password. also Allowing users to see that the account they are trying to make, won’t ask for a password or email account. Making the user feel safe knowing that their personal information is safe. Another good thing about Google auths is that it is fast to log in with it, removing the time it takes to put in a password and account name. In conclusion, using Google auth will be a great start for making your website.
links used for this blog:
https://www.youtube.com/watch?v=bOd4eFqIg00&t=323s
https://en.wikipedia.org/wiki/OAuth
https://developers.google.com/identity/protocols/oauth2
https://www.youtube.com/watch?v=ZDuRmhLSLOY
https://www.youtube.com/watch?v=HtJKUQXmtok
