feat(clerk-js,types,nextjs,localizations,clerk-react): Introduce UserVerification as experimental #4016

panteliselef · 2024-08-26T07:50:28Z

Description

This PR introduces a new UI component called UserVerification as experimental. The new UI component allows for a user to "re-enter" their credentials (1fa/2fa) which results in them being reverified.

<UserVerification/> allows developers to easily build flows where verification is required before performing a sensitive action like updating other stored credentials or an application specific action like making a bank transfer.

Unit tests have been added which should make reviewers more confident. But more will follow (maybe some e2es) before the official launch.

APIs

`clerk-js`

export type __experimental_UserVerificationProps = RoutingOptions & {
  afterVerification?: () => void;
  afterVerificationUrl?: string;
  level?: 'L1.firstFactor' | 'L2.secondFactor' | 'L3.multiFactor' ;
  appearance?: UserVerificationTheme;
};

__experimental_openUserVerification: (props?: __experimental_UserVerificationModalProps) => void;
__experimental_closeUserVerification: () => void;
  
__experimental_mountUserVerification: (
    targetNode: HTMLDivElement,
    props?: __experimental_UserVerificationProps,
  ) => void;
__experimental_unmountUserVerification: (targetNode: HTMLDivElement) => void;

`clerk-react`

import {  __experimental_UserVerification } from '@clerk/clerk-react'

<__experimental_UserVerification />

2fa flow (the default)

default.mov

1fa flow

1fa.mov

multi factor flow (the above two combined)

mfa.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-08-26T07:50:32Z

🦋 Changeset detected

Latest commit: 0e5d8d2

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

This PR includes changesets to release 18 packages

Name	Type
@clerk/localizations	Minor
@clerk/chrome-extension	Minor
@clerk/nextjs	Minor
@clerk/clerk-react	Minor
@clerk/clerk-js	Minor
@clerk/types	Minor
@clerk/elements	Patch
@clerk/clerk-expo	Patch
@clerk/remix	Patch
@clerk/tanstack-start	Patch
@clerk/astro	Patch
@clerk/backend	Patch
@clerk/express	Patch
@clerk/fastify	Patch
@clerk/clerk-sdk-node	Patch
@clerk/shared	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

…ethods

panteliselef · 2024-08-27T17:40:57Z

packages/clerk-js/src/ui/components/UserVerification/index.tsx

+          routing: 'virtual',
+        }}
+      >
+        {/*TODO: Used by InvisibleRootBox, can we simplify? */}


For reviewers: Carried from SignIn

panteliselef · 2024-08-27T18:23:35Z

packages/clerk-js/src/ui/hooks/useAlternativeStrategies.ts

+export function useAlternativeStrategies({
+  filterOutFactor,
+  supportedFirstFactors: _supportedFirstFactors,
+}: {
+  filterOutFactor: SignInFactor | null | undefined;
+  supportedFirstFactors: SignInFirstFactor[] | null | undefined;
+}) {


For reviewers: I made this change in order to share the functionality across SignIn and UserVerification. Simply having the caller doing const { supportedFirstFactors } = useCoreSignIn(); seems like a good trade off.

panteliselef · 2024-08-27T20:31:44Z

packages/clerk-js/src/ui/components/UserVerification/UserVerificationFactorOnePassword.tsx

+              {/*<input*/}
+              {/*  readOnly*/}
+              {/*  id='identifier-field'*/}
+              {/*  name='identifier'*/}
+              {/*  value={signIn.identifier || ''}*/}
+              {/*  style={{ display: 'none' }}*/}
+              {/*/>*/}


@chanioxaris any ideas what we can use to solve this while the user is signed in ?

We can use the existing function that picks up the identifier based on the user attributes

panteliselef · 2024-08-27T20:37:38Z

packages/localizations/src/en-US.ts

+      getHelp: {
+        blockButton__emailSupport: 'Email support',
+        content:
+          'If you’re experiencing difficulty signing into your account, email us and we will work with you to restore access as soon as possible.',


All items are the same as sign in, except this one (2/2)

panteliselef · 2024-08-27T20:38:19Z

packages/localizations/src/en-US.ts

+        content:
+          'If you’re experiencing difficulty verifying your account, email us and we will work with you to restore access as soon as possible.',


All items are the same as sign in, except this one (2/4)

panteliselef · 2024-08-27T20:38:23Z

packages/localizations/src/en-US.ts

+      actionText: 'Don’t have any of these?',
+      blockButton__backupCode: 'Use a backup code',
+      blockButton__emailCode: 'Email code to {{identifier}}',
+      blockButton__password: 'Continue with your password',


All items are the same as sign in, except this one (1/4)

…-component # Conflicts: # packages/clerk-js/bundlewatch.config.json # packages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx # packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx # packages/clerk-js/src/ui/lazyModules/components.ts

panteliselef · 2024-08-28T11:33:48Z

packages/localizations/src/en-US.ts

+          'If you’re experiencing difficulty verifying your account, email us and we will work with you to restore access as soon as possible.',
+        title: 'Get help',
+      },
+      subtitle: 'Facing issues? You can use any of these methods for verification.',


All items are the same as sign in, except this one (3/4)

panteliselef · 2024-08-28T11:33:56Z

packages/localizations/src/en-US.ts

+      title: 'Check your email',
+    },
+    noAvailableMethods: {
+      message: "Cannot proceed with verification. There's no available authentication factor.",


All items are the same as sign in, except this one (4/4)

.changeset/calm-zoos-sort.md

.changeset/fifty-ravens-attack.md

.changeset/healthy-colts-look.md

.changeset/proud-dryers-smile.md

packages/clerk-js/src/ui/components/UserVerification/AlternativeMethods.tsx

LekoArts · 2024-08-28T12:43:53Z

packages/clerk-js/src/ui/components/UserVerification/__tests__/UVFactorOne.test.tsx

+    });
+  });
+
+  it.todo('renders the component for with strategy:phone_code');


TODO ⚠️

packages/clerk-js/src/ui/components/UserVerification/__tests__/UVFactorOne.test.tsx

LekoArts · 2024-08-28T12:46:12Z

packages/clerk-js/src/ui/components/UserVerification/__tests__/UVFactorOne.test.tsx

+  describe('Use another method', () => {
+    it.todo('should list enabled first factor methods without the current one');
+  });
+
+  describe('Get Help', () => {
+    it.todo('should render the get help component when clicking the "Get Help" button');
+  });


These will be added in a future PR (soon)

packages/localizations/src/en-US.ts

packages/types/src/clerk.ts

packages/clerk-js/src/ui/Components.tsx

…-component

octoper · 2024-08-29T11:24:10Z

packages/clerk-js/src/ui/components/UserVerification/AlternativeMethods.tsx

@@ -0,0 +1,135 @@
+import type { __experimental_SessionVerificationFirstFactor, SignInFactor } from '@clerk/types';


❓ @panteliselef what do you think about renaming this file to something UVFactorOneAlternativeMethods so it can match UVFactorTwoAlternativeMethods?

I have no problem, there is a great chance that event the UV prefix will be replaced in the coming days as the component name is not final yet

octoper

🔥

panteliselef added 8 commits August 26, 2024 10:34

Introduce UserVerification

eb38825

Expose mounted UserVerification

70faa65

Throttle loading to avoid flashes and navigate after verification

0ac4c86

respect status of SessionVerification

ecb1afc

WIP UV respect FAPI

ac04692

Improve types

0c520cd

Prepare and attempt second factor

80165e5

fix on complete first factor

515e1c9

clerk-cookie added types clerk-js nextjs react labels Aug 26, 2024

panteliselef added 2 commits August 26, 2024 11:03

fix build issue

a7c361e

changeset

1545760

panteliselef force-pushed the elef/user-607-userverification-ui-component branch 2 times, most recently from c2a8280 to efd5e79 Compare August 26, 2024 10:35

clerk-cookie added the chrome-extension label Aug 26, 2024

mark apis as experimental

ee6706a

panteliselef force-pushed the elef/user-607-userverification-ui-component branch from efd5e79 to ee6706a Compare August 26, 2024 11:02

panteliselef self-assigned this Aug 27, 2024

panteliselef added 2 commits August 27, 2024 13:23

chore(clerk-js): Remove sessionId parameter from all verify session m…

d29d30c

…ethods

cleanup handling responses and set the cached data after each response

02aea2a

panteliselef force-pushed the elef/user-607-userverification-ui-component branch from 28a6490 to 02aea2a Compare August 27, 2024 14:11

panteliselef added 5 commits August 27, 2024 17:11

add tests for UV first factor

f79953a

fix typo

5d7fc48

Add tests for 2fa

8700692

comment for reviewers

17431b3

clean up duplicate code

df685a2

panteliselef commented Aug 27, 2024

View reviewed changes

clerk-cookie added the localizations label Aug 27, 2024

update localizations for user verification

8cb52f6

panteliselef force-pushed the elef/user-607-userverification-ui-component branch from fb4b3ea to 8cb52f6 Compare August 27, 2024 20:37

panteliselef commented Aug 27, 2024

View reviewed changes

remove noop code

c0fa2c3

panteliselef force-pushed the elef/user-607-userverification-ui-component branch from 388258a to c0fa2c3 Compare August 27, 2024 20:42

panteliselef added 2 commits August 27, 2024 23:43

fix localization issues

f471aba

duplicate HavingTrouble.tsx under UV

61360c7

panteliselef marked this pull request as ready for review August 28, 2024 09:19

panteliselef requested a review from a team August 28, 2024 09:19

panteliselef added 3 commits August 28, 2024 14:25

fix nullable types

6e2ebc7

remove references to sign in

a130256

panteliselef commented Aug 28, 2024

View reviewed changes

panteliselef changed the title ~~Introduce UserVerification~~ Introduce UserVerification as experimental Aug 28, 2024

add changesets

b08ae51

panteliselef changed the title ~~Introduce UserVerification as experimental~~ feat(clerk-js,types,nextjs,localizations,clerk-react): Introduce UserVerification as experimental Aug 28, 2024

formatting

22129a0

LekoArts suggested changes Aug 28, 2024

View reviewed changes

alexcarpenter reviewed Aug 28, 2024

View reviewed changes

packages/types/src/clerk.ts Outdated Show resolved Hide resolved

packages/clerk-js/src/ui/Components.tsx Outdated Show resolved Hide resolved

panteliselef added 4 commits August 28, 2024 17:49

address pr reviews

f6059ff

update changesets

1a9dc66

update localization texts

d7fce4f

Merge branch 'refs/heads/main' into elef/user-607-userverification-ui…

0e5d8d2

…-component

LekoArts approved these changes Aug 29, 2024

View reviewed changes

octoper reviewed Aug 29, 2024

View reviewed changes

octoper approved these changes Aug 29, 2024

View reviewed changes

panteliselef merged commit afad9af into main Aug 29, 2024

panteliselef deleted the elef/user-607-userverification-ui-component branch August 29, 2024 17:18

clerk-cookie mentioned this pull request Aug 29, 2024

ci(repo): Version packages #4054

Merged

		content:
		'If you’re experiencing difficulty verifying your account, email us and we will work with you to restore access as soon as possible.',

		@@ -0,0 +1,135 @@
		import type { __experimental_SessionVerificationFirstFactor, SignInFactor } from '@clerk/types';

feat(clerk-js,types,nextjs,localizations,clerk-react): Introduce UserVerification as experimental #4016

feat(clerk-js,types,nextjs,localizations,clerk-react): Introduce UserVerification as experimental #4016

Uh oh!

Conversation

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

Uh oh!

Description

APIs

clerk-js

clerk-react

2fa flow (the default)

1fa flow

multi factor flow (the above two combined)

Checklist

Type of change

Uh oh!

changeset-bot bot commented Aug 26, 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!

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!

panteliselef Aug 27, 2024 • 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!

panteliselef Aug 27, 2024 • 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!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

panteliselef commented Aug 26, 2024 •

edited

Loading

`clerk-js`

`clerk-react`

changeset-bot bot commented Aug 26, 2024 •

edited

Loading

panteliselef Aug 27, 2024 •

edited

Loading

panteliselef Aug 27, 2024 •

edited

Loading