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