Jetpack Connection: fix sign-up as a different user

[sergeymitr]

Proposed Changes

During Jetpack connection flow, logged-in WPCOM users see the "Sign in as a different user" button, where users can enter a username or an email
If the entered email is not registered and you intend to register, you get redirected to the "My Home" page of your default site.

This happens because the form emails the user a "magic link" and redirects them to the "Magic link send" page. However, that page cannot be displayed as the user is still logged in under the old WPCOM account, so they get redirected to the homepage instead.

This PR will logout users as soon as they click "Sign in as a different user" button, so their other WPCOM account won't interfere.

1191179647901802-as-1203666065057524
p8oabR-11U-p2#comment-6947

Testing Instructions

Disable all cookie protection in browser settings, otherwise the flow will not work due to test/live domain discrepancies in API requests.

1. Open the "Calypso Live" link below in a private window, login.
2. Log into WP.com under the same user.
3. Open a Jetpack site, Initiate WP connection flow.
4. When you see the "Approve" page, replace wordpress.com with the *.calypso.live URL that got generated by "Calypso Live" link. The page should look the same.
5. Click "Sign in as a different user". You should see the field to enter an email.
6. Switch the domain back to https://wordpress.com/ because the "Calypso Live" doesn't seem to have magic link emails enabled. There are no changes on that page.
7. Enter a registered (but different) email/username, confirm you got logged in and see the "Approve" page again.
8. Repeat steps 1-5, and enter a non-registered email.
9. You should see the "Magic link sent" page, and actually receive the email.
10. Due to live/test domain name discrepancy, the magic link from email will not send you back to "Approve" page (that'll be tested after merging the PR), but it should create the WPCOM user account.

Don't forget to enable back the cookie protection settings!

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
• For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-ajp-p2)?

[github-actions]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

[matticbot]

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

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

name                   parsed_size           gzip_size
entry-stepper              +1520 B  (+0.1%)     +279 B  (+0.0%)
entry-main                 +1520 B  (+0.1%)     +264 B  (+0.1%)
entry-subscriptions         +864 B  (+0.1%)     +201 B  (+0.0%)
entry-login                 +864 B  (+0.1%)     +201 B  (+0.0%)
entry-domains-landing       +864 B  (+0.1%)     +201 B  (+0.1%)
entry-browsehappy           +864 B  (+0.7%)     +201 B  (+0.6%)

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

Sections (~21681 bytes added 📈 [gzipped])

name                          parsed_size           gzip_size
account                            +751 B  (+0.1%)     +222 B  (+0.1%)
notification-settings              +639 B  (+0.1%)      +87 B  (+0.0%)
help                               +587 B  (+0.1%)     +437 B  (+0.2%)
privacy                            +538 B  (+0.1%)     +356 B  (+0.2%)
me                                 +538 B  (+0.1%)     +345 B  (+0.2%)
account-close                      +538 B  (+0.1%)     +356 B  (+0.2%)
site-blocks                        +523 B  (+0.1%)      +63 B  (+0.0%)
accept-invite                      -491 B  (-0.1%)     -459 B  (-0.5%)
security                           +464 B  (+0.1%)     +116 B  (+0.0%)
purchases                          -427 B  (-0.0%)     -176 B  (-0.0%)
jetpack-connect                    +424 B  (+0.0%)     +210 B  (+0.1%)
write-flow                         -412 B  (-0.1%)       -6 B  (-0.0%)
videopress-flow                    -412 B  (-0.0%)       -6 B  (-0.0%)
update-design-flow                 -412 B  (-0.1%)       -6 B  (-0.0%)
signup                             -412 B  (-0.1%)       -6 B  (-0.0%)
link-in-bio-tld-flow               -412 B  (-0.0%)       -6 B  (-0.0%)
home                               -412 B  (-0.0%)       -6 B  (-0.0%)
free-flow                          -412 B  (-0.1%)       -6 B  (-0.0%)
build-flow                         -412 B  (-0.1%)       -6 B  (-0.0%)
comments                           -191 B  (-0.0%)     +475 B  (+0.2%)
devdocs                            +108 B  (+0.1%)      +24 B  (+0.0%)
reader                              +13 B  (+0.0%)      -19 B  (-0.0%)
pattern-assembler-step              -13 B  (-0.0%)       -5 B  (-0.0%)
newsletter-post-setup-flow          -13 B  (-0.0%)      -20 B  (-0.0%)
jetpack-cloud-partner-portal        -13 B  (-0.0%)      -31 B  (-0.0%)
jetpack-cloud-agency-signup         -13 B  (-0.0%)       -8 B  (-0.0%)
import-flow                         -13 B  (-0.0%)       -5 B  (-0.0%)

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 (~830 bytes added 📈 [gzipped])

name                                                                         parsed_size           gzip_size
async-load-design-blocks                                                          +220 B  (+0.0%)    +1348 B  (+0.3%)
async-load-signup-steps-user                                                      -196 B  (-0.1%)     -513 B  (-1.2%)
async-load-automattic-global-styles-src-components-global-styles-variations        -13 B  (-0.0%)       -5 B  (-0.0%)
async-load-automattic-design-preview                                               -13 B  (-0.0%)       -5 B  (-0.0%)

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.

[bindlegirl]

I tested everything as suggested and it works as expected.
I did notice a small difference between Calypso Green and WP.com form (Green has additional links for creating a new account, logging in via the app...), but that doesn't seem to make any difference for this scenario.