Google Sign-in: Migrate the pop-up flow to the new Google Identity Services API

[zaguiini]

Proposed Changes

We are migrating to the new Google Identity Services API. This PR migrates the pop-up flow behind a feature flag so existing users won't be affected. The redirect flow will be handled by another PR.

Testing Instructions

In these instructions, we will link a WPCOM account to a Google account. This is the easier path to test as the others involve setting multiple Google accounts and that's less than desirable.

• Create and activate a WPCOM account using an e-mail (https://10minutemail.net) and a password (do NOT Google login);
• Run bin/calypso-secrets .config/secrets.php in your WordPress.com sandbox;
• Copy the output of the script to config/secrets.json in your wp-calypso checkout;
• Build this branch with NODE_ENV=production CALYPSO_ENV=production yarn run build;
• Run these commands in the Calypso root folder so you can SSL the local version you just built:

openssl req \
    -newkey rsa:2048 \
    -x509 \
    -nodes \
    -keyout ./config/server/key.pem \
    -new \
    -out ./config/server/certificate.pem \
    -subj /CN=wordpress.com \
    -reqexts SAN \
    -extensions SAN \
    -config <(cat /System/Library/OpenSSL/openssl.cnf \
     <(printf '[SAN]\nsubjectAltName=DNS:wpcalypso.wordpress.com')) \
    -sha256 \
    -days 365
 
# Add it to the trusted certificates
sudo security add-trusted-cert -d -k $(security list-keychains | grep System | cut -d '"' -f 2 ) ./config/server/certificate.pem

• Kick off the server with NODE_ENV=production HOST=wpcalypso.wordpress.com PORT=443 PROTOCOL=https CALYPSO_ENV=wpcalypso BUILD_TRANSLATION_CHUNKS=true node build/server.js;
• Proxy wpcalypso.wordpress.com to 127.0.0.1;
• Open the dev tools and paste document.cookie='G_AUTH2_MIGRATION=informational'.

Keep the DevTools open to assert a few details below...

Verify that the current flow still works

• Open https://wpcalypso.wordpress.com/me/security/social-login;
• Open the DevTools and check that the deprecation notice shows up in the console;
• Click on Connect and choose a Google account not yet linked to any WPCOM account.

It should connect the account successfully. You should also be able to see that /me/social-login/connect was called successfully in the network tab in the DevTools.

Verify that the new flow works

• Open https://wpcalypso.wordpress.com/me/security/social-login?flags=migration/sign-in-with-google;
• Click Disconnect to unlink the previously connected Google account;
• Open the DevTools;
• Check that the feature was activated by the Config flag enabled via URL: migration/sign-in-with-google message in the console;
• Check that the deprecation notice is not there anymore;
• Click on Connect and choose an account not yet linked to any WPCOM account.

It should connect the account successfully. The network tab in the DevTools should show that both the calls to /wp-login.php?action=exchange-social-auth-code and /me/social-login/connect were issued successfully.

---

Verifying that social sign-ups work

The new flow should work all across the application since they're using the same component. If you'd like to try a sign-up instead of a social connection, here's how you can do so:

• Open https://wpcalypso.wordpress.com/start/user?flags=migration/sign-in-with-google;
• Open the DevTools;
• Check that the feature was activated by the Config flag enabled via URL: migration/sign-in-with-google message in the console;
• Check that the deprecation notice is not there anymore;
• Click on Continue With Google and choose an account not yet registered to WPCOM.

You should be redirected to the /start/domains page. In the background, requests to /wp-login.php?action=exchange-social-auth-code and /users/social/new should've been successfully issued.

Related to #64788.

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-36749

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-36749&env=jetpack

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~465 bytes added 📈 [gzipped])

name         parsed_size           gzip_size
entry-login      +1588 B  (+0.2%)     +465 B  (+0.2%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~856 bytes added 📈 [gzipped])

name             parsed_size           gzip_size
jetpack-connect      +1611 B  (+0.2%)     +454 B  (+0.2%)
security             +1588 B  (+0.3%)     +402 B  (+0.3%)
accept-invite        +1588 B  (+0.4%)     +436 B  (+0.5%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~456 bytes added 📈 [gzipped])

name                          parsed_size           gzip_size
async-load-signup-steps-user      +1588 B  (+0.9%)     +436 B  (+0.8%)
async-load-design-blocks          +1588 B  (+0.1%)     +443 B  (+0.1%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[zaguiini]

I did not see the consent screen when creating an account for a brand new Google account, which is good.

[vykes-mac]

I have tested the mentioned cases:

Verify that the current flow still works
✅ Check that the #64538 shows up in the console;
✅ Google account connect successfully
✅ You should also be able to see that /me/social-login/connect was called successfully in the network tab in the DevTools.

Verify that the new flow works
✅ Check that the feature was activated by the Config flag enabled via URL: migration/sign-in-with-google message in the console;
✅ Check that the deprecation notice is not there anymore;
✅ Google account connect successfully
✅ The network tab in the DevTools should show that both the calls to /wp-login.php?action=exchange-social-auth-code and /me/social-login/connect were issued successfully.

Verifying that social sign-ups work
✅ Check that the feature was activated by the Config flag enabled via URL: migration/sign-in-with-google message in the console;
✅ Check that the deprecation notice is not there anymore;
✅ Continue with google redirected to the /start/domains page.
✅ In the background, requests to /wp-login.php?action=exchange-social-auth-code and /users/social/new should've been successfully issued

[vykes-mac]

code looks good and tests works as expected