Skip to content

feat(clerk-js): Hide passkeys section when enterprise account disables additional identifications #6585

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
LauraBeatris merged 3 commits into from
Aug 20, 2025
Merged

feat(clerk-js): Hide passkeys section when enterprise account disables additional identifications #6585

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0067c61
feat(clerk-js): hide passkeys section when enterprise account disable…
NicolasLopes7 Aug 20, 2025
c8c4826
Bump `clerk.js` max bundle size
LauraBeatris Aug 20, 2025
25b0ce8
Bump `ui-common.js` max bundle size
LauraBeatris Aug 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/rotten-baths-wish.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@clerk/clerk-js': patch
Copy link
Contributor

@coderabbitai coderabbitai bot Aug 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Double-check release type (patch vs. minor/major) given public surface changes.

If this PR only gates visibility and doesn’t change public types/APIs, “patch” is fine. If UserProfileContextType gained a new exported field or public Passkey types changed (e.g., credential_id removal), consider “minor” or “major” depending on breakage. Please verify.

Run this script to spot potential public-facing changes and usages that might warrant a higher bump:

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "Searching for new context field 'shouldAllowIdentificationCreation' exports and usages:"
rg -nP -C2 '\bshouldAllowIdentificationCreation\b'

echo
echo "Checking for usage of 'credential_id' that might indicate a breaking type change:"
rg -nP -C2 '\bcredential_id\b' --type=ts --type=tsx || true

echo
echo "List all changesets for @clerk/clerk-js to ensure consistency:"
rg -nP -C1 "^'@clerk/clerk-js':\s*(major|minor|patch)\b" .changeset

echo
echo "Confirm package name exists:"
fd package.json | xargs -I{} jq -r '.name + " :: " + input_filename' {} | rg -n '@clerk/clerk-js'

Length of output: 5925

Bump @clerk/clerk-js to minor
The new shouldAllowIdentificationCreation field was added to the exported UserProfileContextType, which expands the public API in a backwards-compatible way. This requires a minor version bump, not a patch.

• File: .changeset/rotten-baths-wish.md
– Change line 2 from
'@clerk/clerk-js': patch
to
'@clerk/clerk-js': minor

🤖 Prompt for AI Agents 
In .changeset/rotten-baths-wish.md around line 2, the release type for
'@clerk/clerk-js' is set to "patch" but should be "minor"; open that file and
change the second line from `'@clerk/clerk-js': patch` to `'@clerk/clerk-js':
minor`, save, and commit the updated changeset.

---

Hide passkeys section when user has an enterprise account with the disable additional identifiers setting enabled
4 changes: 2 additions & 2 deletions packages/clerk-js/bundlewatch.config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
{
"files": [
{ "path": "./dist/clerk.js", "maxSize": "626.1KB" },
{ "path": "./dist/clerk.js", "maxSize": "629KB" },
{ "path": "./dist/clerk.browser.js", "maxSize": "78KB" },
{ "path": "./dist/clerk.legacy.browser.js", "maxSize": "119KB" },
{ "path": "./dist/clerk.headless*.js", "maxSize": "61KB" },
{ "path": "./dist/ui-common*.js", "maxSize": "114.1KB" },
{ "path": "./dist/ui-common*.js", "maxSize": "117.1KB" },
{ "path": "./dist/ui-common*.legacy.*.js", "maxSize": "118KB" },
{ "path": "./dist/vendors*.js", "maxSize": "41KB" },
{ "path": "./dist/coinbase*.js", "maxSize": "38KB" },
Expand Down
10 changes: 2 additions & 8 deletions packages/clerk-js/src/ui/components/UserProfile/AccountPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { Card } from '@/ui/elements/Card';
import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
import { Header } from '@/ui/elements/Header';

import { useEnvironment } from '../../contexts';
import { useEnvironment, useUserProfileContext } from '../../contexts';
import { Col, descriptors, localizationKeys } from '../../customizables';
import { ConnectedAccountsSection } from './ConnectedAccountsSection';
import { EmailsSection } from './EmailsSection';
Expand All @@ -18,6 +18,7 @@ export const AccountPage = withCardStateProvider(() => {
const { attributes, social, enterpriseSSO } = useEnvironment().userSettings;
const card = useCardState();
const { user } = useUser();
const { shouldAllowIdentificationCreation } = useUserProfileContext();

const showUsername = attributes.username?.enabled;
const showEmail = attributes.email_address?.enabled;
Expand All @@ -26,13 +27,6 @@ export const AccountPage = withCardStateProvider(() => {
const showEnterpriseAccounts = user && enterpriseSSO.enabled;
const showWeb3 = attributes.web3_wallet?.enabled;

const shouldAllowIdentificationCreation =
!showEnterpriseAccounts ||
!user.enterpriseAccounts.some(
enterpriseAccount =>
enterpriseAccount.active && enterpriseAccount.enterpriseConnection?.disableAdditionalIdentifications,
);

return (
<Col
elementDescriptor={descriptors.page}
Expand Down
5 changes: 3 additions & 2 deletions packages/clerk-js/src/ui/components/UserProfile/SecurityPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { Card } from '@/ui/elements/Card';
import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
import { Header } from '@/ui/elements/Header';

import { useEnvironment } from '../../contexts';
import { useEnvironment, useUserProfileContext } from '../../contexts';
import { Col, descriptors, localizationKeys } from '../../customizables';
import { ActiveDevicesSection } from './ActiveDevicesSection';
import { DeleteSection } from './DeleteSection';
Expand All @@ -17,8 +17,9 @@ export const SecurityPage = withCardStateProvider(() => {
const { attributes, instanceIsPasswordBased } = useEnvironment().userSettings;
const card = useCardState();
const { user } = useUser();
const { shouldAllowIdentificationCreation } = useUserProfileContext();
const showPassword = instanceIsPasswordBased;
const showPasskey = attributes.passkey?.enabled;
const showPasskey = attributes.passkey?.enabled && shouldAllowIdentificationCreation;
const showMfa = getSecondFactors(attributes).length > 0;
const showDelete = user?.deleteSelfEnabled;

Expand Down
190 changes: 189 additions & 1 deletion packages/clerk-js/src/ui/components/UserProfile/__tests__/SecurityPage.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,6 @@ describe('SecurityPage', () => {
last_used_at: Date.now(),
verification: null,
updated_at: Date.now(),
credential_id: 'some_id',
},
],
});
Expand All @@ -85,6 +84,195 @@ describe('SecurityPage', () => {
getByText(/^Last used:/);
});

describe('Passkeys section visibility', () => {
describe('with active enterprise connection', () => {
it('shows the passkeys section when passkeys are enabled', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withEmailAddress();
f.withEnterpriseSso();
f.withPasskey();
f.withUser({
email_addresses: ['[email protected]'],
passkeys: [
{
object: 'passkey',
id: '1234',
name: 'Chrome on Mac',
created_at: Date.now(),
last_used_at: Date.now(),
verification: null,
updated_at: Date.now(),
},
],
enterprise_accounts: [
{
object: 'enterprise_account',
active: true,
first_name: 'Laura',
last_name: 'Serafim',
protocol: 'saml',
provider_user_id: null,
public_metadata: {},
email_address: '[email protected]',
provider: 'saml_okta',
enterprise_connection: {
object: 'enterprise_connection',
provider: 'saml_okta',
name: 'Okta Workforce',
id: 'ent_123',
active: true,
allow_idp_initiated: false,
allow_subdomains: false,
disable_additional_identifications: false,
sync_user_attributes: false,
domain: 'foocorp.com',
created_at: 123,
updated_at: 123,
logo_public_url: null,
protocol: 'saml',
},
verification: {
status: 'verified',
strategy: 'saml',
verified_at_client: 'foo',
attempts: 0,
error: {
code: 'identifier_already_signed_in',
long_message: "You're already signed in",
message: "You're already signed in",
},
expire_at: 123,
id: 'ver_123',
object: 'verification',
},
id: 'eac_123',
},
],
});
});
fixtures.clerk.user?.getSessions.mockReturnValue(Promise.resolve([]));

render(<SecurityPage />, { wrapper });
await waitFor(() => expect(fixtures.clerk.user?.getSessions).toHaveBeenCalled());
screen.getByText('Passkeys');
screen.getByText('Chrome on Mac');
});

it('hides the passkeys section when disable_additional_identifications is true', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withEmailAddress();
f.withEnterpriseSso();
f.withPasskey();
f.withUser({
email_addresses: ['[email protected]'],
passkeys: [
{
object: 'passkey',
id: '1234',
name: 'Chrome on Mac',
created_at: Date.now(),
last_used_at: Date.now(),
verification: null,
updated_at: Date.now(),
},
],
enterprise_accounts: [
{
object: 'enterprise_account',
active: true,
first_name: 'Laura',
last_name: 'Serafim',
protocol: 'saml',
provider_user_id: null,
public_metadata: {},
email_address: '[email protected]',
provider: 'saml_okta',
enterprise_connection: {
object: 'enterprise_connection',
provider: 'saml_okta',
name: 'Okta Workforce',
id: 'ent_123',
active: true,
allow_idp_initiated: false,
allow_subdomains: false,
disable_additional_identifications: true,
sync_user_attributes: false,
domain: 'foocorp.com',
created_at: 123,
updated_at: 123,
logo_public_url: null,
protocol: 'saml',
},
verification: {
status: 'verified',
strategy: 'saml',
verified_at_client: 'foo',
attempts: 0,
error: {
code: 'identifier_already_signed_in',
long_message: "You're already signed in",
message: "You're already signed in",
},
expire_at: 123,
id: 'ver_123',
object: 'verification',
},
id: 'eac_123',
},
],
});
});
fixtures.clerk.user?.getSessions.mockReturnValue(Promise.resolve([]));

render(<SecurityPage />, { wrapper });
await waitFor(() => expect(fixtures.clerk.user?.getSessions).toHaveBeenCalled());
expect(screen.queryByText('Passkeys')).not.toBeInTheDocument();
expect(screen.queryByText('Chrome on Mac')).not.toBeInTheDocument();
});
});

describe('without enterprise connection', () => {
it('shows the passkeys section when passkeys are enabled', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withPasskey();
f.withUser({
email_addresses: ['[email protected]'],
passkeys: [
{
object: 'passkey',
id: '1234',
name: 'Chrome on Mac',
created_at: Date.now(),
last_used_at: Date.now(),
verification: null,
updated_at: Date.now(),
},
],
});
});
fixtures.clerk.user?.getSessions.mockReturnValue(Promise.resolve([]));

render(<SecurityPage />, { wrapper });
await waitFor(() => expect(fixtures.clerk.user?.getSessions).toHaveBeenCalled());
screen.getByText('Passkeys');
screen.getByText('Chrome on Mac');
});

it('hides the passkeys section when passkeys are not enabled', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({
email_addresses: ['[email protected]'],
});
});
fixtures.clerk.user?.getSessions.mockReturnValue(Promise.resolve([]));

render(<SecurityPage />, { wrapper });
await waitFor(() => expect(fixtures.clerk.user?.getSessions).toHaveBeenCalled());
expect(screen.queryByText('Passkeys')).not.toBeInTheDocument();
});
});
});

it('shows the active devices of the user and has appropriate buttons', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withSocialProvider({ provider: 'google' });
Expand Down
18 changes: 17 additions & 1 deletion packages/clerk-js/src/ui/contexts/components/UserProfile.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useClerk } from '@clerk/shared/react';
import { useClerk, useUser } from '@clerk/shared/react';
import { createContext, useContext, useMemo } from 'react';

import type { NavbarRoute } from '@/ui/elements/Navbar';
Expand All @@ -20,6 +20,7 @@ export type UserProfileContextType = UserProfileCtx & {
queryParams: ParsedQueryString;
authQueryString: string | null;
pages: PagesType;
shouldAllowIdentificationCreation: boolean;
};

export const UserProfileContext = createContext<UserProfileCtx | null>(null);
Expand All @@ -29,6 +30,7 @@ export const useUserProfileContext = (): UserProfileContextType => {
const { queryParams } = useRouter();
const clerk = useClerk();
const environment = useEnvironment();
const { user } = useUser();

if (!context || context.componentName !== 'UserProfile') {
throw new Error('Clerk: useUserProfileContext called outside of the mounted UserProfile component.');
Expand All @@ -40,11 +42,25 @@ export const useUserProfileContext = (): UserProfileContextType => {
return createUserProfileCustomPages(customPages || [], clerk, environment);
}, [customPages]);

const shouldAllowIdentificationCreation = useMemo(() => {
const { enterpriseSSO } = environment.userSettings;
const showEnterpriseAccounts = user && enterpriseSSO.enabled;

return (
!showEnterpriseAccounts ||
!user?.enterpriseAccounts.some(
enterpriseAccount =>
enterpriseAccount.active && enterpriseAccount.enterpriseConnection?.disableAdditionalIdentifications,
)
);
}, [user, environment.userSettings.enterpriseSSO]);

return {
...ctx,
pages,
componentName,
queryParams,
authQueryString: '',
shouldAllowIdentificationCreation,
};
};
Loading