Allow users to logon to my site with Google account, without 3d party cookies

Question

I've been following the really simple instructions here ("Integrating Google Sign-In into your web app").

<script src="https://apis.google.com/js/platform.js" async defer></script>
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
<div class="g-signin2" data-onsuccess="onSignIn"></div>

Although it does work in Chrome 83, I get warnings in the JavaScript console about third party cookies. And indeed, when my users, some of whom have third-party cookies disabled, try the Login button, it flashes a window and nothing happens.

In the documentation under Troubleshooting, it says "If many of your users have this feature enabled ... another workaround is to implement server-side OAuth 2.0 flows."

OK. So what do they mean by server-side OAuth 2.0 flows?

(FWIW my app is a React single page app).

Answer 1

There's general information at https://developers.google.com/identity/protocols/oauth2/web-server. Here's one way to do it:

1. Your app provides a link to your users to log in. This link goes to https://accounts.google.com/signin/oauth?response_type=code&client_id=CLIENT_ID&scope=openid%20email&redirect_uri=REDIRECT_URI&state=STATE&nonce=NONCE where the capitalized words are:

   • CLIENT_ID - registered as part of a Google Cloud Project you own, using the Cloud Console (currently under APIs & Services/OAuth Consent Screen)
   • REDIRECT_URI - a URI in your application that must be registered in that project
   • STATE - I use this to hold the eventual URI I want my user to be sent to
   • NONCE - to prevent replay attacks

2. When the user navigates to that URI, they are taken through a Google signin process. On successful signing, they are redirected to REDIRECT_URI?state=STATE&code=CODE. STATE is the STATE you provided in the earlier link, CODE is an authentication code.

3. Your app processes the request to that REDIRECT_URI by making a server-side POST request to the Google OAuth token service at https://oath2.googleapis.com/token, passing the CODE, CLIENT_ID, CLIENT_SECRET (provided in the Cloud Console when registering the application), REDIRECT_URI, and GRANT_TYPE (the string authorization_code).

   The JSON response to that request will include a field called id_token. That id_token is a JWT that includes, among other things, the user's verified email address in the sub field.

   You can then establish your own session with that user information, and set a first party cookie for it. You can verify and parse that JWT with a Google auth library or a third party library.

4. Respond to the REDIRECT_URI with a redirect response that sets your session cookie, sending the user to the appropriate part of your app.

This is pretty verbose, but I did the above in a sample application I created and it worked for that. I hope it can be adapted to your needs.