fix: redirecting to My Account after logging in while pre-authed #1863

dkoo · 2022-08-05T20:53:06Z

All Submissions:

Have you followed the Newspack Contributing guideline?
Does your code follow the WordPress' coding standards and VIP Go coding standards?
Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

#1847 added functionality to optimistically redirect to the My Account page if the reader preauthenticates (by sending a magic link or attempting to register an email that was already registered), then subsequently logs in with a password via the login form. However, #1854 broke this functionality because of how it had to move some event handlers in order to handle multiple login form instances. This PR restores that functionality.

How to test the changes in this Pull Request:

On master, follow testing instructions from feat(reader-activation): optimistic account link #1847. Observe that after sending a magic link, clicking on the "Account" button results in a JS error and does not open the login modal.
Check out this branch and repeat testing instructions from feat(reader-activation): optimistic account link #1847. Confirm that you can now complete the whole flow.
Also test the login functionality from an inline login form by going directly to the My Account URL in a new session and logging in with a password there.

Other information:

Have you added an explanation of what your changes do and why you'd like us to include them?
Have you written new tests for your changes, as applicable?
Have you successfully ran tests with your changes locally?

miguelpeixe

Ran into a few issues detailed below and also got stuck while authenticating with Google. After a successful authentication on the my-account page, this was the response without a redirection:

assets/reader-activation/auth.js

miguelpeixe · 2022-08-08T18:38:25Z

includes/class-reader-activation.php

+					<div class="<?php echo \esc_attr( $class( 'response' ) ); ?>">
+						<span class="<?php echo \esc_attr( $class( 'response', 'icon' ) ); ?>" data-form-status="400">
+							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="-2 -2 24 24" role="img" aria-hidden="true" focusable="false">
+								<path d="M10 2c4.42 0 8 3.58 8 8s-3.58 8-8 8-8-3.58-8-8 3.58-8 8-8zm1.13 9.38l.35-6.46H8.52l.35 6.46h2.26zm-.09 3.36c.24-.23.37-.55.37-.96 0-.42-.12-.74-.36-.97s-.59-.35-1.06-.35-.82.12-1.07.35-.37.55-.37.97c0 .41.13.73.38.96.26.23.61.34 1.06.34s.8-.11 1.05-.34z" />
+							</svg>
+						</span>
+						<span class="<?php echo \esc_attr( $class( 'response', 'icon' ) ); ?>" data-form-status="200">
+							<?php echo self::get_account_icon(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
+						</span>
+						<div class="<?php echo \esc_attr( $class( 'response', 'content' ) ); ?>">
+							<?php if ( ! empty( $message ) ) : ?>
+								<p><?php echo \esc_html( $message ); ?></p>
+							<?php endif; ?>
+						</div>
+					</div>


Repositioning the message caused CSS issues with the alert icon:

Also, I wonder if we really need to change its position. The previous form.replaceWith() strategy gives us more design flexibility to place the message where it suits best.

Ah, the reason I removed the replaceWith treatment is that replaceWith causes the form inputs to be removed from the DOM, which results in JS errors in the handleAccountLinkClick handler due to us using a different closure for this now. Maybe this is a step too far, though. I'll revisit.

3f53a61 restores the replaceWith treatment and seems to avoid the JS errors I was experiencing before when preauthenticating.

Co-authored-by: Miguel Peixe <miguel.peixe@automattic.com>

dkoo · 2022-08-09T00:53:29Z

@miguelpeixe 2afd5d0 fixes the third-party SSO login from both the modal/inline auth form and the Register block. To test, please test the following scenarios:

Login to existing account from My Account login page: SSO should properly authenticate you with a styled success message and then redirect to the My Account dashboard.
Login to existing account from login modal on any page other than My Account: SSO should authenticate you with a styled success message, but not redirect you.
Login to existing account from Register block: SSO should authenticate you with a styled success message, but not redirect you. The success message shown should be "Thank you for signing in!" even if you clicked the SSO login button from the "register" form.
Register a new account from Register block: SSO should authenticate you with a styled success message, but not redirect you. The success message shown should be "Thank you for registering!"

EDIT: e770f88 distinguishes between "registering" an existing email via direct email input vs. SSO. This is because the default messaging in this scenario mentions checking your inbox for an authentication link, whereas authenticating via SSO will not send an authentication link because it's considered a secure login method.

miguelpeixe

Working as expected!

Small tweak on e3bac63 to not send the entire user object to the frontend.

# [1.89.0-alpha.2](v1.89.0-alpha.1...v1.89.0-alpha.2) (2022-08-12) ### Bug Fixes * **google-auth:** catch and display errors ([#1871](#1871)) ([67cbcfd](67cbcfd)) * **oauth:** csrf token lifespan ([#1869](#1869)) ([52e0f8b](52e0f8b)) * parse CID from _ga cookie if it only contains CID string ([#1874](#1874)) ([dc1fb52](dc1fb52)) * redirecting to My Account after logging in while pre-authed ([#1863](#1863)) ([ddf111e](ddf111e)) * verify reader on google authentication ([#1873](#1873)) ([c9c4eef](c9c4eef)) ### Features * authenticated reader cookie ([#1882](#1882)) ([352316b](352316b)) * better welcome email copy for initial verification ([#1880](#1880)) ([604ebf7](604ebf7)) * cookie reader's preferred auth strategy ([#1875](#1875)) ([fc47f41](fc47f41)) * disable woocomerce welcome emails in favor of verification email ([#1876](#1876)) ([1e470e3](1e470e3)) * lock access to My Account UI until account is verified ([#1877](#1877)) ([a850f48](a850f48))

matticbot · 2022-08-12T17:33:53Z

🎉 This PR is included in version 1.89.0-alpha.2 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

# [1.89.0](v1.88.0...v1.89.0) (2022-08-16) ### Bug Fixes * **active-campaign:** legacy contacts detection ([#1858](#1858)) ([67640a5](67640a5)) * **campaigns-wizard:** segmentation wording ([ddf61ad](ddf61ad)) * ensure scroll on smaller height ([#1813](#1813)) ([e234e8b](e234e8b)) * fix fatal error when debug mode active ([#1826](#1826)) ([d9388ee](d9388ee)) * **ga:** cookie parsing ([#1857](#1857)) ([a936abd](a936abd)) * google auth button type ([#1829](#1829)) ([3704d9f](3704d9f)) * **google-auth:** catch and display errors ([#1871](#1871)) ([67cbcfd](67cbcfd)) * **google-auth:** ensure popup on user click event ([#1831](#1831)) ([0af9abf](0af9abf)) * **magic-links:** fix email encoding on sent link ([#1833](#1833)) ([8d4756c](8d4756c)) * **my account:** handle legacy data ([#1823](#1823)) ([6816799](6816799)) * **newsletters:** use international date format ([#1855](#1855)) ([4cda57d](4cda57d)) * **oauth:** csrf token lifespan ([#1869](#1869)) ([52e0f8b](52e0f8b)) * parse CID from _ga cookie if it only contains CID string ([#1874](#1874)) ([dc1fb52](dc1fb52)) * **popups:** use new Campaigns method for creating donation events on new orders ([#1794](#1794)) ([49dc14c](49dc14c)) * **reader-activation:** add metadata to reader registered on donation ([722724c](722724c)) * **reader-activation:** handle modal conflict when auth is triggered from a prompt ([c2a0141](c2a0141)), closes [#1835](#1835) * **reader-activation:** handle no lists config available ([23b0249](23b0249)) * **reader-activation:** reinitialize auth links after DOM load ([#1812](#1812)) ([0a4b499](0a4b499)) * **reader-activation:** remove async prop from library ([#1846](#1846)) ([4131ca6](4131ca6)) * **reader-activation:** username generation handling ([#1789](#1789)) ([17edf2a](17edf2a)) * redirecting to My Account after logging in while pre-authed ([#1863](#1863)) ([ddf111e](ddf111e)) * **registration-block:** don't escape html for sign in labels ([#1834](#1834)) ([871300d](871300d)) * **registration-block:** margin for success message ([#1808](#1808)) ([1bfe546](1bfe546)) * **registration-block:** render on preview ([#1844](#1844)) ([87b9be9](87b9be9)) * tweak arguments for magic link client hash ([#1862](#1862)) ([8dcd45e](8dcd45e)) * verify reader on google authentication ([#1873](#1873)) ([c9c4eef](c9c4eef)) ### Features * **active-campaign:** metadata improvements ([#1851](#1851)) ([48883af](48883af)) * **active-campaigns:** override is-new-contact for legacy contacts ([34dd9a2](34dd9a2)) * **analytics:** send GA events on the server side ([#1828](#1828)) ([3e384e1](3e384e1)) * authenticated reader cookie ([#1882](#1882)) ([352316b](352316b)) * better welcome email copy for initial verification ([#1880](#1880)) ([604ebf7](604ebf7)) * cookie reader's preferred auth strategy ([#1875](#1875)) ([fc47f41](fc47f41)) * disable woocomerce welcome emails in favor of verification email ([#1876](#1876)) ([1e470e3](1e470e3)) * **donations:** remove defaultFrequency from the configuration ([#1814](#1814)) ([b6aa894](b6aa894)) * handle contact update w/out lists selection ([#1816](#1816)) ([67574d1](67574d1)) * handle new frequency options in Campaigns dashbaord ([#1779](#1779)) ([c770a7d](c770a7d)) * if registering an email that already has an account, show different message ([#1849](#1849)) ([bf48bc4](bf48bc4)) * lock access to My Account UI until account is verified ([#1877](#1877)) ([a850f48](a850f48)) * **my-account:** stripe billing portal link ([#1761](#1761)) ([3e69af1](3e69af1)), closes [#1742](#1742) [#1739](#1739) [#1740](#1740) [#1741](#1741) [#1782](#1782) * **reader-activation:** account link and auth form ([#1754](#1754)) ([b163664](b163664)) * **reader-activation:** activecampaign master list ([#1818](#1818)) ([ecbbc47](ecbbc47)) * **reader-activation:** disable 3rd party login buttons initially ([#1806](#1806)) ([c806bfe](c806bfe)) * **reader-activation:** optimistic account link ([#1847](#1847)) ([85c550a](85c550a)) * **reader-activation:** prevent updating user email in my-account ([7d49db4](7d49db4)) * **reader-activation:** registration auth cookie control ([#1787](#1787)) ([aeb0b5b](aeb0b5b)) * **reader-activation:** settings wizard ([#1773](#1773)) ([aaff0de](aaff0de)) * **reader-auth:** make password login the first option, instead of login link ([1fe5ffa](1fe5ffa)), closes [#1809](#1809) * register anonymous single donors ([#1795](#1795)) ([9e4f2f6](9e4f2f6)) * **registration-block:** add success icon ([#1804](#1804)) ([86c38f8](86c38f8)) * **registration-block:** editable success state ([#1785](#1785)) ([7dcea82](7dcea82)), closes [#1768](#1768) * **registration-block:** login with Google ([#1781](#1781)) ([ed79c5c](ed79c5c)), closes [#1774](#1774) * **registration-block:** newsletter subscription ([#1778](#1778)) ([717b5b8](717b5b8)) * reorganise donations wizard and use buttongroup for donation type ([#1824](#1824)) ([f7b58ae](f7b58ae)) * replace WooCommerce’s login form with our own ([#1854](#1854)) ([f5b24c4](f5b24c4)) * **rss:** adds offset feature ([#1790](#1790)) ([321eff5](321eff5)) * send user metadata to AC ([#1793](#1793)) ([03a15ba](03a15ba)) * set client id cookie; reader activation tweaks ([#1780](#1780)) ([96a07ae](96a07ae)) * **stripe:** webhook auto-creation and validation ([365aed9](365aed9)) * tweak registration block styling ([d83448e](d83448e)) ### Reverts * Revert "chore(release): 1.87.0 [skip ci]" ([ca8d55c](ca8d55c))

matticbot · 2022-08-16T18:07:46Z

🎉 This PR is included in version 1.89.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

fix: redirecting to My Account after logging in while pre-authed

cecf5ab

dkoo added [Type] Bug Incorrect behavior or functionality [Status] Needs Review The issue or pull request needs to be reviewed labels Aug 5, 2022

dkoo self-assigned this Aug 5, 2022

dkoo requested a review from a team as a code owner August 5, 2022 20:53

miguelpeixe requested changes Aug 8, 2022

View reviewed changes

dkoo and others added 5 commits August 8, 2022 17:06

refactor: more efficient condition

44d4661

Co-authored-by: Miguel Peixe <miguel.peixe@automattic.com>

chore: fix eslint

4a451cd

Merge branch 'master' into fix/preauth-redirect-login

97720e4

fix: restore replaceWith treatment of auth response message

3f53a61

fix: third-party SSO login

2afd5d0

dkoo and others added 4 commits August 8, 2022 18:54

fix: eslint

5ab1780

fix: only replace default message if login via SSO

e770f88

fix: eslint

8fbc67e

fix: omit user data

e3bac63

miguelpeixe self-requested a review August 9, 2022 14:34

miguelpeixe approved these changes Aug 9, 2022

View reviewed changes

miguelpeixe merged commit ddf111e into master Aug 9, 2022

miguelpeixe deleted the fix/preauth-redirect-login branch August 9, 2022 14:35

github-actions bot added [Status] Approved The pull request has been reviewed and is ready to merge and removed [Status] Needs Review The issue or pull request needs to be reviewed labels Aug 9, 2022

dkoo added a commit that referenced this pull request Aug 10, 2022

fix: redirecting to My Account after logging in while pre-authed (#1863)

acd0d76

matticbot added the released on @alpha label Aug 12, 2022

matticbot added the released label Aug 16, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: redirecting to My Account after logging in while pre-authed #1863

fix: redirecting to My Account after logging in while pre-authed #1863

Uh oh!

dkoo commented Aug 5, 2022

Uh oh!

miguelpeixe left a comment

Uh oh!

Uh oh!

Uh oh!

miguelpeixe Aug 8, 2022

Uh oh!

dkoo Aug 8, 2022

Uh oh!

dkoo Aug 8, 2022

Uh oh!

dkoo commented Aug 9, 2022 •

edited

Loading

Uh oh!

miguelpeixe left a comment

Uh oh!

matticbot commented Aug 12, 2022

Uh oh!

matticbot commented Aug 16, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

fix: redirecting to My Account after logging in while pre-authed #1863

fix: redirecting to My Account after logging in while pre-authed #1863

Uh oh!

Conversation

dkoo commented Aug 5, 2022

All Submissions:

Changes proposed in this Pull Request:

How to test the changes in this Pull Request:

Other information:

Uh oh!

miguelpeixe left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

miguelpeixe Aug 8, 2022

Choose a reason for hiding this comment

Uh oh!

dkoo Aug 8, 2022

Choose a reason for hiding this comment

Uh oh!

dkoo Aug 8, 2022

Choose a reason for hiding this comment

Uh oh!

dkoo commented Aug 9, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

miguelpeixe left a comment

Choose a reason for hiding this comment

Uh oh!

matticbot commented Aug 12, 2022

Uh oh!

matticbot commented Aug 16, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

dkoo commented Aug 9, 2022 •

edited

Loading