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 (1583)

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.

    <script src="https://apis.google.com/js/platform.js" async defer></script>
    <meta name="google-signin-client_id" content="YOUR_CLIENT_ID">
  7. Add the Google Sign In Button:

    <div class="g-signin2" data-onsuccess="onSignIn"></div>
  8. 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.

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?

Comments
hotnewtop
Warhawk947 (524)

instructions unclear: i now own google

wgyt (2)

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

TANMAYBAGADIA (55)

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

DillonB07 (11)

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

LoganBryant (0)

This is awesome. Great Work

codingjlu (240)

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

codingjlu (240)

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

Whippingdot (660)

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

RohilPatel (1583)

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

Whippingdot (660)

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

RohilPatel (1583)

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

RohilPatel (1583)

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

RohilPatel (1583)

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

DynamicSquid (4929)

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

Whippingdot (660)

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

DynamicSquid (4929)

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

Warhawk947 (524)

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

FlaminHotValdez (694)

@DynamicSquid copied from vandesm?

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

DynamicSquid (4929)

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

RohilPatel (1583)

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

FlaminHotValdez (694)

@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 (1583)

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

RohilPatel (1583)

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

Warhawk947 (524)

@RohilPatel hmm yes now i am at 1500 cycles