Redirect Studio app users to magic login flow when signing up

[SiobhyB]

Related to 5531-gh-Automattic/dotcom-forge, 5532-gh-Automattic/dotcom-forge

Proposed Changes

• With this PR, users who sign up for WordPress.com via the Studio app will be redirected to the magic login form.
• This change will prevent a poor experience, in which users who signed up following the Studio flow were not correctly logged into their WordPress.com account. It will also avoid users being directed through the site creation flow. Further context for this decision can be found here.

Signup form	Confirmation page

Note

There is a Create free account link in the Studio app that will be updated after this PR has been merged.

Testing Instructions

• Log out of WordPress.com and navigate to the Calypso Live link in this comment.
• Add the following to the end of the Calypso Live link in order to simular the URL that's clicked from the Studio app: /log-in?client_id=95109&redirect_to=https%3A%2F%2Fpublic-api.wordpress.com%2Foauth2%2Fauthorize%3Fresponse_type%3Dtoken%26client_id%3D95109%26redirect_uri%3Dwpcom-local-dev%253A%252F%252Fauth%26scope%3Dglobal%26from-calypso%3D1
• Select the option to create a new account from the login page.
• Submit an email address that's not already associated with a WordPress.com account.
• Click the verification link in the new email and verify that you're taken to authentication page for the Studio app.
• Confirm the following tracks events have been logged:
  • calypso_login_block_login_form_send_account_create_magic_link with a client_id: 95109 property
  • calypso_login_email_link_success with a client_id: 95109 property

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-aUh-p2)?

[github-actions]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-107505&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 (~287 bytes added 📈 [gzipped])

Details

name                 parsed_size           gzip_size
entry-login              +1233 B  (+0.1%)     +249 B  (+0.1%)
entry-subscriptions        +91 B  (+0.0%)      +36 B  (+0.0%)
entry-stepper              +91 B  (+0.0%)      +35 B  (+0.0%)
entry-main                 +91 B  (+0.0%)      +35 B  (+0.0%)

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

Sections (~11 bytes added 📈 [gzipped])

Details

name             parsed_size           gzip_size
security               +13 B  (+0.0%)       +4 B  (+0.0%)
jetpack-connect        +13 B  (+0.0%)       +7 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 (~7 bytes added 📈 [gzipped])

Details

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

[matticbot]

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

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

• blaze-dashboard
• odyssey-stats
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug studio/magic-email-signup-flow on your sandbox.

[SiobhyB]

@matt-west, 👋 , this PR's not quite ready for review yet, but I wanted to get your early thoughts from a design perspective. The default styles being used are the same as those found on the magic login page, as you can see here:

But, the styles and text can be changed based on what you think is best. You can test the proposed flow by:

• Logging out of WordPress.com and navigating directly to: https://container-kind-ellis.calypso.live/log-in?client_id=95109&redirect_to=https%3A%2F%2Fpublic-api.wordpress.com%2Foauth2%2Fauthorize%3Fresponse_type%3Dtoken%26client_id%3D95109%26redirect_uri%3Dwpcom-local-dev%253A%252F%252Fauth%26scope%3Dglobal%26from-calypso%3D1 (simulating the URL clicked from the Studio app)
• Select the option to create a new account.
• Submit an email address that's not already associated with a WordPress.com account.
• Click the verification link in the new email.

Looking forward to hearing your initial impressions as well any iterations for the design and/or overall flow.

[matt-west]

Thanks for the ping @SiobhyB!

I’m getting an error when I try to test that URL: Container kind-ellis not found
Perhaps it got cleaned up?

We should stick with the default WordPress.com styling for consistency.

[SiobhyB]

@matt-west, ah, yes, I see a new live link was generated since my ping, this one should work: https://container-interesting-ptolemy.calypso.live/log-in?client_id=95109&redirect_to=https%3A%2F%2Fpublic-api.wordpress.com%2Foauth2%2Fauthorize%3Fresponse_type%3Dtoken%26client_id%3D95109%26redirect_uri%3Dwpcom-local-dev%253A%252F%252Fauth%26scope%3Dglobal%26from-calypso%3D1

We should stick with the default WordPress.com styling for consistency.

Perfect! If the current design works I'll continue as-is, but let me know if you think any tweaks are needed to the copy or anything else, too. :)

[matt-west]

Thanks @SiobhyB

I think we can drop the Not sure what this is all about? [We can help clear that up for you.](https://wordpress.com/support/wpcc-faq/) line. That's not really needed as we already explain the WordPress.com connection within Studio.

Can we please change the copy to:

Sign up for WordPress.com
Connecting a WordPress.com account unlocks additional Studio features like demo sites.
[FORM]

[SiobhyB]

@matt-west, thank you for the guidance! I've set this as ready for review now.

[matt-west]

Looks good! 👍 Thanks @SiobhyB

[SiobhyB]

Temporarily setting this back to draft as I noticed an issue with the link, I'll change it back as ready for review when fixed... It's necessary to completely log out of WordPress.com, else the flow won't work as expected.

[dcalhoun]

When performing the testing instructions, I successfully authenticated in my browser, but when Studio launched, it did not connect my newly created WPCOM account. Is that expected when using the Calypso Live environment?

The two analytic events did successfully log during my testing. 🎉

[SiobhyB]

Thank you for testing this, @dcalhoun! 🙌

When performing the testing instructions, I successfully authenticated in my browser, but when Studio launched, it did not connect my newly created WPCOM account. Is that expected when using the Calypso Live environment?

The account should be authenticated using Calypso Live, I just tested and confirmed my newly created account was successfully connected after going through the flow:

Screen.Recording.2024-05-13.at.19.16.42.mov

Could you share more about any varying factors? For example, were you already logged into Studio with a different account? I'd be grateful for any more specifics you can pinpoint so I can try to reproduce, I'll keep trying to reproduce on my own too. Thank you! 🙇‍♀️

[dcalhoun]

Could you share more about any varying factors? For example, were you already logged into Studio with a different account?

Studio is, in fact, successfully updating to represent the newly created account. My first report was me unexpectedly encountering the absence of Automattic/studio#86, which is not included in the 1.0.1 release I was testing. 😄 Sorry for the false report.

I believe these changes are functioning as expected. 👏🏻