Learn to Code via Tutorials on Repl.it!

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

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.

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.

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!

Voters
Code1Tech
GameDev46
Corus
ItzjakMeirMoss
DREWNOLT
Squirrel777
TheNethrRaven
Leroy01010
dfnk
techgeek680
Comments
hotnewtop
Squirrel777

Mines says script error.
Error 400: redirect_uri_mismatch

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

RohilPatel

I might make a tutorial that will explain all of this in greater detail @Squirrel777

MayankSK44689

@Squirrel777 It doesn't work in the replit itself. Open your website link in the browser. It worked for me that way because I had the same error.

[deleted]

Do you need a credit card or just a Google cloud account to use Google oauth?

RohilPatel

Just a normal account would work @SharpCodeDev

techgeek680

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

RohilPatel

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

techgeek680

ok good! @RohilPatel

RohilPatel
AncientBison

Is your logo a leaf or killer queen black?

RohilPatel

Let's just call it a leaf @AncientBison

PavanBaddi

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

RohilPatel

No problemo! @PavanBaddi

ZestyLad

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

RohilPatel
edgyneer

Nice job mate, thanks for sharing this with us.

RohilPatel

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

CoolCoderz133

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

RohilPatel

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

CoolCoderz133

@RohilPatel Yeah WyattGowing#3060

RohilPatel

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

CoolCoderz133

@RohilPatel yes im Mr.Wyatt#3622

mertocak

Very good, thank you.

RohilPatel

No problem! @mertocak

theangryepicbanana
RohilPatel

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

theangryepicbanana

@RohilPatel Ah ok. Just thought I'd ask

RohilPatel

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

theangryepicbanana

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

RohilPatel

ok thank you @theangryepicbanana

RayvelArjoon

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

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

RayvelArjoon
RohilPatel

Friend me: RohilPatel#4864 @RayvelArjoon

RohilPatel

@SilentShadowBla here you go!

SilentShadowBla
RohilPatel

Get on discord @SilentShadowBla