feat(clerk-js, types): Trigger UserVerification within UserProfile by panteliselef · Pull Request #4127 · clerk/javascript

panteliselef · 2024-09-09T10:17:09Z

Description

When user re-verification is required FAPI will return a specific error. The goal of this PR is to recognise that error and display the UserVerification modal. After the verification is successful we retry the original request, but if the verification is cancelled the original request will not be retried.

How are people not affected by this

This is a pretty core change in the UserProfile component, we need to make sure that only application that have opted-in to the experimental flows will see the new behavior of UserProfile. This is ensured by many existing tests including this one that would hang indefinitely based on the new behavior.

Cancelled verification

Screen.Recording.2024-09-16.at.6.01.43.PM.mov

Successful verification

Screen.Recording.2024-09-16.at.6.06.35.PM.mov

Checklist

npm test runs as expected.
npm run build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

changeset-bot · 2024-09-09T10:17:13Z

🦋 Changeset detected

Latest commit: f7dad10

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 18 packages

Name	Type
@clerk/clerk-js	Minor
@clerk/types	Minor
@clerk/chrome-extension	Patch
@clerk/clerk-expo	Patch
@clerk/astro	Patch
@clerk/backend	Patch
@clerk/elements	Patch
@clerk/express	Patch
@clerk/fastify	Patch
@clerk/localizations	Patch
@clerk/nextjs	Patch
@clerk/clerk-react	Patch
@clerk/remix	Patch
@clerk/clerk-sdk-node	Patch
@clerk/shared	Patch
@clerk/tanstack-start	Patch
@clerk/testing	Patch
@clerk/themes	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

…ation-for-sensitive-actions-in

…ation-for-sensitive-actions-in # Conflicts: # packages/clerk-js/src/core/resources/Session.ts

panteliselef · 2024-09-16T10:34:07Z

        { wrapper },
      );
-      await userEvent.click(getByRole('button', { name: 'Add a passkey' }));
+      getByRole('button', { name: 'Add a passkey' });


🧹 We were not doing anything after the click.

…ation-for-sensitive-actions-in

…ensitive-actions-in

This reverts commit 063509a.

This reverts commit 4d5a871.

This reverts commit fec40a1.

panteliselef · 2024-09-18T14:55:53Z

!preview

panteliselef · 2024-09-18T16:00:26Z

!preview

panteliselef · 2024-09-19T08:48:44Z

+    options?: {
+      notify?: boolean;
+    },


This is only internal

LekoArts · 2024-09-19T09:09:25Z

+      metadata,
+    },
+  } as AssuranceHint;


Why not add the metadata to the AssuranceHint, then you don't need to typecast

I may end up changing this in a followup iteration.

…ensitive-actions-in

panteliselef · 2024-09-27T14:13:18Z

!snapshot

clerk-cookie · 2024-09-27T14:17:16Z

Hey @panteliselef - the snapshot version command generated the following package versions:

Package	Version
@clerk/astro	1.3.9-snapshot.vbe1abf5
@clerk/backend	1.13.5-snapshot.vbe1abf5
@clerk/chrome-extension	1.3.11-snapshot.vbe1abf5
@clerk/clerk-js	5.24.0-snapshot.vbe1abf5
@clerk/elements	0.15.7-snapshot.vbe1abf5
@clerk/clerk-expo	2.2.17-snapshot.vbe1abf5
@clerk/express	1.0.2-snapshot.vbe1abf5
@clerk/fastify	1.0.48-snapshot.vbe1abf5
@clerk/localizations	3.1.0-snapshot.vbe1abf5
@clerk/nextjs	5.6.3-snapshot.vbe1abf5
@clerk/clerk-react	5.9.4-snapshot.vbe1abf5
@clerk/remix	4.2.32-snapshot.vbe1abf5
@clerk/clerk-sdk-node	5.0.45-snapshot.vbe1abf5
@clerk/shared	2.8.4-snapshot.vbe1abf5
@clerk/tanstack-start	0.4.8-snapshot.vbe1abf5
@clerk/testing	1.3.6-snapshot.vbe1abf5
@clerk/themes	2.1.33-snapshot.vbe1abf5
@clerk/types	4.23.0-snapshot.vbe1abf5

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/astro

npm i @clerk/astro@1.3.9-snapshot.vbe1abf5 --save-exact

@clerk/backend

npm i @clerk/backend@1.13.5-snapshot.vbe1abf5 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@1.3.11-snapshot.vbe1abf5 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@5.24.0-snapshot.vbe1abf5 --save-exact

@clerk/elements

npm i @clerk/elements@0.15.7-snapshot.vbe1abf5 --save-exact

@clerk/clerk-expo

npm i @clerk/clerk-expo@2.2.17-snapshot.vbe1abf5 --save-exact

@clerk/express

npm i @clerk/express@1.0.2-snapshot.vbe1abf5 --save-exact

@clerk/fastify

npm i @clerk/fastify@1.0.48-snapshot.vbe1abf5 --save-exact

@clerk/localizations

npm i @clerk/localizations@3.1.0-snapshot.vbe1abf5 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@5.6.3-snapshot.vbe1abf5 --save-exact

@clerk/clerk-react

npm i @clerk/clerk-react@5.9.4-snapshot.vbe1abf5 --save-exact

@clerk/remix

npm i @clerk/remix@4.2.32-snapshot.vbe1abf5 --save-exact

@clerk/clerk-sdk-node

npm i @clerk/clerk-sdk-node@5.0.45-snapshot.vbe1abf5 --save-exact

@clerk/shared

npm i @clerk/shared@2.8.4-snapshot.vbe1abf5 --save-exact

@clerk/tanstack-start

npm i @clerk/tanstack-start@0.4.8-snapshot.vbe1abf5 --save-exact

@clerk/testing

npm i @clerk/testing@1.3.6-snapshot.vbe1abf5 --save-exact

@clerk/themes

npm i @clerk/themes@2.1.33-snapshot.vbe1abf5 --save-exact

@clerk/types

npm i @clerk/types@4.23.0-snapshot.vbe1abf5 --save-exact

alexcarpenter

Hitting the back button removes the dialog but not the overlay.

Linked video issue in slack.

Would be nice if there was only one overlay instead of the stacking effect where it gets darker. non-blocker though.

Shared in slack

anagstef · 2024-10-01T10:44:38Z

        {showPhone && <PhoneSection shouldAllowCreation={shouldAllowIdentificationCreation} />}
        {showConnectedAccounts && <ConnectedAccountsSection shouldAllowCreation={shouldAllowIdentificationCreation} />}
+
+        {/*TODO-STEP-UP: Verify that these work as expected*/}


Are these verified they work? 😄

Yes, although thorough testing will still need to be done. E2E tests will also be introduced before this goes to public beta

anagstef · 2024-10-01T10:45:11Z

-    return session.revoke().finally(() => status.setIdle());
+    return (
+      handleAssurance(() => session.revoke())
+        // TODO-STEPUP: Properly handler the response with a setCardError


@panteliselef is this to-do for later or it's forgotten?

Actually this is not step-up specific, just something that i discovered (for later)

anagstef · 2024-10-01T10:48:37Z

-      if (afterVerificationUrl) {
-        await navigate(afterVerificationUrl);
-      }
+      throw 'afterVerification is only triggered in modals';


This should never happen, right? We don't expect it to ever happen (?)

Correct, a follow up PR will remove UserVerification as mounted component

anagstef · 2024-10-01T12:07:53Z

+| Operation | Reverification | Strategy | Timeframe |
+| --- |----------------| --- | --- |
+| Update account (first/last name) | ❌              |  |  |
+| Update username | ✅              | Strongest available | 10m |
+| Delete account | ✅              | Strongest available | 10m |
+| Create/Remove profile image | ❌              |  |  |
+| Update password | ✅              | Strongest available | 10m |
+| Remove password | ❌              |  |  |
+| Revoke session | ✅              | Strongest available | 10m |
+| Create identification | ✅              | Strongest available | 10m |
+| Remove identification | ✅              | Strongest available | 10m |
+| Change primary identification | ✅              | Strongest available | 10m |
+| Update Passkey name | ❌              |  |  |
+| Enable MFA (TOTP, Phone number) | ✅              | Strongest available | 10m |
+| Disable MFA (TOΤP, Phone number) | ✅              | Strongest available | 10m |
+| Create/Regenerate Backup Codes | ✅              | Strongest available | 10m |
+| Connect External Account | ✅              | Strongest available | 10m |
+| Re-authorize External Account | ❌              |  |  |
+| Remove External Account | ✅              | Strongest available | 10m |
+| Leave organization | ❌              |  |  |


Is this table also going into our docs?

Eventually, yes we currently have it in our DX gudie

octoper

Except from the comments Stefanos shared above this looks good 🔥

anagstef

Great work! 💯

…ation-for-sensitive-actions-in

…ensitive-actions-in

…4127)

panteliselef added 2 commits September 8, 2024 19:03

WIP

cc45755

useAssurance internally

243e846

panteliselef self-assigned this Sep 9, 2024

clerk-cookie added types clerk-js labels Sep 9, 2024

panteliselef added 6 commits September 9, 2024 13:33

minor cleanup

2b186f6

fix tests

0bef2f6

remove search params

ec63553

Merge branch 'refs/heads/main' into elef/user-665-display-userverific…

4d4eeca

…ation-for-sensitive-actions-in

Merge branch 'refs/heads/main' into elef/user-665-display-userverific…

1a6446a

…ation-for-sensitive-actions-in # Conflicts: # packages/clerk-js/src/core/resources/Session.ts

refactor

374146a

panteliselef commented Sep 16, 2024

View reviewed changes

panteliselef added 2 commits September 16, 2024 17:50

clean up assurance

678a2c6

Merge branch 'refs/heads/main' into elef/user-665-display-userverific…

85c5cd4

…ation-for-sensitive-actions-in

panteliselef changed the title ~~Elef/user 665 display userverification for sensitive actions in~~ feat: Trigger UserVerification within UserProfile Sep 16, 2024

fix localizations

9ae4a62

panteliselef changed the title ~~feat: Trigger UserVerification within UserProfile~~ feat(clerk-js): Trigger UserVerification within UserProfile Sep 16, 2024

clerk-cookie added the localizations label Sep 16, 2024

panteliselef changed the title ~~feat(clerk-js): Trigger UserVerification within UserProfile~~ feat(clerk-js, types): Trigger UserVerification within UserProfile Sep 16, 2024

panteliselef added 3 commits September 16, 2024 18:05

add changeset

f025a26

update bundlewatch.config.json

274ef1d

Merge branch 'refs/heads/main' into elef/user-665-display-userverific…

0b02ad4

…ation-for-sensitive-actions-in

clerk-cookie removed the localizations label Sep 16, 2024

update localization

68d078a

clerk-cookie added the localizations label Sep 16, 2024

panteliselef marked this pull request as ready for review September 16, 2024 15:47

panteliselef added 2 commits September 16, 2024 19:17

update changelog

319fab0

Merge branch 'main' into elef/user-665-display-userverification-for-s…

f5099c8

…ensitive-actions-in

clerk-cookie removed the localizations label Sep 16, 2024

panteliselef added 4 commits September 18, 2024 17:46

Revert "avoid using arbitrary zIndexes"

8280af9

This reverts commit 063509a.

Revert "restore portals and drop zIndex"

df6f3a1

This reverts commit 4d5a871.

Revert "remove portals from all menus/select components"

8f6a7d2

This reverts commit fec40a1.

revert changes to indexes and use isolate instead

8ea72f8

panteliselef commented Sep 19, 2024

View reviewed changes

LekoArts reviewed Sep 19, 2024

View reviewed changes

panteliselef added 2 commits September 26, 2024 11:20

address review comments

942ae04

Merge branch 'main' into elef/user-665-display-userverification-for-s…

3593cf2

…ensitive-actions-in

panteliselef requested review from LekoArts and alexcarpenter September 26, 2024 08:34

panteliselef added 2 commits September 27, 2024 12:41

remove comments

7d6f7c5

Merge branch 'main' into elef/user-665-display-userverification-for-s…

be1abf5

…ensitive-actions-in

alexcarpenter requested a review from a team September 27, 2024 13:37

alexcarpenter previously requested changes Sep 27, 2024

View reviewed changes

anagstef reviewed Oct 1, 2024

View reviewed changes

octoper approved these changes Oct 1, 2024

View reviewed changes

anagstef approved these changes Oct 1, 2024

View reviewed changes

panteliselef added 3 commits October 1, 2024 16:09

Merge branch 'refs/heads/main' into elef/user-665-display-userverific…

acd9f53

…ation-for-sensitive-actions-in

fix "broken" back button

d52fb92

Merge branch 'main' into elef/user-665-display-userverification-for-s…

f7dad10

…ensitive-actions-in

panteliselef merged commit 4a85705 into main Oct 1, 2024

panteliselef deleted the elef/user-665-display-userverification-for-sensitive-actions-in branch October 1, 2024 13:58

clerk-cookie mentioned this pull request Oct 1, 2024

ci(repo): Version packages #4247

Merged

wobsoriano pushed a commit that referenced this pull request Feb 8, 2025

feat(clerk-js, types): Trigger UserVerification within UserProfile (#…

4b73642

…4127)

Conversation

panteliselef commented Sep 9, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How are people not affected by this

Cancelled verification

Successful verification

Checklist

Type of change

Uh oh!

changeset-bot Bot commented Sep 9, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

panteliselef commented Sep 18, 2024

Uh oh!

panteliselef commented Sep 18, 2024

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

panteliselef commented Sep 27, 2024

Uh oh!

clerk-cookie commented Sep 27, 2024

Uh oh!

alexcarpenter left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

octoper left a comment

Choose a reason for hiding this comment

Uh oh!

anagstef left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

panteliselef commented Sep 9, 2024 •

edited

Loading

changeset-bot Bot commented Sep 9, 2024 •

edited

Loading

alexcarpenter left a comment •

edited

Loading