DEV Community

Cover image for Add Google Login to your React Apps in 10 mins

Add Google Login to your React Apps in 10 mins

Sivanesh Shanmugam on June 27, 2020

As a client developer, Creating apps with authentication might be a tedious process. As we need to handle authentication in the server and mainta...
Collapse
 
kicksent profile image
Nick Trierweiler • Edited

This article is great! Thanks for sharing your example and this writeup! I personally would prefer code snippets over images but I am happy that you also shared the source code and I was able to get this working without too much trouble.

There is a confused sentence above which could use refactoring. "To make things work we need to make things work we have to add some additional cases in the Login component."

For others following this tutorial who get a failure message because of cookies try changing cookiePolicy={'single_host_origin'} to cookiePolicy='http://localhost:8000/' or whatever your localhost is. Adding the address in google wasn't enough. If I am mistaken please comment and I will try that too!

Collapse
 
sivaneshs profile image
Sivanesh Shanmugam

Thanks for your Feedback ❤ Sorry for the late response. And I changed that confused sentence.

Collapse
 
curiosaurus profile image
Pratik Patil

The article is Awesome but I would like a little help. we already have a logout button and how can I add this to it without making any change to the existing logout code which gets executed onClick of that button

Collapse
 
olsard profile image
olsard • Edited

Great! Thanks for sharing.
There is a little issue with google icon in /public folder.
It could be moved into /src instead

import GoogleIcon from '../assets/icons/google.svg';
<img src={GoogleIcon} alt="google login" className="icon" />

Collapse
 
hamzaalikundi profile image
Hamza Ali

Hey brother you teach tremendously,
bur i am facing an issue whenever I click on the sign i link Model box will open but in the console there is an error like this one

Login failed: res: {error: 'idpiframe_initialization_failed', details: 'You have created a new client application that use…i/web/guides/gis-migration) for more information.'}

and when I click on loin with google button it show a pop up of my system emails & when i select on the email it loads couple or seconds and then pop up automatically shutdown and gives an error in the console like this

Login failed: res: {error: 'popup_closed_by_user'}
error: "popup_closed_by_user"
[[Prototype]]: Object

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
sivaneshs profile image
Sivanesh Shanmugam • Edited

Yeah, I found them after some hours of debugging and found this helpful code. Thanks for your advice I'll follow them in forthcoming blogs. But actually, It's not your code. I copied the snippet from github.com/anthonyjgrove/react-goo... which he posted two months before your comment on the thread.

I don't know the reason why you did copy the same code and posted it in the same thread, and claiming for a reference. 😂

Collapse
 
akashshyam profile image
Akash Shyam

Great article! An absolute life saver. Could you expand a bit about using google login with our backend API. So in most applications, you have a custom contact form plus the social logins. I'd like to save the data like email, password etc to my backend(Mongoose + NodeJS).

I could directly just send an API call to the backend in the onSuccess method and register the user in my DB. Is this the correct approach?

Collapse
 
sathishkumar18594 profile image
sathishkumar18594

Thanks for this article!!

I'm getting "Failed to retrieve certificates: request to googleapis.com/oauth2/v1/certs failed, reason: self signed certificate in certificate chain" error message when I send google's token id to my mock API for further validations.

Also noticed the token id does not have valid signature.

Collapse
 
dilipvaliya99 profile image
Dilip-Valiya99

refreshTokenSetup function is not working b'coz if someone will refresh page after login then setTimeOut() will be cleared also refreshTokenSetup function is only run after on success can we call it after expiry time of oath token?

Collapse
 
kiana51 profile image
Kiana-Alize Diaz

Hi under what file would we place server side verification?

Collapse
 
sivaneshs profile image
Sivanesh Shanmugam

Placing it in a middleware would help.

Collapse
 
pitmcdonald profile image
Pit McDonald

Can you please specify how to do this?

Collapse
 
zaytt profile image
Ivan Chavez Escamilla

Great tutorial!
One thing though, I believe the last image is the same as the one for LogoutHooks.
There's no image for the Server Side verification code

Collapse
 
sivaneshs profile image
Sivanesh Shanmugam

Thanks. Changed them

Collapse
 
manish_kumar_e1caeac9d79a profile image
Manish Kumar • Edited

Hi Sivanesh, This Article is very helpful for me, I was using this same code for google auth setup but I am getting one error - Token is getting expired after 1 hour. I have used refersh token setup also , but didn't get success . Error - "Uncaught exception 'Google_Auth_Exception' with message 'Token used too late, 1410345101 > 1410341783: " Can you please help me on this... Thanks @sivaneshs

Collapse
 
manish_kumar_e1caeac9d79a profile image
Manish Kumar

@sivaneshs please help

Collapse
 
leoigel profile image
leoigel

i got this error :
Uncaught qw {message: "Missing required parameter 'client_id'", xM: true, stack: "gapi.auth2.ExternallyVisibleError: Missing require…tXYzGQD7-oxLsteJNmIlmx3Ysqg/cb=gapi.loaded_0:1:15"}

Collapse
 
anoopvm profile image
anoopvm

I ended up with this because of wrong case. I used clientid instead of "clientId"

Collapse
 
pragati9 profile image
Pragati Varshney

Hey,
Its a great article for beginners like me.
But, I am facing a challenge with log out, cookies and local storage are not getting cleared on log out and when I try to login the second time it auto-logins.
can you please guide me how to fix or what could have gone wrong?

Collapse
 
codeuiandy profile image
codeuiandy

Thanks @sivaneshs this was very helpfull and save me the time of debuging and all

Collapse
 
michelleann815 profile image
Michelle Ann Terrazas

Thank you so much for this, it helped me immensely with my task for my project last week! :)

Collapse
 
kalinpmn profile image
Kalin Panmanee

I'm trying to finish coding on the server side verification part but still struggle with a this problem. "TypeError: jwt.split is not a function " . Does anyone can help with this issue? By the way, I already got the token ID.

Collapse
 
more03625 profile image
Rahul More

How can i loader the google login button Until google send any response?

Collapse
 
sudharsankss profile image
Sudharsan Srinivasan

This is just perfect article for someone like me who is really new to UI world.
Sivanesh shamnugam is the my saviour today.

Collapse
 
joedotnot profile image
joedotnot • Edited

Can you do other articles for login with Facebook, Github, Twitter, etc :)

Collapse
 
refruity profile image
Anton Istomin

Nice article. But it got me thinking: what about non-pure setTimeout and whether we can (or have to) extract it using redux-saga?

Collapse
 
sdroop profile image
sd-roop

Thank you Shivanesh. On Logging in, I get a failure "popup_closed_by_user". Please advise.

Collapse
 
hima_khaitan profile image
Himanshu Khaitan

Hey! I am stuck with a mern stack auth problem. Can you help..?
I am really stuck with auth stuff

Collapse
 
chayagolo1 profile image
chayagolo1

Hi
This is amazing and works as wxpected in http.
But when i changed the http protocol to https i got this error:
"redirect_uri_mismatch".
how can i resolve it?
thank you so much!!

Collapse
 
pancongying profile image
Congying

Thanks, it works fine for me. But I'm wondering how to get user info in another react components. Thanks in advance.

Collapse
 
sivaneshs profile image
Sivanesh Shanmugam

You can add it in a React context and use it anywhere inside your components.

Collapse
 
bcapathshala profile image
Manoj Kumar

I'm happy with this article sir thanks to you

Collapse
 
warythebutterfly profile image
Wary

The package react-google-login was deprecated!

Collapse
 
pratikpdw profile image
Pratik Wadekar

Can someone help me know how do I persist the login with react-google-login?

Collapse
 
keiru profile image
keiru

Thanks,
But I got this error.
{error: 'popup_closed_by_user'}
Why?

Collapse
 
jules_grenier profile image
Jules Grenier

This is exactly what I was looking for!! Thank you so much! ❤️🦄

Collapse
 
namansamra profile image
namansamra

hi I have a query like if i have a database and then user tries to login with google then how can I find the user from the database .

Collapse
 
sivaneshs profile image
Sivanesh Shanmugam

With the token obtained, you can extract the user's information in which you can get email, Google user ID etc. With that I think you can find the user.