Learn to Code via Tutorials on Repl.it!

← Back to all posts
How to make a google login system in 5 minutes
h
RohilPatel (1534)

How to make a google login system in like 5 minutes...

You need:
1. A google account
2. A website not on localhost
3. Patience
4. Html, css, js knowledge

Step 1: Set everything up:

Go to this link: https://developers.google.com/identity/sign-in/web/sign-in and follow the instructions given according to what they say. Copy and paste all the links, but DO NOT WORRY ABOUT CONFIGURING A PROJECT YET

Include the following code first:

<script src="https://apis.google.com/js/platform.js" async defer></script>

To create a Google Sign-In button that uses the default settings, add a div element with the class g-signin2 to your sign-in page:
<div class="g-signin2" data-onsuccess="onSignIn"></div>

After you have signed in a user with Google using the default scopes, you can access the user's Google ID, name, profile URL, and email address.

To retrieve profile information for a user, use the getBasicProfile() method.

function onSignIn(googleUser) {
  var profile = googleUser.getBasicProfile();
  console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
  console.log('Name: ' + profile.getName());
  console.log('Image URL: ' + profile.getImageUrl());
  console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
}

You can enable users to sign out of your app without signing out of Google by adding a sign-out button or link to your site. To create a sign-out link, attach a function that calls the GoogleAuth.signOut() method to the link's onclick event.

<a href="#" onclick="signOut();">Sign out</a>
<script>
  function signOut() {
    var auth2 = gapi.auth2.getAuthInstance();
    auth2.signOut().then(function () {
      console.log('User signed out.');
    });
  }
</script>

Step 2: configure a project

this can be confusing, as it is really. Go to: https://console.developers.google.com/ . Basically, you make a new project, and somewhere it will ask for api related stuff. Search for "Google+ Api" and enable it. Then create some credentials, with OAuth client. This will say you need to complete something else first, so do that but don't upload a picture for it, or google will have to verify it. Then, you can click credentials again, and do exactly above till you see another set of questions, where you answer them. Origin and redirect for this project are https://google-api-installation.rohilpatel.repl.co/ , since I didn't want my data to go to another page.

Step 3: finish it all

Replace the client Id with the meta tag they gave you earlier on (one of those html tags), and if you did everything that the first website did, you should be able to login...except that you won't see anything since you need to write to the DOM!!!

If you need the notes:
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">

LEAVE A COMMENT BELOW IF YOU ARE EXPERIENCING TROUBLES. ALSO, THIS SITE WON'T WORK ON HTTP, ONLY HTTPS!

Comments
hotnewtop
Squirrel777 (138)

Mines says script error.
Error 400: redirect_uri_mismatch

The Google+ API is enabled, and it still does not work!

techgeek680 (73)

ooof I'm gonna have to tell my school someone hacked their chromebook...jk cool!

RohilPatel (1534)

Lol. And this is completely secure since Google gives you the information. @techgeek680

AncientBison (67)

Is your logo a leaf or killer queen black?

PavanBaddi (1)

This post helped me to for setting up google login in my application. Thanks

ZestyLad (11)

Thanks for this, it could really help me with my future projects.

edgyneer (4)

Nice job mate, thanks for sharing this with us.

RohilPatel (1534)

No problem man! Just as any questions if u want below. @edgyneer087x

CoolCoderz133 (2)

thanks,this is a lifesaver, IL be sure to leave a shoutout in my website,Again thanks so much,
-CoolCoder

RohilPatel (1534)

Hee hee lol. Do you have discord? I can help guide you more if you want! @CoolCoderz133

RohilPatel (1534)

Will do, thanks...idk why I'm seeing this now lol @CoolCoderz133

RohilPatel (1534)

This one so people learn how to do it, and the other one to share it.Since more people will see it there than here, although I'm sort of wrong. @theangryepicbanana

RohilPatel (1534)

Ok lol, ur not gonna take any of them down, are u? @theangryepicbanana

theangryepicbanana (1692)

@RohilPatel No. After looking them over, they aren't repeated posts so they're both fine :)

RayvelArjoon (88)

This is a wonderful and accurate representation of what proper programming looks like. I've taken a look at some of your work, and it's pretty good. Have you done anything in C++ yet? I'd like to figure out how to finish my FPS shooter game for my Ubisoft interview. Where can I learn how to do something extraordinary things with C++ back-end?

RohilPatel (1534)

I don't know much about c++, and thanks for my work compliments! Can I get your discord? That might be a better place to talk. Thanks! @RayvelArjoon