From 9bbc0845124e41e1390fd638dba7b798bdff0d50 Mon Sep 17 00:00:00 2001 From: Jeff Escalante Date: Tue, 6 Jun 2023 13:32:59 -0400 Subject: [PATCH 01/13] feat(clerk-js): Add createOrganizationEnabled and deleteSelfEnabled properties to User --- packages/clerk-js/src/core/resources/User.ts | 3 +++ packages/types/src/user.ts | 2 ++ 2 files changed, 5 insertions(+) diff --git a/packages/clerk-js/src/core/resources/User.ts b/packages/clerk-js/src/core/resources/User.ts index de5fdf22dce..e0030e3efb8 100644 --- a/packages/clerk-js/src/core/resources/User.ts +++ b/packages/clerk-js/src/core/resources/User.ts @@ -315,6 +315,9 @@ export class User extends BaseResource implements UserResource { this.backupCodeEnabled = data.backup_code_enabled; this.twoFactorEnabled = data.two_factor_enabled; + this.createOrganizationEnabled = data.create_organization_enabled; + this.deleteSelfEnabled = data.delete_self_enabled; + if (data.last_sign_in_at) { this.lastSignInAt = unixEpochToDate(data.last_sign_in_at); } diff --git a/packages/types/src/user.ts b/packages/types/src/user.ts index 64db23589bc..59adfbed34a 100644 --- a/packages/types/src/user.ts +++ b/packages/types/src/user.ts @@ -77,6 +77,8 @@ export interface UserResource extends ClerkResource { publicMetadata: UserPublicMetadata; unsafeMetadata: UserUnsafeMetadata; lastSignInAt: Date | null; + createOrganizationEnabled: boolean; + deleteSelfEnabled: boolean; updatedAt: Date | null; createdAt: Date | null; From 32176e1786f33d5b91bef90b9764678407f3ec0e Mon Sep 17 00:00:00 2001 From: Jeff Escalante Date: Tue, 6 Jun 2023 13:32:59 -0400 Subject: [PATCH 02/13] 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. --- package-lock.json | 86 ++++----- packages/clerk-js/package.json | 3 +- packages/clerk-js/playground.html | 170 ++++++++++++++++++ .../src/core/resources/Organization.ts | 2 + packages/clerk-js/src/core/resources/User.ts | 6 + .../src/core/resources/UserSettings.ts | 3 + .../__snapshots__/Organization.test.ts.snap | 1 + .../OrganizationMembership.test.ts.snap | 1 + .../OrganizationSettings.tsx | 1 + .../src/ui/components/SignIn/SignIn.tsx | 2 +- .../ui/components/UserProfile/DeletePage.tsx | 44 +++++ .../components/UserProfile/DeleteSection.tsx | 38 ++++ .../ui/components/UserProfile/RootPage.tsx | 5 +- .../UserProfile/UserProfileNavbar.tsx | 1 + .../UserProfile/UserProfileRoutes.tsx | 4 + packages/localizations/src/en-US.ts | 11 ++ packages/types/src/appearance.ts | 1 + packages/types/src/json.ts | 3 + packages/types/src/localization.ts | 11 ++ packages/types/src/organization.ts | 1 + packages/types/src/user.ts | 1 + packages/types/src/userSettings.ts | 7 + 22 files changed, 356 insertions(+), 46 deletions(-) create mode 100644 packages/clerk-js/playground.html create mode 100644 packages/clerk-js/src/ui/components/UserProfile/DeletePage.tsx create mode 100644 packages/clerk-js/src/ui/components/UserProfile/DeleteSection.tsx diff --git a/package-lock.json b/package-lock.json index d1876084550..bb7e5d3ab93 100644 --- a/package-lock.json +++ b/package-lock.json @@ -41321,10 +41321,10 @@ }, "packages/backend": { "name": "@clerk/backend", - "version": "0.21.0", + "version": "0.22.0", "license": "MIT", "dependencies": { - "@clerk/types": "^3.41.0", + "@clerk/types": "^3.41.1", "@peculiar/webcrypto": "1.4.1", "@types/node": "16.18.6", "deepmerge": "4.2.2", @@ -41365,11 +41365,11 @@ }, "packages/chrome-extension": { "name": "@clerk/chrome-extension", - "version": "0.3.7", + "version": "0.3.8", "license": "MIT", "dependencies": { - "@clerk/clerk-js": "^4.45.0", - "@clerk/clerk-react": "^4.18.0" + "@clerk/clerk-js": "^4.46.0", + "@clerk/clerk-react": "^4.19.0" }, "devDependencies": { "@types/chrome": "*", @@ -41385,12 +41385,12 @@ }, "packages/clerk-js": { "name": "@clerk/clerk-js", - "version": "4.45.0", + "version": "4.46.0", "license": "MIT", "dependencies": { - "@clerk/localizations": "^1.17.0", - "@clerk/shared": "^0.17.2", - "@clerk/types": "^3.41.0", + "@clerk/localizations": "^1.17.1", + "@clerk/shared": "^0.18.0", + "@clerk/types": "^3.41.1", "@emotion/cache": "11.10.5", "@emotion/react": "11.10.5", "@floating-ui/react": "0.19.0", @@ -41788,16 +41788,16 @@ }, "packages/expo": { "name": "@clerk/clerk-expo", - "version": "0.17.7", + "version": "0.17.8", "license": "MIT", "dependencies": { - "@clerk/clerk-js": "^4.45.0", - "@clerk/clerk-react": "^4.18.0", + "@clerk/clerk-js": "^4.46.0", + "@clerk/clerk-react": "^4.19.0", "base-64": "1.0.0", "react-native-url-polyfill": "1.3.0" }, "devDependencies": { - "@clerk/types": "^3.41.0", + "@clerk/types": "^3.41.1", "@types/base-64": "^1.0.0", "@types/node": "^16.11.55", "@types/react": "*", @@ -41816,11 +41816,11 @@ }, "packages/fastify": { "name": "@clerk/fastify", - "version": "0.4.5", + "version": "0.4.6", "license": "MIT", "dependencies": { - "@clerk/backend": "^0.21.0", - "@clerk/types": "^3.41.0", + "@clerk/backend": "^0.22.0", + "@clerk/types": "^3.41.1", "cookies": "0.8.0" }, "devDependencies": { @@ -41836,13 +41836,13 @@ } }, "packages/gatsby-plugin-clerk": { - "version": "4.3.6", + "version": "4.3.7", "license": "MIT", "dependencies": { - "@clerk/backend": "^0.21.0", - "@clerk/clerk-react": "^4.18.0", - "@clerk/clerk-sdk-node": "^4.10.3", - "@clerk/types": "^3.41.0", + "@clerk/backend": "^0.22.0", + "@clerk/clerk-react": "^4.19.0", + "@clerk/clerk-sdk-node": "^4.10.4", + "@clerk/types": "^3.41.1", "cookie": "0.5.0", "tslib": "2.4.1" }, @@ -41865,10 +41865,10 @@ }, "packages/localizations": { "name": "@clerk/localizations", - "version": "1.17.0", + "version": "1.17.1", "license": "MIT", "dependencies": { - "@clerk/types": "^3.41.0" + "@clerk/types": "^3.41.1" }, "devDependencies": { "tsup": "*", @@ -41883,13 +41883,13 @@ }, "packages/nextjs": { "name": "@clerk/nextjs", - "version": "4.19.1", + "version": "4.20.0", "license": "MIT", "dependencies": { - "@clerk/backend": "^0.21.0", - "@clerk/clerk-react": "^4.18.0", - "@clerk/clerk-sdk-node": "^4.10.3", - "@clerk/types": "^3.41.0", + "@clerk/backend": "^0.22.0", + "@clerk/clerk-react": "^4.19.0", + "@clerk/clerk-sdk-node": "^4.10.4", + "@clerk/types": "^3.41.1", "path-to-regexp": "6.2.1", "tslib": "2.4.1" }, @@ -41922,11 +41922,11 @@ }, "packages/react": { "name": "@clerk/clerk-react", - "version": "4.18.0", + "version": "4.19.0", "license": "MIT", "dependencies": { - "@clerk/shared": "^0.17.2", - "@clerk/types": "^3.41.0", + "@clerk/shared": "^0.18.0", + "@clerk/types": "^3.41.1", "swr": "1.3.0", "tslib": "2.4.1" }, @@ -41950,13 +41950,13 @@ }, "packages/remix": { "name": "@clerk/remix", - "version": "2.6.5", + "version": "2.6.6", "license": "MIT", "dependencies": { - "@clerk/backend": "^0.21.0", - "@clerk/clerk-react": "^4.18.0", - "@clerk/shared": "^0.17.2", - "@clerk/types": "^3.41.0", + "@clerk/backend": "^0.22.0", + "@clerk/clerk-react": "^4.19.0", + "@clerk/shared": "^0.18.0", + "@clerk/types": "^3.41.1", "cookie": "0.5.0", "tslib": "2.4.1" }, @@ -41984,11 +41984,11 @@ }, "packages/sdk-node": { "name": "@clerk/clerk-sdk-node", - "version": "4.10.3", + "version": "4.10.4", "license": "MIT", "dependencies": { - "@clerk/backend": "^0.21.0", - "@clerk/types": "^3.41.0", + "@clerk/backend": "^0.22.0", + "@clerk/types": "^3.41.1", "@types/cookies": "0.7.7", "@types/express": "4.17.14", "@types/node-fetch": "2.6.2", @@ -42028,7 +42028,7 @@ }, "packages/shared": { "name": "@clerk/shared", - "version": "0.17.2", + "version": "0.18.0", "license": "ISC", "dependencies": { "glob-to-regexp": "0.4.1", @@ -42036,7 +42036,7 @@ "swr": "1.3.0" }, "devDependencies": { - "@clerk/types": "^3.41.0", + "@clerk/types": "^3.41.1", "@types/glob-to-regexp": "0.4.1", "@types/js-cookie": "3.0.2", "tsup": "*", @@ -42051,7 +42051,7 @@ "version": "1.7.5", "license": "MIT", "devDependencies": { - "@clerk/types": "^3.41.0", + "@clerk/types": "^3.41.1", "typescript": "*" }, "engines": { @@ -42063,7 +42063,7 @@ }, "packages/types": { "name": "@clerk/types", - "version": "3.41.0", + "version": "3.41.1", "license": "MIT", "dependencies": { "csstype": "3.1.1" diff --git a/packages/clerk-js/package.json b/packages/clerk-js/package.json index 923ef76384a..d79733396f9 100644 --- a/packages/clerk-js/package.json +++ b/packages/clerk-js/package.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", diff --git a/packages/clerk-js/playground.html b/packages/clerk-js/playground.html new file mode 100644 index 00000000000..ba9b891b300 --- /dev/null +++ b/packages/clerk-js/playground.html @@ -0,0 +1,170 @@ + + + + + + + + +
+
+

Clerk JS Playground

+
+
+ +
+
+
+
+

+ A simple playground for tinkering with vanilla js clerk and testing changes to components. To get started, + create an application on Clerk and set your API key to the window.__clerk_frontend_api variable at + the top of the source code. +

+

Use the buttons below to trigger basic functionality. Feel free to add more buttons as well!

+ + + + + + + +
+ +
+
+ + + + diff --git a/packages/clerk-js/src/core/resources/Organization.ts b/packages/clerk-js/src/core/resources/Organization.ts index 0e519e52990..78b45912070 100644 --- a/packages/clerk-js/src/core/resources/Organization.ts +++ b/packages/clerk-js/src/core/resources/Organization.ts @@ -26,6 +26,7 @@ export class Organization extends BaseResource implements OrganizationResource { slug!: string; logoUrl!: string; imageUrl!: string; + adminDeleteEnabled!: boolean; publicMetadata: OrganizationPublicMetadata = {}; createdAt!: Date; updatedAt!: Date; @@ -179,6 +180,7 @@ export class Organization extends BaseResource implements OrganizationResource { this.publicMetadata = data.public_metadata; this.membersCount = data.members_count; this.pendingInvitationsCount = data.pending_invitations_count; + this.adminDeleteEnabled = data.admin_delete_enabled; this.createdAt = unixEpochToDate(data.created_at); this.updatedAt = unixEpochToDate(data.updated_at); return this; diff --git a/packages/clerk-js/src/core/resources/User.ts b/packages/clerk-js/src/core/resources/User.ts index e0030e3efb8..2ece3781a9d 100644 --- a/packages/clerk-js/src/core/resources/User.ts +++ b/packages/clerk-js/src/core/resources/User.ts @@ -80,6 +80,8 @@ export class User extends BaseResource implements UserResource { publicMetadata: UserPublicMetadata = {}; unsafeMetadata: UserUnsafeMetadata = {}; lastSignInAt: Date | null = null; + createOrganizationEnabled: boolean = false; + deleteSelfEnabled: boolean = false; updatedAt: Date | null = null; createdAt: Date | null = null; @@ -224,6 +226,10 @@ export class User extends BaseResource implements UserResource { }); }; + delete = (): Promise => { + return this._baseDelete({ path: '/me' }); + }; + getSessions = async (): Promise => { if (this.cachedSessionsWithActivities) { return this.cachedSessionsWithActivities; diff --git a/packages/clerk-js/src/core/resources/UserSettings.ts b/packages/clerk-js/src/core/resources/UserSettings.ts index 334ad64bcb0..49d9e86d3bc 100644 --- a/packages/clerk-js/src/core/resources/UserSettings.ts +++ b/packages/clerk-js/src/core/resources/UserSettings.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 = { diff --git a/packages/clerk-js/src/core/resources/__snapshots__/Organization.test.ts.snap b/packages/clerk-js/src/core/resources/__snapshots__/Organization.test.ts.snap index 0c8b0b81673..93ec3a1cb5e 100644 --- a/packages/clerk-js/src/core/resources/__snapshots__/Organization.test.ts.snap +++ b/packages/clerk-js/src/core/resources/__snapshots__/Organization.test.ts.snap @@ -3,6 +3,7 @@ exports[`Organization has the same initial properties 1`] = ` Organization { "addMember": [Function], + "adminDeleteEnabled": undefined, "createdAt": 1970-01-01T00:00:12.345Z, "destroy": [Function], "getMemberships": [Function], diff --git a/packages/clerk-js/src/core/resources/__snapshots__/OrganizationMembership.test.ts.snap b/packages/clerk-js/src/core/resources/__snapshots__/OrganizationMembership.test.ts.snap index da75feede94..6ea025ddb8c 100644 --- a/packages/clerk-js/src/core/resources/__snapshots__/OrganizationMembership.test.ts.snap +++ b/packages/clerk-js/src/core/resources/__snapshots__/OrganizationMembership.test.ts.snap @@ -7,6 +7,7 @@ OrganizationMembership { "id": "test_id", "organization": Organization { "addMember": [Function], + "adminDeleteEnabled": undefined, "createdAt": 1970-01-01T00:00:12.345Z, "destroy": [Function], "getMemberships": [Function], diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationSettings.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationSettings.tsx index c15fa5c1849..96714d69725 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationSettings.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationSettings.tsx @@ -89,6 +89,7 @@ const OrganizationDangerSection = () => { localizationKey={localizationKeys('organizationProfile.profilePage.dangerSection.leaveOrganization.title')} /> + {/* This is where we add the "delete organization" */} ); }; diff --git a/packages/clerk-js/src/ui/components/SignIn/SignIn.tsx b/packages/clerk-js/src/ui/components/SignIn/SignIn.tsx index d3dcfc0e6c0..5197318a419 100644 --- a/packages/clerk-js/src/ui/components/SignIn/SignIn.tsx +++ b/packages/clerk-js/src/ui/components/SignIn/SignIn.tsx @@ -4,7 +4,7 @@ import React from 'react'; import { SignInEmailLinkFlowComplete } from '../../common/EmailLinkCompleteFlowCard'; import { ComponentContext, useCoreClerk, useSignInContext, withCoreSessionSwitchGuard } from '../../contexts'; import { Flow } from '../../customizables'; -import { Route, Switch, VIRTUAL_ROUTER_BASE_PATH } from '../../router'; +import { Route, Switch, useRouter, VIRTUAL_ROUTER_BASE_PATH } from '../../router'; import { ResetPassword } from './ResetPassword'; import { ResetPasswordSuccess } from './ResetPasswordSuccess'; import { SignInAccountSwitcher } from './SignInAccountSwitcher'; diff --git a/packages/clerk-js/src/ui/components/UserProfile/DeletePage.tsx b/packages/clerk-js/src/ui/components/UserProfile/DeletePage.tsx new file mode 100644 index 00000000000..84ac9883eb3 --- /dev/null +++ b/packages/clerk-js/src/ui/components/UserProfile/DeletePage.tsx @@ -0,0 +1,44 @@ +import { useCoreClerk, useCoreSession, useEnvironment, useCoreUser } from '../../contexts'; +import { localizationKeys, Text } from '../../customizables'; +import { ContentPage, Form, FormButtons, SuccessPage, 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 clerk = useCoreClerk(); + const session = useCoreSession(); + const user = useCoreUser(); + + const deleteUser = async () => { + try { + await user.delete(); + await clerk.signOut({ sessionId: session.id }); + router.navigate(environment.displayConfig.homeUrl); + // TODO: for routerless mode, explicitly open the "choose" route + clerk.openSignIn(); + } catch (e) { + handleError(e, [], card.setError); + } + }; + + return ( + <> + + + + + + + + ); +}); diff --git a/packages/clerk-js/src/ui/components/UserProfile/DeleteSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/DeleteSection.tsx new file mode 100644 index 00000000000..6da03eec2b6 --- /dev/null +++ b/packages/clerk-js/src/ui/components/UserProfile/DeleteSection.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 ( + + ({ marginTop: t.space.$2, marginLeft: t.space.$6 })} + > + + + + +