feat(clerk-js,types,localizations): Render "Restricted access" screen for restricted signup mode (#4220)

Author: nikospapcom

.changeset/warm-points-accept.md

@@ -0,0 +1,7 @@
+---
+"@clerk/localizations": minor
+"@clerk/clerk-js": minor
+"@clerk/types": minor
+---
+
+Render "Restricted access" screen in `<SignUp />` component when `signup.mode` in `userSettings` is `restricted`

packages/clerk-js/src/ui/components/SignUp/SignUpRestrictedAccess.tsx

@@ -0,0 +1,39 @@
+import { useClerk } from '@clerk/shared/react';
+
+import { useSignUpContext } from '../../contexts';
+import { Icon, localizationKeys } from '../../customizables';
+import { Card, Header } from '../../elements';
+import { useCardState } from '../../elements/contexts';
+import { Block } from '../../icons';
+export const SignUpRestrictedAccess = () => {
+  const clerk = useClerk();
+  const card = useCardState();
+  const { signInUrl } = useSignUpContext();
+
+  return (
+    <Card.Root>
+      <Card.Content>
+        <Header.Root showLogo>
+          <Icon
+            icon={Block}
+            sx={t => ({
+              margin: 'auto',
+              width: t.sizes.$12,
+              height: t.sizes.$12,
+            })}
+          />
+          <Header.Title localizationKey={localizationKeys('signUp.restrictedAccess.title')} />
+          <Header.Subtitle localizationKey={localizationKeys('signUp.restrictedAccess.subtitle')} />
+        </Header.Root>
+        <Card.Alert>{card.error}</Card.Alert>
+        <Card.Action elementId='signUp'>
+          <Card.ActionLink
+            localizationKey={localizationKeys('signUp.restrictedAccess.actionLink')}
+            to={clerk.buildUrlWithAuth(signInUrl)}
+          />
+        </Card.Action>
+      </Card.Content>
+      <Card.Footer />
+    </Card.Root>
+  );
+};

packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx

@@ -1,7 +1,7 @@
 import { useClerk } from '@clerk/shared/react';
 import React from 'react';
 
-import { ERROR_CODES } from '../../../core/constants';
+import { ERROR_CODES, SIGN_UP_MODES } from '../../../core/constants';
 import { getClerkQueryParam, removeClerkQueryParam } from '../../../utils/getClerkQueryParam';
 import { buildSSOCallbackURL, withRedirectToAfterSignUp } from '../../common';
 import { useCoreSignUp, useEnvironment, useSignUpContext } from '../../contexts';
@@ -22,6 +22,7 @@ import { buildRequest, createPasswordError, handleError, useFormControl } from '
 import { SignUpForm } from './SignUpForm';
 import type { ActiveIdentifier } from './signUpFormHelpers';
 import { determineActiveFields, emailOrPhone, getInitialActiveIdentifier, showFormFields } from './signUpFormHelpers';
+import { SignUpRestrictedAccess } from './SignUpRestrictedAccess';
 import { SignUpSocialButtons } from './SignUpSocialButtons';
 import { completeSignUpFlow } from './util';
 
@@ -49,6 +50,8 @@ function _SignUpStart(): JSX.Element {
     userSettings: { passwordSettings },
   } = useEnvironment();
 
+  const { mode } = userSettings.signUp;
+
   const formState = {
     firstName: useFormControl('firstName', signUp.firstName || initialValues.firstName || '', {
       type: 'text',
@@ -246,6 +249,10 @@ function _SignUpStart(): JSX.Element {
     (!hasTicket || missingRequirementsWithTicket) && userSettings.authenticatableSocialStrategies.length > 0;
   const showWeb3Providers = !hasTicket && userSettings.web3FirstFactors.length > 0;
 
+  if (mode === SIGN_UP_MODES.RESTRICTED && !hasTicket) {
+    return <SignUpRestrictedAccess />;
+  }
+
   return (
     <Flow.Part part='start'>
       <Card.Root>

packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpStart.test.tsx

@@ -245,6 +245,17 @@ describe('SignUpStart', () => {
     });
   });
 
+  describe('Restricted signup', () => {
+    it('shows the restricted component', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withRestrictedMode();
+      });
+
+      render(<SignUpStart />, { wrapper });
+      screen.getByText('Restricted access');
+    });
+  });
+
   describe('ticket flow', () => {
     it('calls the appropriate resource function upon detecting the ticket', async () => {
       const { wrapper, fixtures } = await createFixtures(f => {
@@ -319,5 +330,32 @@ describe('SignUpStart', () => {
         expect.not.stringContaining('__clerk_invitation_token'),
       );
     });
+
+    it('should show the sign up form when ticket detected and mode is restricted', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withEmailAddress();
+        f.withPassword();
+        f.withRestrictedMode();
+      });
+      fixtures.signUp.create.mockResolvedValueOnce({} as SignUpResource);
+
+      Object.defineProperty(window, 'location', {
+        writable: true,
+        value: { href: 'http://localhost/sign-up?__clerk_ticket=test_ticket' },
+      });
+      Object.defineProperty(window, 'history', {
+        writable: true,
+        value: { replaceState: jest.fn() },
+      });
+
+      render(
+        <CardStateProvider>
+          <SignUpStart />
+        </CardStateProvider>,
+        { wrapper },
+      );
+
+      await waitFor(() => screen.getByText(/create your account/i));
+    });
   });
 });

packages/clerk-js/src/ui/icons/block.svg

@@ -61,3 +61,4 @@ export { default as CaretRight } from './caret-right.svg';
 export { default as Organization } from './organization.svg';
 export { default as Users } from './users.svg';
 export { default as Fingerprint } from './fingerprint.svg';
+export { default as Block } from './block.svg';

packages/clerk-js/src/ui/icons/index.ts

@@ -319,7 +319,10 @@ const createUserSettingsFixtureHelpers = (environment: EnvironmentJSON) => {
     show_zxcvbn: false,
     min_zxcvbn_strength: 0,
   };
-  us.sign_up.mode = SIGN_UP_MODES.PUBLIC;
+  us.sign_up = {
+    ...us.sign_up,
+    mode: SIGN_UP_MODES.PUBLIC,
+  };
 
   const emptyAttribute = {
     first_factors: [],

packages/clerk-js/src/ui/utils/test/fixtureHelpers.ts

@@ -508,6 +508,11 @@ export const enUS: LocalizationResource = {
       subtitle: 'Welcome! Please fill in the details to get started.',
       title: 'Create your account',
     },
+    restrictedAccess: {
+      title: 'Restricted access',
+      subtitle: 'Access to this app is limited, and an invitation is required to sign up.',
+      actionLink: 'Back to sign in',
+    },
   },
   socialButtonsBlockButton: 'Continue with {{provider|titleize}}',
   socialButtonsBlockButtonManyInView: '{{provider|titleize}}',

packages/localizations/src/en-US.ts

@@ -144,6 +144,11 @@ type _LocalizationResource = {
       actionText: LocalizationValue;
       actionLink: LocalizationValue;
     };
+    restrictedAccess: {
+      title: LocalizationValue;
+      subtitle: LocalizationValue;
+      actionLink: LocalizationValue;
+    };
   };
   signIn: {
     start: {