Add ability for user to delete themselves if permission present (#1307)

feat(clerk-js): Add delete self feature for users

- When permissions are present, users will see a section in their
  settings allowing them to delete their account.
- `createOrganizationEnabled` property was also added to users in
  anticipation of a feature allowing permission-gated org creation
  that should be landing in the next couple days.
- When a user's account is deleted, they are signed out and nav to
  the home page.

Author: jescalan

.changeset/perfect-zebras-cover.md

@@ -0,0 +1,7 @@
+---
+'@clerk/localizations': minor
+'@clerk/clerk-js': minor
+'@clerk/types': minor
+---
+
+Adds the ability for users to delete their own accounts, as long as they have permission to do so

package-lock.json

@@ -37,7 +37,8 @@
     "start": "echo \"Noop\"",
     "test": "jest",
     "test:ci": "jest --maxWorkers=50%",
-    "test:coverage": "jest --collectCoverage && open coverage/lcov-report/index.html"
+    "test:coverage": "jest --collectCoverage && open coverage/lcov-report/index.html",
+    "watch": "webpack --config webpack.config.js --env production --watch"
   },
   "dependencies": {
     "@clerk/localizations": "^1.18.1",

packages/clerk-js/package.json

@@ -224,6 +224,10 @@ export class User extends BaseResource implements UserResource {
     });
   };
 
+  delete = (): Promise<void> => {
+    return this._baseDelete({ path: '/me' });
+  };
+
   getSessions = async (): Promise<SessionWithActivities[]> => {
     if (this.cachedSessionsWithActivities) {
       return this.cachedSessionsWithActivities;

packages/clerk-js/src/core/resources/User.ts

@@ -1,5 +1,6 @@
 import type {
   Attributes,
+  Actions,
   OAuthProviders,
   OAuthStrategy,
   PasswordSettingsData,
@@ -29,6 +30,7 @@ export class UserSettings extends BaseResource implements UserSettingsResource {
   saml!: SamlSettings;
 
   attributes!: Attributes;
+  actions!: Actions;
   signIn!: SignInData;
   signUp!: SignUpData;
   passwordSettings!: PasswordSettingsData;
@@ -65,6 +67,7 @@ export class UserSettings extends BaseResource implements UserSettingsResource {
     this.attributes = Object.fromEntries(
       Object.entries(data.attributes).map(a => [a[0], { ...a[1], name: a[0] }]),
     ) as Attributes;
+    this.actions = data.actions;
     this.signIn = data.sign_in;
     this.signUp = data.sign_up;
     this.passwordSettings = {

packages/clerk-js/src/core/resources/UserSettings.ts

@@ -0,0 +1,42 @@
+import { useEnvironment, useCoreUser, useCoreClerk } from '../../contexts';
+import { localizationKeys, Text } from '../../customizables';
+import { ContentPage, Form, FormButtons, useCardState, withCardStateProvider } from '../../elements';
+import { handleError } from '../../utils';
+import { UserProfileBreadcrumbs } from './UserProfileNavbar';
+import { useRouter } from '../../router';
+
+export const DeletePage = withCardStateProvider(() => {
+  const card = useCardState();
+  const environment = useEnvironment();
+  const router = useRouter();
+  const user = useCoreUser();
+  const clerk = useCoreClerk();
+
+  const deleteUser = async () => {
+    try {
+      await user.delete();
+      if (clerk.client.activeSessions.length > 0) {
+        await router.navigate(environment.displayConfig.afterSignOutOneUrl);
+      } else {
+        await router.navigate(environment.displayConfig.afterSignOutAllUrl);
+      }
+    } catch (e) {
+      handleError(e, [], card.setError);
+    }
+  };
+
+  return (
+    <ContentPage
+      headerTitle={localizationKeys('userProfile.deletePage.title')}
+      Breadcrumbs={UserProfileBreadcrumbs}
+    >
+      <Form.Root onSubmit={deleteUser}>
+        <Text localizationKey={localizationKeys('userProfile.deletePage.description')} />
+        <FormButtons
+          submitLabel={localizationKeys('userProfile.deletePage.confirm')}
+          colorScheme='danger'
+        />
+      </Form.Root>
+    </ContentPage>
+  );
+});

packages/clerk-js/src/ui/components/UserProfile/DeletePage.tsx

@@ -0,0 +1,38 @@
+import { localizationKeys, Flex, Text, Col, Button } from '../../customizables';
+import { ProfileSection } from '../../elements';
+import { useRouter } from '../../router';
+
+export const DeleteSection = () => {
+  const { navigate } = useRouter();
+
+  return (
+    <ProfileSection
+      title={localizationKeys('userProfile.start.dangerSection.title')}
+      id='danger'
+    >
+      <Flex
+        justify='between'
+        sx={t => ({ marginTop: t.space.$2, marginLeft: t.space.$6 })}
+      >
+        <Col gap={1}>
+          <Text
+            variant='regularMedium'
+            localizationKey={localizationKeys('userProfile.start.dangerSection.deleteAccountTitle')}
+          />
+          <Text
+            variant='smallRegular'
+            colorScheme='neutral'
+            localizationKey={localizationKeys('userProfile.start.dangerSection.deleteAccountDescription')}
+          />
+        </Col>
+        <Button
+          aria-label='Delete account'
+          colorScheme='danger'
+          textVariant='buttonExtraSmallBold'
+          onClick={() => navigate(`delete`)}
+          localizationKey={localizationKeys('userProfile.start.dangerSection.deleteAccountButton')}
+        />
+      </Flex>
+    </ProfileSection>
+  );
+};

packages/clerk-js/src/ui/components/UserProfile/DeleteSection.tsx

@@ -13,9 +13,10 @@ import { UsernameSection } from './UsernameSection';
 import { UserProfileSection } from './UserProfileSection';
 import { getSecondFactors } from './utils';
 import { Web3Section } from './Web3Section';
+import { DeleteSection } from './DeleteSection';
 
 export const RootPage = withCardStateProvider(() => {
-  const { attributes, saml, social, instanceIsPasswordBased } = useEnvironment().userSettings;
+  const { attributes, saml, social, actions, instanceIsPasswordBased } = useEnvironment().userSettings;
   const card = useCardState();
   const user = useCoreUser();
   const showUsername = attributes.username.enabled;
@@ -26,6 +27,7 @@ export const RootPage = withCardStateProvider(() => {
   const showWeb3 = attributes.web3_wallet.enabled;
   const showPassword = instanceIsPasswordBased;
   const showMfa = getSecondFactors(attributes).length > 0;
+  const showDelete = actions.delete_self;
 
   return (
     <Col
@@ -54,6 +56,7 @@ export const RootPage = withCardStateProvider(() => {
         {showConnectedAccounts && <ConnectedAccountsSection />}
         {showSamlAccounts && <EnterpriseAccountsSection />}
         {showWeb3 && <Web3Section />}
+        {showDelete && <DeleteSection />}
       </Col>
       <Col
         elementDescriptor={descriptors.profilePage}

packages/clerk-js/src/ui/components/UserProfile/RootPage.tsx

@@ -19,6 +19,7 @@ import {
 import { RootPage } from './RootPage';
 import { UsernamePage } from './UsernamePage';
 import { Web3Page } from './Web3Page';
+import { DeletePage } from './DeletePage';
 
 export const UserProfileRoutes = (props: PropsOfComponent<typeof ProfileCardContent>) => {
   return (
@@ -102,6 +103,9 @@ export const UserProfileRoutes = (props: PropsOfComponent<typeof ProfileCardCont
         <PasswordPage />
       </Route>
       {/*</Route>*/}
+      <Route path='delete'>
+        <DeletePage />
+      </Route>
     </ProfileCardContent>
   );
 };