Merge branch 'main' into stefanos/core-2319-create-a-poc-for-hcaptcha

clerk · May 27, 2024 · 0dd731a · 0dd731a
2 parents 819f6c9 + 8529e41
commit 0dd731a
Show file tree

Hide file tree

Showing 8 changed files with 104 additions and 84 deletions.
diff --git a/.changeset/hip-pets-run.md b/.changeset/hip-pets-run.md
@@ -0,0 +1,5 @@
+---
+'@clerk/remix': patch
+---
+
+Deprecate `loadUser`, `loadSession` and `loadOrganization` on `rootAuthLoader` options
diff --git a/.changeset/large-cars-flash.md b/.changeset/large-cars-flash.md
@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Bug fix: Use the correct returnBack url when GoogleOneTap remains open across navigations.
+Previously it will only use the url that existed in the browser url bar at the time the component was initially rendered.
diff --git a/.changeset/tall-fans-flow.md b/.changeset/tall-fans-flow.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Add `aria-label` and `aria-expanded` in menu trigger to improve accessibility
diff --git a/packages/clerk-js/src/ui/components/GoogleOneTap/one-tap-start.tsx b/packages/clerk-js/src/ui/components/GoogleOneTap/one-tap-start.tsx
@@ -16,35 +16,14 @@ function _OneTapStart(): JSX.Element | null {
   const { navigate } = useRouter();
 
   const ctx = useGoogleOneTapContext();
-  const {
-    signInUrl,
-    signUpUrl,
-    continueSignUpUrl,
-    secondFactorUrl,
-    firstFactorUrl,
-    signUpForceRedirectUrl,
-    signInForceRedirectUrl,
-  } = ctx;
 
   async function oneTapCallback(response: GISCredentialResponse) {
     isPromptedRef.current = false;
     try {
       const res = await clerk.authenticateWithGoogleOneTap({
         token: response.credential,
       });
-      await clerk.handleGoogleOneTapCallback(
-        res,
-        {
-          signInUrl,
-          signUpUrl,
-          continueSignUpUrl,
-          secondFactorUrl,
-          firstFactorUrl,
-          signUpForceRedirectUrl,
-          signInForceRedirectUrl,
-        },
-        navigate,
-      );
+      await clerk.handleGoogleOneTapCallback(res, ctx.generateCallbackUrls(window.location.href), navigate);
     } catch (e) {
       console.error(e);
     }

diff --git a/packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx b/packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx
@@ -1,7 +1,7 @@
 import { useClerk } from '@clerk/shared/react';
 import { snakeToCamel } from '@clerk/shared/underscore';
-import type { OrganizationResource, UserResource } from '@clerk/types';
-import React, { useMemo } from 'react';
+import type { HandleOAuthCallbackParams, OrganizationResource, UserResource } from '@clerk/types';
+import React, { useCallback, useMemo } from 'react';
 
 import { SIGN_IN_INITIAL_VALUE_KEYS, SIGN_UP_INITIAL_VALUE_KEYS } from '../../core/constants';
 import { buildURL, createDynamicParamParser } from '../../utils';
@@ -506,67 +506,76 @@ export const useGoogleOneTapContext = () => {
     throw new Error('Clerk: useGoogleOneTapContext called outside GoogleOneTap.');
   }
 
-  const redirectUrls = new RedirectUrls(
-    options,
-    {
-      ...ctx,
-      signInFallbackRedirectUrl: window.location.href,
-      signUpFallbackRedirectUrl: window.location.href,
+  const generateCallbackUrls = useCallback(
+    (returnBackUrl: string): HandleOAuthCallbackParams => {
+      const redirectUrls = new RedirectUrls(
+        options,
+        {
+          ...ctx,
+          signInFallbackRedirectUrl: returnBackUrl,
+          signUpFallbackRedirectUrl: returnBackUrl,
+        },
+        queryParams,
+      );
+
+      let signUpUrl = options.signUpUrl || displayConfig.signUpUrl;
+      let signInUrl = options.signInUrl || displayConfig.signInUrl;
+
+      const preservedParams = redirectUrls.getPreservedSearchParams();
+      signInUrl = buildURL({ base: signInUrl, hashSearchParams: [queryParams, preservedParams] }, { stringify: true });
+      signUpUrl = buildURL({ base: signUpUrl, hashSearchParams: [queryParams, preservedParams] }, { stringify: true });
+
+      const signInForceRedirectUrl = redirectUrls.getAfterSignInUrl();
+      const signUpForceRedirectUrl = redirectUrls.getAfterSignUpUrl();
+
+      const signUpContinueUrl = buildURL(
+        {
+          base: signUpUrl,
+          hashPath: '/continue',
+          hashSearch: new URLSearchParams({
+            sign_up_force_redirect_url: signUpForceRedirectUrl,
+          }).toString(),
+        },
+        { stringify: true },
+      );
+
+      const firstFactorUrl = buildURL(
+        {
+          base: signInUrl,
+          hashPath: '/factor-one',
+          hashSearch: new URLSearchParams({
+            sign_in_force_redirect_url: signInForceRedirectUrl,
+          }).toString(),
+        },
+        { stringify: true },
+      );
+      const secondFactorUrl = buildURL(
+        {
+          base: signInUrl,
+          hashPath: '/factor-two',
+          hashSearch: new URLSearchParams({
+            sign_in_force_redirect_url: signInForceRedirectUrl,
+          }).toString(),
+        },
+        { stringify: true },
+      );
+
+      return {
+        signInUrl,
+        signUpUrl,
+        firstFactorUrl,
+        secondFactorUrl,
+        continueSignUpUrl: signUpContinueUrl,
+        signInForceRedirectUrl,
+        signUpForceRedirectUrl,
+      };
     },
-    queryParams,
-  );
-
-  let signUpUrl = options.signUpUrl || displayConfig.signUpUrl;
-  let signInUrl = options.signInUrl || displayConfig.signInUrl;
-
-  const preservedParams = redirectUrls.getPreservedSearchParams();
-  signInUrl = buildURL({ base: signInUrl, hashSearchParams: [queryParams, preservedParams] }, { stringify: true });
-  signUpUrl = buildURL({ base: signUpUrl, hashSearchParams: [queryParams, preservedParams] }, { stringify: true });
-
-  const signInForceRedirectUrl = redirectUrls.getAfterSignInUrl();
-  const signUpForceRedirectUrl = redirectUrls.getAfterSignUpUrl();
-
-  const signUpContinueUrl = buildURL(
-    {
-      base: signUpUrl,
-      hashPath: '/continue',
-      hashSearch: new URLSearchParams({
-        sign_up_force_redirect_url: signUpForceRedirectUrl,
-      }).toString(),
-    },
-    { stringify: true },
-  );
-
-  const firstFactorUrl = buildURL(
-    {
-      base: signInUrl,
-      hashPath: '/factor-one',
-      hashSearch: new URLSearchParams({
-        sign_in_force_redirect_url: signInForceRedirectUrl,
-      }).toString(),
-    },
-    { stringify: true },
-  );
-  const secondFactorUrl = buildURL(
-    {
-      base: signInUrl,
-      hashPath: '/factor-two',
-      hashSearch: new URLSearchParams({
-        sign_in_force_redirect_url: signInForceRedirectUrl,
-      }).toString(),
-    },
-    { stringify: true },
+    [ctx, displayConfig.signInUrl, displayConfig.signUpUrl, options, queryParams],
   );
 
   return {
     ...ctx,
     componentName,
-    signInUrl,
-    signUpUrl,
-    firstFactorUrl,
-    secondFactorUrl,
-    continueSignUpUrl: signUpContinueUrl,
-    signInForceRedirectUrl,
-    signUpForceRedirectUrl,
+    generateCallbackUrls,
   };
 };
diff --git a/packages/clerk-js/src/ui/elements/Menu.tsx b/packages/clerk-js/src/ui/elements/Menu.tsx
@@ -44,12 +44,14 @@ export const Menu = withFloatingTree((props: MenuProps) => {
   );
 });
 
-type MenuTriggerProps = React.PropsWithChildren<Record<never, never>>;
+type MenuTriggerProps = React.PropsWithChildren<{ arialLabel?: string | ((open: boolean) => string) }>;
 
 export const MenuTrigger = (props: MenuTriggerProps) => {
-  const { children } = props;
+  const { children, arialLabel } = props;
   const { popoverCtx, elementId } = useMenuState();
-  const { reference, toggle } = popoverCtx;
+  const { reference, toggle, isOpen } = popoverCtx;
+
+  const normalizedAriaLabel = typeof arialLabel === 'function' ? arialLabel(isOpen) : arialLabel;
 
   if (!isValidElement(children)) {
     return null;
@@ -60,6 +62,8 @@ export const MenuTrigger = (props: MenuTriggerProps) => {
     ref: reference,
     elementDescriptor: children.props.elementDescriptor || descriptors.menuButton,
     elementId: children.props.elementId || descriptors.menuButton.setId(elementId),
+    'aria-label': normalizedAriaLabel,
+    'aria-expanded': isOpen,
     onClick: (e: React.MouseEvent) => {
       children.props?.onClick?.(e);
       toggle();

diff --git a/packages/clerk-js/src/ui/elements/ThreeDotsMenu.tsx b/packages/clerk-js/src/ui/elements/ThreeDotsMenu.tsx
@@ -21,7 +21,7 @@ export const ThreeDotsMenu = (props: ThreeDotsMenuProps) => {
   const { actions, elementId } = props;
   return (
     <Menu elementId={elementId}>
-      <MenuTrigger>
+      <MenuTrigger arialLabel={isOpen => `${isOpen ? 'Close' : 'Open'} menu`}>
         <Button
           sx={t => ({
             padding: t.space.$0x5,

diff --git a/packages/remix/src/ssr/types.ts b/packages/remix/src/ssr/types.ts
@@ -9,8 +9,20 @@ export type RootAuthLoaderOptions = {
   publishableKey?: string;
   jwtKey?: string;
   secretKey?: string;
+  /**
+   * @deprecated This option will be removed in the next major version.
+   * Use session token claims instead: https://clerk.com/docs/backend-requests/making/custom-session-token
+   */
   loadUser?: boolean;
+  /**
+   * @deprecated This option will be removed in the next major version.
+   * Use session token claims instead: https://clerk.com/docs/backend-requests/making/custom-session-token
+   */
   loadSession?: boolean;
+  /**
+   * @deprecated This option will be removed in the next major version.
+   * Use session token claims instead: https://clerk.com/docs/backend-requests/making/custom-session-token
+   */
   loadOrganization?: boolean;
   authorizedParties?: [];
   signInUrl?: string;