Jetpack Connection Flow doesn't account for Site Connection state

[thehenrybyrd]

Expected behavior

I expected to be able to connect Jetpack to my WordPress.com account via the WP app. Normally this is done from My Site > Stats, with "Set up" if Jetpack is already installed.

Actual behavior

However, with a Jetpack connection that is userless ("site-connection" state), the "Set up" button takes me through the login flow as usual but doesn't complete the connection. I end up back on Stats with the "Log in" button still there, and going through the login flow again continues to bring me back to Stats with the "Log in" button. I can exit Stats, switch sites, even close the app, and I still have the "Log in" button there.

In order to eventually fix this and get connected properly, I have to login to wp-admin and connect there. It's not possible from within the app once a userless state is achieved.

https://user-images.githubusercontent.com/15107387/118107588-9b583a80-b3e7-11eb-95b2-c55bdab0eaea.mp4

Steps to reproduce the behavior

1. Get a Jetpack site in a userless ("site-connection") state. Instructions below.
2. In the WP app, head to My Site > Stats if you're not there already, and tap "Log in".
3. Go through the login flow and check Stats to see the "Log in" button is still there.

Getting to a userless state, two ways: A: With a tastewp.com site

1. Create a new site at tastewp.com
2. Login to this self-hosted site on the WordPress app (Switch Sites > + > Self-hosted), using the provided credentials
3. Once logged in, go to My Site > Stats and initiate the Jetpack install flow.
4. Partway through, on the "Set up Jetpack" page with Jetpack branding, the site will throw a 502 Bad Gateway error. You can continue by pressing the < button, however your site is now in a userless state
5. Double-check that your site is userless at https://jptools.wordpress.com/debug/. Under Blog Details, you'll find "Primary User: This site does not have an owner. The email of the user who connected Jetpack is...."

B: With another self-hosted site

1. Create a new self-hosted site. I used jurassic ninja for this.
2. Uninstall Jetpack (via wp-admin) and reinstall, but don't connect your WordPress.com account.
3. In the WP app, add this self-hosted site (Switch Sites > + > Self-hosted)
4. Head into Stats and note the Install Jetpack notice. Go through the flow until you see "Jetpack Installed" and the "Set up" button
5. Tap "Set up", which brings up the "Set up Jetpack" screen. Press the < button and then "cancel" to back out at this point.
6. Double-check that your site is userless at https://jptools.wordpress.com/debug/. Under Blog Details, you'll find "Primary User: This site does not have an owner. The email of the user who connected Jetpack is...."

Another way to tell that your site is userless is to go into wp-admin > Jetpack and scroll down to Connections, where you'll see this:

Tested on iPhone 12 Mini, iOS 14.5.1, WPiOS 17.3

Tested on iPhone SE (old), iOS 14.4.2, WPiOS 17.1 and 17.2

[thehenrybyrd]

More context about the userless state: p1HpG7-aJm-p2 and https://jetpack.com/2021/05/04/97-improvements-for-your-site/ This is quite new, so I suspect there aren't many userless sites out there currently, but they will likely increase so we should make sure to account for them. cc: @ashiagr for Raven's awareness, as we chatted about this a bit (though the behavior is different in Android)

[ashiagr]

cc @leandroalonso , @momo-ozawa

[momo-ozawa]

The current Jetpack Connection Flow in the apps assumes that “connected to Jetpack” == “site connected + user authorized”. As a result, the user gets stuck in a login loop, since the Jetpack Login screen only works if the user is already authorized.

pcdRpT-og-p2

[lmischner]

We should revisit this (likely as part of a maintenance week rotation) if the expectation changes regarding support of site-only connections in mobile.

pcdRpT-og-p2#comment-427

[thabotswana]

A user has reported this in 6009848-zen

I keep logging on to stats and you just take me to the login page again the email is correct and the password is correct I changed it

Jetpack for iOS 21.7.2 iPhone 12 Pro iOS, 15.6.1

[staskus]

Woo iOS solves this issue by doing Jetpack installation and activation steps by calling the wp/v2/plugins endpoint directly, and Jetpack connection is handled in a web view after fetching the connection URL from Jetpack REST API (See fetchJetpackConnectionURL())

To solve this particular issue, we could try borrowing some of the concepts to allow authorizing and connecting to .com account for site-only connection.