Stepper auth: add authentication capability without leaving Stepper - Take II

[alshakero]

Proposed Changes

~~This makes a thin wrapper around SignupFormSocialFirst component and render it in Stepper if the current step requires auth and the user is logged out. It's much more seamless to log the user in without a few redirects back and forth.~~

~~I'm even considering replacing the WpcomLoginForm with a fetch request and getting rid of the redirection completely.~~

~~This also moves the onboarding flow to use the new User step added in Stepper. This is a proof of concept only. We will certainly need to consider how the tracking of this should look.~~

This adds a user Step in Stepper. It also makes Stepper automatically inject this step when any of the steps require authentication.

This onboarding flow is not in production and is just a playground for our changes.

Why are these changes being made?

To allow Stepper to seamlessly offer user signup as part of the flow.

Testing Instructions

This should be tested locally.

1. Mock WordPress.com by running yarn start-mock-wordpress-com.
2. Go to https://wordpress.com/setup/onboarding.
3. Signup using different social services and email.
4. All should work as expected.

Regression testing

1. Go to /start.
2. Sign up using email.
3. Should work.

[github-actions[bot]]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

[matticbot]

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

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

name           parsed_size           gzip_size
entry-stepper      +1236 B  (+0.1%)     +337 B  (+0.1%)

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

Sections (~70 bytes added 📈 [gzipped])

name                                parsed_size           gzip_size
new-hosted-site-flow-user-included       -154 B  (-2.6%)      +26 B  (+1.4%)
jetpack-connect                           +70 B  (+0.0%)      +19 B  (+0.0%)
accept-invite                             +70 B  (+0.0%)      +19 B  (+0.0%)
onboarding-flow                           +32 B  (+0.1%)      +25 B  (+0.2%)

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

name                                     parsed_size           gzip_size
async-load-signup-steps-user                   +70 B  (+0.0%)      +19 B  (+0.0%)
async-load-signup-steps-subscribe-email        +70 B  (+0.0%)      +19 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.

[matticbot]

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

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

• notifications
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug revert-94001-revert-91824-stepper/user-step on your sandbox.