clerk/javascript @clerk/clerk-js@5.57.1

on GitHub

Patch Changes

• Fix issue where unverified field weren't showing up when ToS was enabled (#5404) by @octoper

• Lazy-loads experimental components within UserProfile, preventing unnecessary code from loading. (#5409) by @aeliox

• Fix an edge case where window.Clerk is re-assigned if the Clerk script is injected multiple times. (#5406) by @brkalow

• Export isReverificationCancelledError error helper (#5396) by @octoper

• Introduce __experimental_nextTask method for navigating to next tasks on a after-auth flow (#5377) by @LauraBeatris

• Update the resiliency logic for failed client attempts to allow the creation of a dev browser. (#5411) by @panteliselef

• This introducing changes to useReverification, the changes include removing the array and returning the fetcher directly and also the dropping the options throwOnCancel and onCancel in favour of always throwing the cancellation error. (#5396) by @octoper

  import { useReverification } from '@clerk/clerk-react';
  import { isReverificationCancelledError } from '@clerk/clerk-react/error';
  
  type MyData = {
    balance: number;
  };
  
  export function MyButton() {
    const fetchMyData = () => fetch('/api/balance').then(res => res.json() as Promise<MyData>);
    const enhancedFetcher = useReverification(fetchMyData);
  
    const handleClick = async () => {
      try {
        const myData = await enhancedFetcher();
        //     ^ is typed as `MyData`
      } catch (e) {
        // Handle error returned from the fetcher here
        // You can also handle cancellation with the following
        if (isReverificationCancelledError(err)) {
          // Handle the cancellation error here
        }
      }
    };
  
    return <button onClick={handleClick}>Update User</button>;
  }

  These changes are also adding a new handler in options called onNeedsReverification, which can be used to create a custom UI
  to handle re-verification flow. When the handler is passed the default UI our AIO components provide will not be triggered so you will have to create and handle the re-verification process.

  import { useReverification } from '@clerk/clerk-react';
  import { isReverificationCancelledError } from '@clerk/clerk-react/error';
  
  type MyData = {
    balance: number;
  };
  
  export function MyButton() {
    const fetchMyData = () => fetch('/api/balance').then(res => res.json() as Promise<MyData>);
    const enhancedFetcher = useReverification(fetchMyData, {
      onNeedsReverification: ({ complete, cancel, level }) => {
        // e.g open a modal here and handle the re-verification flow
      },
    });
  
    const handleClick = async () => {
      try {
        const myData = await enhancedFetcher();
        //     ^ is typed as `MyData`
      } catch (e) {
        // Handle error returned from the fetcher here
  
        // You can also handle cancellation with the following
        if (isReverificationCancelledError(err)) {
          // Handle the cancellation error here
        }
      }
    };
  
    return <button onClick={handleClick}>Update User</button>;
  }

• Updated dependencies [3910ebe, e513333]:

  • @clerk/types@4.49.1
  • @clerk/shared@3.1.0
  • @clerk/localizations@3.13.1