Skip to content
← Back to Community
How to make a google login system in 5 minutes (updated)
Profile icon
RohilPatel

Google Api Usage and Setup Tutorial

A while back I had made a tutorial on how to use the google api. It had recieved a lot of attention and I decided it might be worthwhile to look back at it again and help clear the confusion.

Prerequisites

  • A google account
    • In most cases must be personal
    • Cannot be managed by anyone except you
  • A good understanding of JavaScript
    • Application of functions

    • Usage of common keywords like "let"

  • Fluent in HTML
    • Know where and how to import a CDN into your project

Step 1: Prepare the API

  1. Head over to the Google Cloud Platform, and sign in if necessary.
  2. Click "Create Project"
  3. Change "Project name" to something suitable with google. Filling out the organization and location is not required, but if you want, go ahead and fill it out.
  4. Create the Project, and then close the tab that you did the first few steps on

Step 2: Get Credentials

  1. Head over to the Google Cloud Platform again and select your project. On the left hand side, there will be an item called "Credentials". Open it.

68486C9A-B328-4A5B-82D4-D7A2F3A5B0E5

  1. You will see a warning symbol telling you to configure the OAUTH consent screen. MAKE SURE NOT TO CONFIGURE THE ICON OR GOOGLE WILL NEED TO APPROVE THE REQUEST.. You also only need to fill out the first tab.
  2. Once done, go back to the credentials tab, and near the top you should see a button called Create Credentials. Select OAuth Client ID.
  3. Assuming this is a website, select web application. If this is a website using only the frontend, the uri origin and authorized redirects should be the same, since it doesn't really matter.
  4. There are 2 specific types of Uri you need to configure for repl.it
* [project]**.**[username].repl.co
* [project]**--**[username].repl.co (note: both of these urls point at the same website)

6. Google will give you your client ID, so take note of that

Step 3: The Actual Fun Stuff

  1. In your HTML code, add the following meta and script tags, replacing the content field with your id.
<script src="https://apis.google.com/js/platform.js" async defer></script> <meta name="google-signin-client_id" content="YOUR_CLIENT_ID">
  1. Add the Google Sign In Button:
<div class="g-signin2" data-onsuccess="onSignIn"></div>
  1. Add the JavaScript Code to make the button actually work. profile is being logged to the console, so look out for that.

function onSignIn(googleUser) { const profile = googleUser.getBasicProfile(); console.log(profile.getId()); //user ID console.log(profile.getName()); // name of user console.log(profile.getImageUrl()); //url of pfp console.log(profile.getEmail()); //email (if you asked for permission) }

And woohoo, it now works! If you don't have it working, below are a couple troubleshooting quick techniques. If you don't see it below, leave a comment with images below.

88589C04-61A1-4065-BF4F-78DF0EB4C2FF

Troubleshooting

  • Error 400

    • Make sure the Uri is correct. Look at the instructions above to get help.
    • You did not add a custom domain uri, or something that google cannot detect as your website. Easy fix, go to the portal and fix it.
  • Data is not loading

  • Duh, you forgot to change the copy pasted code from me, didn't you?

Voters
Profile icon
RohilPatel
Profile icon
MalikaiJacobson
Profile icon
AngelPena4
Profile icon
NFadhlurrahman
Profile icon
Yoplayer1py
Profile icon
Raphael15
Profile icon
clownin
Profile icon
JerryTheMouse
Profile icon
TonyOneil
Profile icon
pepss
Comments
hotnewtop
Profile icon
Navinor

instructions unclear: i now own google

Profile icon
RohilPatel
Profile icon
[deleted]

This tutorial is really good, but safe browsing isn't liking it at all :P
image

Profile icon
RohilPatel

Lmao that's funny @wgyt

Profile icon
TANMAYBAGADIA

Please make one tutorial for firebase google authentication pls :). btw nice one dude. (Hope you remember me that who i am?)

Profile icon
DepthStrider03
Profile icon
RohilPatel
Profile icon
prolomic
Profile icon
ddiaknowlege

Wow

Profile icon
RohilPatel

Ikr u like it? @ddiaknowlege

Profile icon
yeetboy123

@RohilPatel
please look at my other post

Profile icon
yeetboy123
Profile icon
DillonB07

Not sure that this is supposed to happen?
It is your demo code embedded in the post that I am using.
Screenshot 2021-05-27 at 18.04.18

Profile icon
prolomic

works

Profile icon
RohilPatel

Well that's good to hear @prolomic

Profile icon
prolomic
Profile icon
LoganBryant

This is awesome. Great Work

Profile icon
codingjlu

I think you should shorten the name of your repl. Chrome flags too long domain names.

Profile icon
RohilPatel

What's the max @codingjlu

Profile icon
codingjlu

@RohilPatel I don't know... but the shorter, the less suspicious.

Profile icon
Whippingdot

Thank you for creating yet another tutorial I won't understand. Very kind you are!!

Profile icon
RohilPatel

Well is there something I can explain that could help you understand? @Whippingdot

Profile icon
Whippingdot

welp first of all - the most important question - what is it useful for? @RohilPatel

Profile icon
RohilPatel

It's useful if you want to make an auth system without making it ur self. Making is yourself can be risky at a young stage in programming if u know what I mean @Whippingdot

Profile icon
Whippingdot

Ya I think so... @RohilPatel

Profile icon
RohilPatel

Ok nice :) @Whippingdot

Profile icon
RohilPatel

Just saying, I've got a project that'll make people remember me again lol coming soon @Whippingdot

Profile icon
Navinor

[...]

Profile icon
RohilPatel

I'm a little confused..l. @Warhawk947

Profile icon
DynamicSquid

@Warhawk947 Hey, I've edited your comment as it appears you had a stroke with Ctrl + V :)

Profile icon
RohilPatel
Profile icon
Whippingdot

the most funniest and best mod ever! @DynamicSquid

Well I forgot the name of one mod though but he was super angry when someone did someone and he started calling them names so he might be funnier...

Profile icon
RohilPatel

Not vandesm @Whippingdot

Profile icon
Whippingdot

might be him (probs is) @RohilPatel

Profile icon
RohilPatel
Profile icon
Navinor

@DynamicSquid yes i did

Profile icon
DynamicSquid

@Warhawk947 Hi! I haven't seen you in a while :) What projects have you been working on?

Profile icon
Navinor

@DynamicSquid a puzzle/maze game that i'm procrastinating on

Profile icon
RohilPatel
Profile icon
FlaminHotValdez

@DynamicSquid copied from vandesm?

"I've unlisted this post as it appears you had a stroke while writing it"

Profile icon
DynamicSquid

@FlaminHotValdez Nope. Vandesm actually copied that from a previous mod lol. But it's just standard for mods to say that :)

Profile icon
RohilPatel

Dang u must be flaming hot after seeing that one 😂 @FlaminHotValdez

Profile icon
FlaminHotValdez

@RohilPatel

I'm always flaming hot!

I like setting myself on fire. Don't worry it doesn't hurt, perks of being a son of hephaestus

Profile icon
RohilPatel
Profile icon
RohilPatel

Ok wait a minute that finally made sense in my head......those were some good books, just saying lol @FlaminHotValdez

Profile icon
Navinor

@RohilPatel what did i start xD

Profile icon
RohilPatel

A rebellion against Rohil. I've successfully tripled your cycles with this post @Warhawk947

Profile icon
Navinor

@RohilPatel hmm yes now i am at 1500 cycles

Profile icon
RohilPatel
Profile icon
Coder100

sheeeeeeeesh

Profile icon
RohilPatel

SHEEEEEEEEEESH @Coder100

Profile icon
Whippingdot

ShEeEeEeEeEeEeEeShLy uNuNdErStAnDaBlE @RohilPatel

Profile icon
RohilPatel
Profile icon
Navinor
Profile icon
[deleted]