Woo JPC: Do not use code token type when trying to magic login

[zaguiini]

Closes DOTOBRD-347.

Proposed Changes

The Jetpack connection flow for Woo should always use the magic login through an email link, not a code.

The front-end was forcing the authentication through a magic code (which is not supported on the back-end, hence the empty link reported in the video) using the magic link template because it was not considering Woo JPC (treating every Jetpack connection equally).

This PR changes the token type to link instead of code when dispatching the front-end request.

On a different note, it's weird to me that we need to declare the magic login type on the front end instead of using a back-end condition.

Testing Instructions

1. Create a Jurassic Ninja site with Woo preinstalled.
2. Install the Blaze plugin.
3. Click "Connect now" and verify you're in the https://wordpress.com/jetpack/connect/authorize page.
4. Copy that address and open it in incognito mode.
5. Try creating an account with an email that's already registered. It should fail. Type the email again in the login page so it sends a magic link. Verify the issue is happening - you get an email with a blank "connect" link just like in the video report.
6. In the login page (https://wordpress.com/start/account/user-social?redirect_to=%2Fjetpack%2Fconnect%2Fauthorize), replace the hostname with the Calypso live link from this PR or calypso.localhost:3000 given you're running it locally.
7. Use the same email so it dispatches the login link to it. This time, verify that you get the correct email with the link. Click it and verify the connection succeeds.

[github-actions]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-162408&env=a8c-for-agencies

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• help-center
• notifications
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug dotobrd-347-broken-wpcom-jetpack-connection-flow-on-hostinger on your sandbox.

[gmjuhasz]

Looks good. Tested also with Jetpack and I still got the code!

[matticbot]

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

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

name         parsed_size           gzip_size
entry-login        +45 B  (+0.0%)      +21 B  (+0.0%)

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

Sections (~34 bytes added 📈 [gzipped])

name               parsed_size           gzip_size
stepper-user-step        +25 B  (+0.0%)      +18 B  (+0.0%)
jetpack-connect          +25 B  (+0.0%)      +16 B  (+0.0%)
accept-invite            +25 B  (+0.0%)      +16 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 (~24 bytes added 📈 [gzipped])

name                          parsed_size           gzip_size
async-load-design-blocks            +45 B  (+0.0%)      +24 B  (+0.0%)
async-load-signup-steps-user        +25 B  (+0.0%)      +16 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.