Learn to Code via Tutorials on Repl.it!

← Back to all posts
How to make a google login system in 5 minutes (updated)
h
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.

  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)

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

    Step 3: The Actual Fun Stuff

  6. In your HTML code, add the following meta and script tags, replacing the content field with your id.

  7. Add the Google Sign In Button:

  8. Add the JavaScript Code to make the button actually work. profile is being logged to the console, so look out for that.

    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.

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
NFadhlurrahman
Yoplayer1py
Raphael15
clownin
JerryTheMouse
TonyOneil
wgyt
pepss
OldWizard209
Iaikidoka
Comments
hotnewtop
Warhawk947

instructions unclear: i now own google

RohilPatel

Clearly @Warhawk947

wgyt

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

RohilPatel

Lmao that's funny @wgyt

TANMAYBAGADIA

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

DepthStrider

google must really hate you

RohilPatel
prolomic
ddiaknowlege

Wow

RohilPatel

Ikr u like it? @ddiaknowlege

yeetboy123

@RohilPatel
please look at my other post

yeetboy123

Bruh this happened:

DillonB07

Not sure that this is supposed to happen?
It is your demo code embedded in the post that I am using.

prolomic

works

RohilPatel

Well that's good to hear @prolomic

prolomic
LoganBryant

This is awesome. Great Work

codingjlu

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

RohilPatel

What's the max @codingjlu

codingjlu

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

Whippingdot

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

RohilPatel

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

Whippingdot

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

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

Whippingdot

Ya I think so... @RohilPatel

RohilPatel

Ok nice :) @Whippingdot

RohilPatel

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

Warhawk947

[...]

RohilPatel

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

DynamicSquid

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

RohilPatel

Looooool @DynamicSquid

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...

RohilPatel

Not vandesm @Whippingdot

Whippingdot

might be him (probs is) @RohilPatel

RohilPatel

Indeed @Whippingdot

Warhawk947

@DynamicSquid yes i did

DynamicSquid

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

Warhawk947

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

RohilPatel
FlaminHotValdez

@DynamicSquid copied from vandesm?

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

DynamicSquid

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

RohilPatel

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

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

RohilPatel

Like Apollo @FlaminHotValdez

RohilPatel

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

Warhawk947

@RohilPatel what did i start xD

RohilPatel

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

Warhawk947

@RohilPatel hmm yes now i am at 1500 cycles

RohilPatel
Coder100

sheeeeeeeesh

RohilPatel

SHEEEEEEEEEESH @Coder100

Whippingdot

ShEeEeEeEeEeEeEeShLy uNuNdErStAnDaBlE @RohilPatel

RohilPatel
Warhawk947