Skip to content

fix(ui): UserProfile should show attributes enabled for sign in#8042

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
wobsoriano merged 11 commits into from
Jun 29, 2026
Merged

fix(ui): UserProfile should show attributes enabled for sign in #8042

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
39ac1ee
fix(ui): Display attributes enabled for sign in
dmoerner Mar 10, 2026
a91df64
Merge branch 'main' into daniel/user-4904-userprofile-should-show-att…
dmoerner Mar 11, 2026
a389214
chore: changeset
dmoerner Mar 11, 2026
abe963c
chore: Add unit tests for email and phone verification
dmoerner Mar 11, 2026
ae81c5a
Merge branch 'main' into daniel/user-4904-userprofile-should-show-att…
dmoerner Apr 16, 2026
8f1e53b
fix: Precalculate available attributes on usersettings object
dmoerner Apr 20, 2026
b17a9c5
Merge branch 'main' into daniel/user-4904-userprofile-should-show-att…
dmoerner Apr 20, 2026
e848ffc
prettier
dmoerner Apr 20, 2026
4584aa1
Merge branch 'main' into daniel/user-4904-userprofile-should-show-att…
jacekradko Jun 10, 2026
af31b7f
fix(ui): compute attribute availability locally instead of a UserSett…
jacekradko Jun 11, 2026
1f3e363
Merge branch 'main' into daniel/user-4904-userprofile-should-show-att…
dmoerner Jun 29, 2026
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/curvy-years-strive.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/ui': patch
---

UserProfile should show attributes enabled for sign in
7 changes: 4 additions & 3 deletions packages/ui/src/components/UserProfile/AccountPage.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -13,6 +13,7 @@ import { EnterpriseAccountsSection } from './EnterpriseAccountsSection';
import { PhoneSection } from './PhoneSection';
import { UsernameSection } from './UsernameSection';
import { UserProfileSection } from './UserProfileSection';
import { isAttributeAvailable } from './utils';
import { Web3Section } from './Web3Section';

export const AccountPage = withCardStateProvider(() => {
Expand All@@ -21,9 +22,9 @@ export const AccountPage = withCardStateProvider(() => {
const { user } = useUser();
const { shouldAllowIdentificationCreation, immutableAttributes } = useUserProfileContext();

const showUsername = attributes.username?.enabled;
const showEmail = attributes.email_address?.enabled;
const showPhone = attributes.phone_number?.enabled;
const showUsername = isAttributeAvailable(attributes.username);
const showEmail = isAttributeAvailable(attributes.email_address);
const showPhone = isAttributeAvailable(attributes.phone_number);
const showConnectedAccounts = social && Object.values(social).filter(p => p.enabled).length > 0;
const showEnterpriseAccounts = user && enterpriseSSO.enabled;
const showWeb3 = attributes.web3_wallet?.enabled;
Expand Down
3 changes: 2 additions & 1 deletion packages/ui/src/components/UserProfile/EmailForm.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -18,6 +18,7 @@ import { useWizard, Wizard } from '../../common';
import { useEnvironment } from '../../contexts';
import type { LocalizationKey } from '../../localization';
import { localizationKeys } from '../../localization';
import { isAttributeAvailable } from './utils';
import { VerifyWithCode } from './VerifyWithCode';
import { VerifyWithEnterpriseConnection } from './VerifyWithEnterpriseConnection';
import { VerifyWithLink } from './VerifyWithLink';
Expand DownExpand Up@@ -138,7 +139,7 @@ const getTranslationKeyByStrategy = (strategy: PrepareEmailAddressVerificationPa
function isEmailLinksEnabledForInstance(env: EnvironmentResource): boolean {
const { userSettings } = env;
const { email_address } = userSettings.attributes;
return Boolean(email_address?.enabled && email_address?.verifications.includes('email_link'));
return Boolean(isAttributeAvailable(email_address) && email_address?.verifications.includes('email_link'));
}

/**
Expand Down
34 changes: 34 additions & 0 deletions packages/ui/src/components/UserProfile/__tests__/AccountPage.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -68,6 +68,40 @@ describe('AccountPage', () => {
expect(queryByText(/Enterprise Accounts/i)).not.toBeInTheDocument();
});

it('shows sections for attributes disabled for sign-up but used for first factor', async () => {
const { wrapper } = await createFixtures(f => {
f.withEmailAddress({ enabled: false, used_for_first_factor: true });
f.withPhoneNumber({ enabled: false, used_for_first_factor: true });
f.withUsername({ enabled: false, used_for_first_factor: true });
f.withUser({
first_name: 'George',
last_name: 'Clerk',
email_addresses: ['test@clerk.com'],
phone_numbers: ['+11234567890'],
username: 'georgeclerk',
});
});

render(<AccountPage />, { wrapper });
screen.getByText(/Email addresses/i);
screen.getByText(/Phone numbers/i);
screen.getByText('georgeclerk');
});

it('shows phone section when disabled for sign-up but used for second factor', async () => {
const { wrapper } = await createFixtures(f => {
f.withPhoneNumber({ enabled: false, used_for_first_factor: false, used_for_second_factor: true });
f.withUser({
first_name: 'George',
last_name: 'Clerk',
phone_numbers: ['+11234567890'],
});
});

render(<AccountPage />, { wrapper });
screen.getByText(/Phone numbers/i);
});

it('shows the connected accounts of the user', async () => {
const { wrapper } = await createFixtures(f => {
f.withSocialProvider({ provider: 'google' });
Expand Down
36 changes: 36 additions & 0 deletions packages/ui/src/components/UserProfile/__tests__/EmailsSection.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -95,6 +95,42 @@ describe('EmailSection', () => {
});
});

describe('Add email with attribute disabled for sign-up but used for sign-in', () => {
const disabledForSignUpConfig = createFixtures.config(f => {
f.withEmailAddress({ enabled: false, used_for_first_factor: true });
f.withUser({ username: 'georgeclerk' });
});

it('renders add email screen', async () => {
const { wrapper } = await createFixtures(disabledForSignUpConfig);

const { getByRole, userEvent, getByLabelText, findByRole } = render(<EmailsSection />, { wrapper });
await userEvent.click(getByRole('button', { name: 'Add email address' }));
await findByRole('heading', { name: /Add email address/i });
getByLabelText(/email address/i);
});

it('can add an email and reach the verification screen', async () => {
const { wrapper, fixtures } = await createFixtures(disabledForSignUpConfig);

const { getByRole, userEvent, getByLabelText, findByRole } = render(<EmailsSection />, { wrapper });
await userEvent.click(getByRole('button', { name: 'Add email address' }));
await findByRole('heading', { name: /Add email address/i });

fixtures.clerk.user?.createEmailAddress.mockReturnValueOnce(
Promise.resolve({
emailAddress: 'test+2@clerk.com',
prepareVerification: vi.fn().mockReturnValueOnce(Promise.resolve({} as any)),
} as any),
);

await userEvent.type(getByLabelText(/email address/i), 'test+2@clerk.com');
await userEvent.click(getByRole('button', { name: /add$/i }));
expect(fixtures.clerk.user?.createEmailAddress).toHaveBeenCalledWith({ email: 'test+2@clerk.com' });
await findByRole('heading', { name: /Verify email address/i });
});
});

describe('Remove email', () => {
it('Renders remove screen', async () => {
const { wrapper } = await createFixtures(withEmails);
Expand Down
38 changes: 36 additions & 2 deletions packages/ui/src/components/UserProfile/__tests__/PhoneSection.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
import { act } from '@testing-library/react';
import { describe, expect, it } from 'vitest';
import { describe, expect, it, vi } from 'vitest';

import { bindCreateFixtures } from '@/test/create-fixtures';
import { render, screen } from '@/test/utils';
Expand DownExpand Up@@ -335,5 +335,39 @@ describe('PhoneSection', () => {
});
});

it.todo('Test for verification of added phone number');
describe('Add phone with attribute disabled for sign-up but used for sign-in', () => {
const disabledForSignUpConfig = createFixtures.config(f => {
f.withPhoneNumber({ enabled: false, used_for_first_factor: true });
f.withUser({ email_addresses: ['test@clerk.com'] });
});

it('renders add phone screen', async () => {
const { wrapper } = await createFixtures(disabledForSignUpConfig);

const { getByRole, userEvent, getByLabelText, findByRole } = render(<PhoneSection />, { wrapper });
await userEvent.click(getByRole('button', { name: 'Add phone number' }));
await findByRole('heading', { name: /Add phone number/i });
getByLabelText(/phone number/i);
});

it('can add a phone and reach the verification screen', async () => {
const { wrapper, fixtures } = await createFixtures(disabledForSignUpConfig);

const { getByRole, userEvent, getByLabelText, findByRole } = render(<PhoneSection />, { wrapper });
await userEvent.click(getByRole('button', { name: 'Add phone number' }));
await findByRole('heading', { name: /Add phone number/i });

fixtures.clerk.user?.createPhoneNumber.mockReturnValueOnce(
Promise.resolve({
phoneNumber: '+16911111111',
prepareVerification: vi.fn().mockReturnValueOnce(Promise.resolve({} as any)),
} as any),
);

await userEvent.type(getByLabelText(/phone number/i), '6911111111');
await userEvent.click(getByRole('button', { name: /add$/i }));
expect(fixtures.clerk.user?.createPhoneNumber).toHaveBeenCalledWith({ phoneNumber: '+16911111111' });
await findByRole('heading', { name: /Verify phone number/i });
});
});
});
12 changes: 11 additions & 1 deletion packages/ui/src/components/UserProfile/utils.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,14 @@
import type { EmailAddressResource, PhoneNumberResource, Web3WalletResource } from '@clerk/shared/types';
import type { AttributeData, EmailAddressResource, PhoneNumberResource, Web3WalletResource } from '@clerk/shared/types';

/**
* An attribute is "available" in the UserProfile if it's enabled for sign-up
* OR used as a first/second factor for sign-in. This covers instances where
* an attribute is disabled for sign-up but still used for authentication
* (e.g. accounts provisioned exclusively by invitation).
*/
export function isAttributeAvailable(attr: AttributeData | undefined): boolean {
return Boolean(attr?.enabled || attr?.used_for_first_factor || attr?.used_for_second_factor);
}

type IDable = { id: string };

Expand Down
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
fix(ui): UserProfile should show attributes enabled for sign in by dmoerner · Pull Request #8042 · clerk/javascript · GitHub
Skip to content
fix(ui): UserProfile should show attributes enabled for sign in#8042

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

wobsoriano
merged 11 commits into

from

Jun 29, 2026
 Merged


fix(ui): UserProfile should show attributes enabled for sign in
#8042
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


11 commits


Select commit
Hold shift + click to select a range
39ac1ee

fix(ui): Display attributes enabled for sign in


dmoerner Mar 10, 2026
a91df64

Merge branch 'main' into daniel/user-4904-userprofile-should-show-att…


dmoerner Mar 11, 2026
a389214

chore: changeset


dmoerner Mar 11, 2026
abe963c

chore: Add unit tests for email and phone verification


dmoerner Mar 11, 2026
ae81c5a

Merge branch 'main' into daniel/user-4904-userprofile-should-show-att…


dmoerner Apr 16, 2026
8f1e53b

fix: Precalculate available attributes on usersettings object


dmoerner Apr 20, 2026
b17a9c5

Merge branch 'main' into daniel/user-4904-userprofile-should-show-att…


dmoerner Apr 20, 2026
e848ffc

prettier


dmoerner Apr 20, 2026
4584aa1

Merge branch 'main' into daniel/user-4904-userprofile-should-show-att…


jacekradko Jun 10, 2026
af31b7f

fix(ui): compute attribute availability locally instead of a UserSett…


jacekradko Jun 11, 2026
1f3e363

Merge branch 'main' into daniel/user-4904-userprofile-should-show-att…


dmoerner Jun 29, 2026

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/curvy-years-strive.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/ui': patch
---

UserProfile should show attributes enabled for sign in

7 changes: 4 additions & 3 deletions
packages/ui/src/components/UserProfile/AccountPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -13,6 +13,7 @@ import { EnterpriseAccountsSection } from './EnterpriseAccountsSection';
import { PhoneSection } from './PhoneSection';
import { UsernameSection } from './UsernameSection';
import { UserProfileSection } from './UserProfileSection';
import { isAttributeAvailable } from './utils';
import { Web3Section } from './Web3Section';

export const AccountPage = withCardStateProvider(() => {
Expand All@@ -21,9 +22,9 @@ export const AccountPage = withCardStateProvider(() => {
 const { user } = useUser();
 const { shouldAllowIdentificationCreation, immutableAttributes } = useUserProfileContext();

 const showUsername = attributes.username?.enabled;
 const showEmail = attributes.email_address?.enabled;
 const showPhone = attributes.phone_number?.enabled;
 const showUsername = isAttributeAvailable(attributes.username);
 const showEmail = isAttributeAvailable(attributes.email_address);
 const showPhone = isAttributeAvailable(attributes.phone_number);
 const showConnectedAccounts = social && Object.values(social).filter(p => p.enabled).length > 0;
 const showEnterpriseAccounts = user && enterpriseSSO.enabled;
 const showWeb3 = attributes.web3_wallet?.enabled;
Expand Down

3 changes: 2 additions & 1 deletion
packages/ui/src/components/UserProfile/EmailForm.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -18,6 +18,7 @@ import { useWizard, Wizard } from '../../common';
import { useEnvironment } from '../../contexts';
import type { LocalizationKey } from '../../localization';
import { localizationKeys } from '../../localization';
import { isAttributeAvailable } from './utils';
import { VerifyWithCode } from './VerifyWithCode';
import { VerifyWithEnterpriseConnection } from './VerifyWithEnterpriseConnection';
import { VerifyWithLink } from './VerifyWithLink';
Expand DownExpand Up@@ -138,7 +139,7 @@ const getTranslationKeyByStrategy = (strategy: PrepareEmailAddressVerificationPa
function isEmailLinksEnabledForInstance(env: EnvironmentResource): boolean {
 const { userSettings } = env;
 const { email_address } = userSettings.attributes;
 return Boolean(email_address?.enabled && email_address?.verifications.includes('email_link'));
 return Boolean(isAttributeAvailable(email_address) && email_address?.verifications.includes('email_link'));
}

/**
Expand Down

34 changes: 34 additions & 0 deletions
packages/ui/src/components/UserProfile/__tests__/AccountPage.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -68,6 +68,40 @@ describe('AccountPage', () => {
 expect(queryByText(/Enterprise Accounts/i)).not.toBeInTheDocument();
 });

 it('shows sections for attributes disabled for sign-up but used for first factor', async () => {
 const { wrapper } = await createFixtures(f => {
 f.withEmailAddress({ enabled: false, used_for_first_factor: true });
 f.withPhoneNumber({ enabled: false, used_for_first_factor: true });
 f.withUsername({ enabled: false, used_for_first_factor: true });
 f.withUser({
 first_name: 'George',
 last_name: 'Clerk',
 email_addresses: ['test@clerk.com'],
 phone_numbers: ['+11234567890'],
 username: 'georgeclerk',
 });
 });

 render(<AccountPage />, { wrapper });
 screen.getByText(/Email addresses/i);
 screen.getByText(/Phone numbers/i);
 screen.getByText('georgeclerk');
 });

 it('shows phone section when disabled for sign-up but used for second factor', async () => {
 const { wrapper } = await createFixtures(f => {
 f.withPhoneNumber({ enabled: false, used_for_first_factor: false, used_for_second_factor: true });
 f.withUser({
 first_name: 'George',
 last_name: 'Clerk',
 phone_numbers: ['+11234567890'],
 });
 });

 render(<AccountPage />, { wrapper });
 screen.getByText(/Phone numbers/i);
 });

 it('shows the connected accounts of the user', async () => {
 const { wrapper } = await createFixtures(f => {
 f.withSocialProvider({ provider: 'google' });
Expand Down

36 changes: 36 additions & 0 deletions
packages/ui/src/components/UserProfile/__tests__/EmailsSection.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -95,6 +95,42 @@ describe('EmailSection', () => {
 });
 });

 describe('Add email with attribute disabled for sign-up but used for sign-in', () => {
 const disabledForSignUpConfig = createFixtures.config(f => {
 f.withEmailAddress({ enabled: false, used_for_first_factor: true });
 f.withUser({ username: 'georgeclerk' });
 });

 it('renders add email screen', async () => {
 const { wrapper } = await createFixtures(disabledForSignUpConfig);

 const { getByRole, userEvent, getByLabelText, findByRole } = render(<EmailsSection />, { wrapper });
 await userEvent.click(getByRole('button', { name: 'Add email address' }));
 await findByRole('heading', { name: /Add email address/i });
 getByLabelText(/email address/i);
 });

 it('can add an email and reach the verification screen', async () => {
 const { wrapper, fixtures } = await createFixtures(disabledForSignUpConfig);

 const { getByRole, userEvent, getByLabelText, findByRole } = render(<EmailsSection />, { wrapper });
 await userEvent.click(getByRole('button', { name: 'Add email address' }));
 await findByRole('heading', { name: /Add email address/i });

 fixtures.clerk.user?.createEmailAddress.mockReturnValueOnce(
 Promise.resolve({
 emailAddress: 'test+2@clerk.com',
 prepareVerification: vi.fn().mockReturnValueOnce(Promise.resolve({} as any)),
 } as any),
 );

 await userEvent.type(getByLabelText(/email address/i), 'test+2@clerk.com');
 await userEvent.click(getByRole('button', { name: /add$/i }));
 expect(fixtures.clerk.user?.createEmailAddress).toHaveBeenCalledWith({ email: 'test+2@clerk.com' });
 await findByRole('heading', { name: /Verify email address/i });
 });
 });

 describe('Remove email', () => {
 it('Renders remove screen', async () => {
 const { wrapper } = await createFixtures(withEmails);
Expand Down

38 changes: 36 additions & 2 deletions
packages/ui/src/components/UserProfile/__tests__/PhoneSection.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
import { act } from '@testing-library/react';
import { describe, expect, it } from 'vitest';
import { describe, expect, it, vi } from 'vitest';

import { bindCreateFixtures } from '@/test/create-fixtures';
import { render, screen } from '@/test/utils';
Expand DownExpand Up@@ -335,5 +335,39 @@ describe('PhoneSection', () => {
 });
 });

 it.todo('Test for verification of added phone number');
 describe('Add phone with attribute disabled for sign-up but used for sign-in', () => {
 const disabledForSignUpConfig = createFixtures.config(f => {
 f.withPhoneNumber({ enabled: false, used_for_first_factor: true });
 f.withUser({ email_addresses: ['test@clerk.com'] });
 });

 it('renders add phone screen', async () => {
 const { wrapper } = await createFixtures(disabledForSignUpConfig);

 const { getByRole, userEvent, getByLabelText, findByRole } = render(<PhoneSection />, { wrapper });
 await userEvent.click(getByRole('button', { name: 'Add phone number' }));
 await findByRole('heading', { name: /Add phone number/i });
 getByLabelText(/phone number/i);
 });

 it('can add a phone and reach the verification screen', async () => {
 const { wrapper, fixtures } = await createFixtures(disabledForSignUpConfig);

 const { getByRole, userEvent, getByLabelText, findByRole } = render(<PhoneSection />, { wrapper });
 await userEvent.click(getByRole('button', { name: 'Add phone number' }));
 await findByRole('heading', { name: /Add phone number/i });

 fixtures.clerk.user?.createPhoneNumber.mockReturnValueOnce(
 Promise.resolve({
 phoneNumber: '+16911111111',
 prepareVerification: vi.fn().mockReturnValueOnce(Promise.resolve({} as any)),
 } as any),
 );

 await userEvent.type(getByLabelText(/phone number/i), '6911111111');
 await userEvent.click(getByRole('button', { name: /add$/i }));
 expect(fixtures.clerk.user?.createPhoneNumber).toHaveBeenCalledWith({ phoneNumber: '+16911111111' });
 await findByRole('heading', { name: /Verify phone number/i });
 });
 });
});

12 changes: 11 additions & 1 deletion
packages/ui/src/components/UserProfile/utils.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,4 +1,14 @@
import type { EmailAddressResource, PhoneNumberResource, Web3WalletResource } from '@clerk/shared/types';
import type { AttributeData, EmailAddressResource, PhoneNumberResource, Web3WalletResource } from '@clerk/shared/types';

/**
 * An attribute is "available" in the UserProfile if it's enabled for sign-up
 * OR used as a first/second factor for sign-in. This covers instances where
 * an attribute is disabled for sign-up but still used for authentication
 * (e.g. accounts provisioned exclusively by invitation).
 */
export function isAttributeAvailable(attr: AttributeData | undefined): boolean {
 return Boolean(attr?.enabled || attr?.used_for_first_factor || attr?.used_for_second_factor);
}

type IDable = { id: string };

Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
fix(ui): UserProfile should show attributes enabled for sign in by dmoerner · Pull Request #8042 · clerk/javascript · GitHub
Skip to content
fix(ui): UserProfile should show attributes enabled for sign in#8042

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

wobsoriano
merged 11 commits into

from

Jun 29, 2026
 Merged


fix(ui): UserProfile should show attributes enabled for sign in
#8042
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


11 commits


Select commit
Hold shift + click to select a range
39ac1ee

fix(ui): Display attributes enabled for sign in


dmoerner Mar 10, 2026
a91df64

Merge branch 'main' into daniel/user-4904-userprofile-should-show-att…


dmoerner Mar 11, 2026
a389214

chore: changeset


dmoerner Mar 11, 2026
abe963c

chore: Add unit tests for email and phone verification


dmoerner Mar 11, 2026
ae81c5a

Merge branch 'main' into daniel/user-4904-userprofile-should-show-att…


dmoerner Apr 16, 2026
8f1e53b

fix: Precalculate available attributes on usersettings object


dmoerner Apr 20, 2026
b17a9c5

Merge branch 'main' into daniel/user-4904-userprofile-should-show-att…


dmoerner Apr 20, 2026
e848ffc

prettier


dmoerner Apr 20, 2026
4584aa1

Merge branch 'main' into daniel/user-4904-userprofile-should-show-att…


jacekradko Jun 10, 2026
af31b7f

fix(ui): compute attribute availability locally instead of a UserSett…


jacekradko Jun 11, 2026
1f3e363

Merge branch 'main' into daniel/user-4904-userprofile-should-show-att…


dmoerner Jun 29, 2026

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/curvy-years-strive.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/ui': patch
---

UserProfile should show attributes enabled for sign in

7 changes: 4 additions & 3 deletions
packages/ui/src/components/UserProfile/AccountPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -13,6 +13,7 @@ import { EnterpriseAccountsSection } from './EnterpriseAccountsSection';
import { PhoneSection } from './PhoneSection';
import { UsernameSection } from './UsernameSection';
import { UserProfileSection } from './UserProfileSection';
import { isAttributeAvailable } from './utils';
import { Web3Section } from './Web3Section';

export const AccountPage = withCardStateProvider(() => {
Expand All@@ -21,9 +22,9 @@ export const AccountPage = withCardStateProvider(() => {
 const { user } = useUser();
 const { shouldAllowIdentificationCreation, immutableAttributes } = useUserProfileContext();

 const showUsername = attributes.username?.enabled;
 const showEmail = attributes.email_address?.enabled;
 const showPhone = attributes.phone_number?.enabled;
 const showUsername = isAttributeAvailable(attributes.username);
 const showEmail = isAttributeAvailable(attributes.email_address);
 const showPhone = isAttributeAvailable(attributes.phone_number);
 const showConnectedAccounts = social && Object.values(social).filter(p => p.enabled).length > 0;
 const showEnterpriseAccounts = user && enterpriseSSO.enabled;
 const showWeb3 = attributes.web3_wallet?.enabled;
Expand Down

3 changes: 2 additions & 1 deletion
packages/ui/src/components/UserProfile/EmailForm.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -18,6 +18,7 @@ import { useWizard, Wizard } from '../../common';
import { useEnvironment } from '../../contexts';
import type { LocalizationKey } from '../../localization';
import { localizationKeys } from '../../localization';
import { isAttributeAvailable } from './utils';
import { VerifyWithCode } from './VerifyWithCode';
import { VerifyWithEnterpriseConnection } from './VerifyWithEnterpriseConnection';
import { VerifyWithLink } from './VerifyWithLink';
Expand DownExpand Up@@ -138,7 +139,7 @@ const getTranslationKeyByStrategy = (strategy: PrepareEmailAddressVerificationPa
function isEmailLinksEnabledForInstance(env: EnvironmentResource): boolean {
 const { userSettings } = env;
 const { email_address } = userSettings.attributes;
 return Boolean(email_address?.enabled && email_address?.verifications.includes('email_link'));
 return Boolean(isAttributeAvailable(email_address) && email_address?.verifications.includes('email_link'));
}

/**
Expand Down

34 changes: 34 additions & 0 deletions
packages/ui/src/components/UserProfile/__tests__/AccountPage.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -68,6 +68,40 @@ describe('AccountPage', () => {
 expect(queryByText(/Enterprise Accounts/i)).not.toBeInTheDocument();
 });

 it('shows sections for attributes disabled for sign-up but used for first factor', async () => {
 const { wrapper } = await createFixtures(f => {
 f.withEmailAddress({ enabled: false, used_for_first_factor: true });
 f.withPhoneNumber({ enabled: false, used_for_first_factor: true });
 f.withUsername({ enabled: false, used_for_first_factor: true });
 f.withUser({
 first_name: 'George',
 last_name: 'Clerk',
 email_addresses: ['test@clerk.com'],
 phone_numbers: ['+11234567890'],
 username: 'georgeclerk',
 });
 });

 render(<AccountPage />, { wrapper });
 screen.getByText(/Email addresses/i);
 screen.getByText(/Phone numbers/i);
 screen.getByText('georgeclerk');
 });

 it('shows phone section when disabled for sign-up but used for second factor', async () => {
 const { wrapper } = await createFixtures(f => {
 f.withPhoneNumber({ enabled: false, used_for_first_factor: false, used_for_second_factor: true });
 f.withUser({
 first_name: 'George',
 last_name: 'Clerk',
 phone_numbers: ['+11234567890'],
 });
 });

 render(<AccountPage />, { wrapper });
 screen.getByText(/Phone numbers/i);
 });

 it('shows the connected accounts of the user', async () => {
 const { wrapper } = await createFixtures(f => {
 f.withSocialProvider({ provider: 'google' });
Expand Down

36 changes: 36 additions & 0 deletions
packages/ui/src/components/UserProfile/__tests__/EmailsSection.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -95,6 +95,42 @@ describe('EmailSection', () => {
 });
 });

 describe('Add email with attribute disabled for sign-up but used for sign-in', () => {
 const disabledForSignUpConfig = createFixtures.config(f => {
 f.withEmailAddress({ enabled: false, used_for_first_factor: true });
 f.withUser({ username: 'georgeclerk' });
 });

 it('renders add email screen', async () => {
 const { wrapper } = await createFixtures(disabledForSignUpConfig);

 const { getByRole, userEvent, getByLabelText, findByRole } = render(<EmailsSection />, { wrapper });
 await userEvent.click(getByRole('button', { name: 'Add email address' }));
 await findByRole('heading', { name: /Add email address/i });
 getByLabelText(/email address/i);
 });

 it('can add an email and reach the verification screen', async () => {
 const { wrapper, fixtures } = await createFixtures(disabledForSignUpConfig);

 const { getByRole, userEvent, getByLabelText, findByRole } = render(<EmailsSection />, { wrapper });
 await userEvent.click(getByRole('button', { name: 'Add email address' }));
 await findByRole('heading', { name: /Add email address/i });

 fixtures.clerk.user?.createEmailAddress.mockReturnValueOnce(
 Promise.resolve({
 emailAddress: 'test+2@clerk.com',
 prepareVerification: vi.fn().mockReturnValueOnce(Promise.resolve({} as any)),
 } as any),
 );

 await userEvent.type(getByLabelText(/email address/i), 'test+2@clerk.com');
 await userEvent.click(getByRole('button', { name: /add$/i }));
 expect(fixtures.clerk.user?.createEmailAddress).toHaveBeenCalledWith({ email: 'test+2@clerk.com' });
 await findByRole('heading', { name: /Verify email address/i });
 });
 });

 describe('Remove email', () => {
 it('Renders remove screen', async () => {
 const { wrapper } = await createFixtures(withEmails);
Expand Down

38 changes: 36 additions & 2 deletions
packages/ui/src/components/UserProfile/__tests__/PhoneSection.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
import { act } from '@testing-library/react';
import { describe, expect, it } from 'vitest';
import { describe, expect, it, vi } from 'vitest';

import { bindCreateFixtures } from '@/test/create-fixtures';
import { render, screen } from '@/test/utils';
Expand DownExpand Up@@ -335,5 +335,39 @@ describe('PhoneSection', () => {
 });
 });

 it.todo('Test for verification of added phone number');
 describe('Add phone with attribute disabled for sign-up but used for sign-in', () => {
 const disabledForSignUpConfig = createFixtures.config(f => {
 f.withPhoneNumber({ enabled: false, used_for_first_factor: true });
 f.withUser({ email_addresses: ['test@clerk.com'] });
 });

 it('renders add phone screen', async () => {
 const { wrapper } = await createFixtures(disabledForSignUpConfig);

 const { getByRole, userEvent, getByLabelText, findByRole } = render(<PhoneSection />, { wrapper });
 await userEvent.click(getByRole('button', { name: 'Add phone number' }));
 await findByRole('heading', { name: /Add phone number/i });
 getByLabelText(/phone number/i);
 });

 it('can add a phone and reach the verification screen', async () => {
 const { wrapper, fixtures } = await createFixtures(disabledForSignUpConfig);

 const { getByRole, userEvent, getByLabelText, findByRole } = render(<PhoneSection />, { wrapper });
 await userEvent.click(getByRole('button', { name: 'Add phone number' }));
 await findByRole('heading', { name: /Add phone number/i });

 fixtures.clerk.user?.createPhoneNumber.mockReturnValueOnce(
 Promise.resolve({
 phoneNumber: '+16911111111',
 prepareVerification: vi.fn().mockReturnValueOnce(Promise.resolve({} as any)),
 } as any),
 );

 await userEvent.type(getByLabelText(/phone number/i), '6911111111');
 await userEvent.click(getByRole('button', { name: /add$/i }));
 expect(fixtures.clerk.user?.createPhoneNumber).toHaveBeenCalledWith({ phoneNumber: '+16911111111' });
 await findByRole('heading', { name: /Verify phone number/i });
 });
 });
});

12 changes: 11 additions & 1 deletion
packages/ui/src/components/UserProfile/utils.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,4 +1,14 @@
import type { EmailAddressResource, PhoneNumberResource, Web3WalletResource } from '@clerk/shared/types';
import type { AttributeData, EmailAddressResource, PhoneNumberResource, Web3WalletResource } from '@clerk/shared/types';

/**
 * An attribute is "available" in the UserProfile if it's enabled for sign-up
 * OR used as a first/second factor for sign-in. This covers instances where
 * an attribute is disabled for sign-up but still used for authentication
 * (e.g. accounts provisioned exclusively by invitation).
 */
export function isAttributeAvailable(attr: AttributeData | undefined): boolean {
 return Boolean(attr?.enabled || attr?.used_for_first_factor || attr?.used_for_second_factor);
}

type IDable = { id: string };

Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
fix(ui): UserProfile should show attributes enabled for sign in by dmoerner · Pull Request #8042 · clerk/javascript · GitHub
Skip to content
fix(ui): UserProfile should show attributes enabled for sign in#8042

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

wobsoriano
merged 11 commits into

from

Jun 29, 2026
 Merged


fix(ui): UserProfile should show attributes enabled for sign in
#8042
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


11 commits


Select commit
Hold shift + click to select a range
39ac1ee

fix(ui): Display attributes enabled for sign in


dmoerner Mar 10, 2026
a91df64

Merge branch 'main' into daniel/user-4904-userprofile-should-show-att…


dmoerner Mar 11, 2026
a389214

chore: changeset


dmoerner Mar 11, 2026
abe963c

chore: Add unit tests for email and phone verification


dmoerner Mar 11, 2026
ae81c5a

Merge branch 'main' into daniel/user-4904-userprofile-should-show-att…


dmoerner Apr 16, 2026
8f1e53b

fix: Precalculate available attributes on usersettings object


dmoerner Apr 20, 2026
b17a9c5

Merge branch 'main' into daniel/user-4904-userprofile-should-show-att…


dmoerner Apr 20, 2026
e848ffc

prettier


dmoerner Apr 20, 2026
4584aa1

Merge branch 'main' into daniel/user-4904-userprofile-should-show-att…


jacekradko Jun 10, 2026
af31b7f

fix(ui): compute attribute availability locally instead of a UserSett…


jacekradko Jun 11, 2026
1f3e363

Merge branch 'main' into daniel/user-4904-userprofile-should-show-att…


dmoerner Jun 29, 2026

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/curvy-years-strive.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/ui': patch
---

UserProfile should show attributes enabled for sign in

7 changes: 4 additions & 3 deletions
packages/ui/src/components/UserProfile/AccountPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -13,6 +13,7 @@ import { EnterpriseAccountsSection } from './EnterpriseAccountsSection';
import { PhoneSection } from './PhoneSection';
import { UsernameSection } from './UsernameSection';
import { UserProfileSection } from './UserProfileSection';
import { isAttributeAvailable } from './utils';
import { Web3Section } from './Web3Section';

export const AccountPage = withCardStateProvider(() => {
Expand All@@ -21,9 +22,9 @@ export const AccountPage = withCardStateProvider(() => {
 const { user } = useUser();
 const { shouldAllowIdentificationCreation, immutableAttributes } = useUserProfileContext();

 const showUsername = attributes.username?.enabled;
 const showEmail = attributes.email_address?.enabled;
 const showPhone = attributes.phone_number?.enabled;
 const showUsername = isAttributeAvailable(attributes.username);
 const showEmail = isAttributeAvailable(attributes.email_address);
 const showPhone = isAttributeAvailable(attributes.phone_number);
 const showConnectedAccounts = social && Object.values(social).filter(p => p.enabled).length > 0;
 const showEnterpriseAccounts = user && enterpriseSSO.enabled;
 const showWeb3 = attributes.web3_wallet?.enabled;
Expand Down

3 changes: 2 additions & 1 deletion
packages/ui/src/components/UserProfile/EmailForm.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -18,6 +18,7 @@ import { useWizard, Wizard } from '../../common';
import { useEnvironment } from '../../contexts';
import type { LocalizationKey } from '../../localization';
import { localizationKeys } from '../../localization';
import { isAttributeAvailable } from './utils';
import { VerifyWithCode } from './VerifyWithCode';
import { VerifyWithEnterpriseConnection } from './VerifyWithEnterpriseConnection';
import { VerifyWithLink } from './VerifyWithLink';
Expand DownExpand Up@@ -138,7 +139,7 @@ const getTranslationKeyByStrategy = (strategy: PrepareEmailAddressVerificationPa
function isEmailLinksEnabledForInstance(env: EnvironmentResource): boolean {
 const { userSettings } = env;
 const { email_address } = userSettings.attributes;
 return Boolean(email_address?.enabled && email_address?.verifications.includes('email_link'));
 return Boolean(isAttributeAvailable(email_address) && email_address?.verifications.includes('email_link'));
}

/**
Expand Down

34 changes: 34 additions & 0 deletions
packages/ui/src/components/UserProfile/__tests__/AccountPage.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -68,6 +68,40 @@ describe('AccountPage', () => {
 expect(queryByText(/Enterprise Accounts/i)).not.toBeInTheDocument();
 });

 it('shows sections for attributes disabled for sign-up but used for first factor', async () => {
 const { wrapper } = await createFixtures(f => {
 f.withEmailAddress({ enabled: false, used_for_first_factor: true });
 f.withPhoneNumber({ enabled: false, used_for_first_factor: true });
 f.withUsername({ enabled: false, used_for_first_factor: true });
 f.withUser({
 first_name: 'George',
 last_name: 'Clerk',
 email_addresses: ['test@clerk.com'],
 phone_numbers: ['+11234567890'],
 username: 'georgeclerk',
 });
 });

 render(<AccountPage />, { wrapper });
 screen.getByText(/Email addresses/i);
 screen.getByText(/Phone numbers/i);
 screen.getByText('georgeclerk');
 });

 it('shows phone section when disabled for sign-up but used for second factor', async () => {
 const { wrapper } = await createFixtures(f => {
 f.withPhoneNumber({ enabled: false, used_for_first_factor: false, used_for_second_factor: true });
 f.withUser({
 first_name: 'George',
 last_name: 'Clerk',
 phone_numbers: ['+11234567890'],
 });
 });

 render(<AccountPage />, { wrapper });
 screen.getByText(/Phone numbers/i);
 });

 it('shows the connected accounts of the user', async () => {
 const { wrapper } = await createFixtures(f => {
 f.withSocialProvider({ provider: 'google' });
Expand Down

36 changes: 36 additions & 0 deletions
packages/ui/src/components/UserProfile/__tests__/EmailsSection.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -95,6 +95,42 @@ describe('EmailSection', () => {
 });
 });

 describe('Add email with attribute disabled for sign-up but used for sign-in', () => {
 const disabledForSignUpConfig = createFixtures.config(f => {
 f.withEmailAddress({ enabled: false, used_for_first_factor: true });
 f.withUser({ username: 'georgeclerk' });
 });

 it('renders add email screen', async () => {
 const { wrapper } = await createFixtures(disabledForSignUpConfig);

 const { getByRole, userEvent, getByLabelText, findByRole } = render(<EmailsSection />, { wrapper });
 await userEvent.click(getByRole('button', { name: 'Add email address' }));
 await findByRole('heading', { name: /Add email address/i });
 getByLabelText(/email address/i);
 });

 it('can add an email and reach the verification screen', async () => {
 const { wrapper, fixtures } = await createFixtures(disabledForSignUpConfig);

 const { getByRole, userEvent, getByLabelText, findByRole } = render(<EmailsSection />, { wrapper });
 await userEvent.click(getByRole('button', { name: 'Add email address' }));
 await findByRole('heading', { name: /Add email address/i });

 fixtures.clerk.user?.createEmailAddress.mockReturnValueOnce(
 Promise.resolve({
 emailAddress: 'test+2@clerk.com',
 prepareVerification: vi.fn().mockReturnValueOnce(Promise.resolve({} as any)),
 } as any),
 );

 await userEvent.type(getByLabelText(/email address/i), 'test+2@clerk.com');
 await userEvent.click(getByRole('button', { name: /add$/i }));
 expect(fixtures.clerk.user?.createEmailAddress).toHaveBeenCalledWith({ email: 'test+2@clerk.com' });
 await findByRole('heading', { name: /Verify email address/i });
 });
 });

 describe('Remove email', () => {
 it('Renders remove screen', async () => {
 const { wrapper } = await createFixtures(withEmails);
Expand Down

38 changes: 36 additions & 2 deletions
packages/ui/src/components/UserProfile/__tests__/PhoneSection.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
import { act } from '@testing-library/react';
import { describe, expect, it } from 'vitest';
import { describe, expect, it, vi } from 'vitest';

import { bindCreateFixtures } from '@/test/create-fixtures';
import { render, screen } from '@/test/utils';
Expand DownExpand Up@@ -335,5 +335,39 @@ describe('PhoneSection', () => {
 });
 });

 it.todo('Test for verification of added phone number');
 describe('Add phone with attribute disabled for sign-up but used for sign-in', () => {
 const disabledForSignUpConfig = createFixtures.config(f => {
 f.withPhoneNumber({ enabled: false, used_for_first_factor: true });
 f.withUser({ email_addresses: ['test@clerk.com'] });
 });

 it('renders add phone screen', async () => {
 const { wrapper } = await createFixtures(disabledForSignUpConfig);

 const { getByRole, userEvent, getByLabelText, findByRole } = render(<PhoneSection />, { wrapper });
 await userEvent.click(getByRole('button', { name: 'Add phone number' }));
 await findByRole('heading', { name: /Add phone number/i });
 getByLabelText(/phone number/i);
 });

 it('can add a phone and reach the verification screen', async () => {
 const { wrapper, fixtures } = await createFixtures(disabledForSignUpConfig);

 const { getByRole, userEvent, getByLabelText, findByRole } = render(<PhoneSection />, { wrapper });
 await userEvent.click(getByRole('button', { name: 'Add phone number' }));
 await findByRole('heading', { name: /Add phone number/i });

 fixtures.clerk.user?.createPhoneNumber.mockReturnValueOnce(
 Promise.resolve({
 phoneNumber: '+16911111111',
 prepareVerification: vi.fn().mockReturnValueOnce(Promise.resolve({} as any)),
 } as any),
 );

 await userEvent.type(getByLabelText(/phone number/i), '6911111111');
 await userEvent.click(getByRole('button', { name: /add$/i }));
 expect(fixtures.clerk.user?.createPhoneNumber).toHaveBeenCalledWith({ phoneNumber: '+16911111111' });
 await findByRole('heading', { name: /Verify phone number/i });
 });
 });
});

12 changes: 11 additions & 1 deletion
packages/ui/src/components/UserProfile/utils.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,4 +1,14 @@
import type { EmailAddressResource, PhoneNumberResource, Web3WalletResource } from '@clerk/shared/types';
import type { AttributeData, EmailAddressResource, PhoneNumberResource, Web3WalletResource } from '@clerk/shared/types';

/**
 * An attribute is "available" in the UserProfile if it's enabled for sign-up
 * OR used as a first/second factor for sign-in. This covers instances where
 * an attribute is disabled for sign-up but still used for authentication
 * (e.g. accounts provisioned exclusively by invitation).
 */
export function isAttributeAvailable(attr: AttributeData | undefined): boolean {
 return Boolean(attr?.enabled || attr?.used_for_first_factor || attr?.used_for_second_factor);
}

type IDable = { id: string };

Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
fix(ui): UserProfile should show attributes enabled for sign in by dmoerner · Pull Request #8042 · clerk/javascript · GitHub
Skip to content
fix(ui): UserProfile should show attributes enabled for sign in#8042

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

wobsoriano
merged 11 commits into

from

Jun 29, 2026
 Merged


fix(ui): UserProfile should show attributes enabled for sign in
#8042
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


11 commits


Select commit
Hold shift + click to select a range
39ac1ee

fix(ui): Display attributes enabled for sign in


dmoerner Mar 10, 2026
a91df64

Merge branch 'main' into daniel/user-4904-userprofile-should-show-att…


dmoerner Mar 11, 2026
a389214

chore: changeset


dmoerner Mar 11, 2026
abe963c

chore: Add unit tests for email and phone verification


dmoerner Mar 11, 2026
ae81c5a

Merge branch 'main' into daniel/user-4904-userprofile-should-show-att…


dmoerner Apr 16, 2026
8f1e53b

fix: Precalculate available attributes on usersettings object


dmoerner Apr 20, 2026
b17a9c5

Merge branch 'main' into daniel/user-4904-userprofile-should-show-att…


dmoerner Apr 20, 2026
e848ffc

prettier


dmoerner Apr 20, 2026
4584aa1

Merge branch 'main' into daniel/user-4904-userprofile-should-show-att…


jacekradko Jun 10, 2026
af31b7f

fix(ui): compute attribute availability locally instead of a UserSett…


jacekradko Jun 11, 2026
1f3e363

Merge branch 'main' into daniel/user-4904-userprofile-should-show-att…


dmoerner Jun 29, 2026

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/curvy-years-strive.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/ui': patch
---

UserProfile should show attributes enabled for sign in

7 changes: 4 additions & 3 deletions
packages/ui/src/components/UserProfile/AccountPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -13,6 +13,7 @@ import { EnterpriseAccountsSection } from './EnterpriseAccountsSection';
import { PhoneSection } from './PhoneSection';
import { UsernameSection } from './UsernameSection';
import { UserProfileSection } from './UserProfileSection';
import { isAttributeAvailable } from './utils';
import { Web3Section } from './Web3Section';

export const AccountPage = withCardStateProvider(() => {
Expand All@@ -21,9 +22,9 @@ export const AccountPage = withCardStateProvider(() => {
 const { user } = useUser();
 const { shouldAllowIdentificationCreation, immutableAttributes } = useUserProfileContext();

 const showUsername = attributes.username?.enabled;
 const showEmail = attributes.email_address?.enabled;
 const showPhone = attributes.phone_number?.enabled;
 const showUsername = isAttributeAvailable(attributes.username);
 const showEmail = isAttributeAvailable(attributes.email_address);
 const showPhone = isAttributeAvailable(attributes.phone_number);
 const showConnectedAccounts = social && Object.values(social).filter(p => p.enabled).length > 0;
 const showEnterpriseAccounts = user && enterpriseSSO.enabled;
 const showWeb3 = attributes.web3_wallet?.enabled;
Expand Down

3 changes: 2 additions & 1 deletion
packages/ui/src/components/UserProfile/EmailForm.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -18,6 +18,7 @@ import { useWizard, Wizard } from '../../common';
import { useEnvironment } from '../../contexts';
import type { LocalizationKey } from '../../localization';
import { localizationKeys } from '../../localization';
import { isAttributeAvailable } from './utils';
import { VerifyWithCode } from './VerifyWithCode';
import { VerifyWithEnterpriseConnection } from './VerifyWithEnterpriseConnection';
import { VerifyWithLink } from './VerifyWithLink';
Expand DownExpand Up@@ -138,7 +139,7 @@ const getTranslationKeyByStrategy = (strategy: PrepareEmailAddressVerificationPa
function isEmailLinksEnabledForInstance(env: EnvironmentResource): boolean {
 const { userSettings } = env;
 const { email_address } = userSettings.attributes;
 return Boolean(email_address?.enabled && email_address?.verifications.includes('email_link'));
 return Boolean(isAttributeAvailable(email_address) && email_address?.verifications.includes('email_link'));
}

/**
Expand Down

34 changes: 34 additions & 0 deletions
packages/ui/src/components/UserProfile/__tests__/AccountPage.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -68,6 +68,40 @@ describe('AccountPage', () => {
 expect(queryByText(/Enterprise Accounts/i)).not.toBeInTheDocument();
 });

 it('shows sections for attributes disabled for sign-up but used for first factor', async () => {
 const { wrapper } = await createFixtures(f => {
 f.withEmailAddress({ enabled: false, used_for_first_factor: true });
 f.withPhoneNumber({ enabled: false, used_for_first_factor: true });
 f.withUsername({ enabled: false, used_for_first_factor: true });
 f.withUser({
 first_name: 'George',
 last_name: 'Clerk',
 email_addresses: ['test@clerk.com'],
 phone_numbers: ['+11234567890'],
 username: 'georgeclerk',
 });
 });

 render(<AccountPage />, { wrapper });
 screen.getByText(/Email addresses/i);
 screen.getByText(/Phone numbers/i);
 screen.getByText('georgeclerk');
 });

 it('shows phone section when disabled for sign-up but used for second factor', async () => {
 const { wrapper } = await createFixtures(f => {
 f.withPhoneNumber({ enabled: false, used_for_first_factor: false, used_for_second_factor: true });
 f.withUser({
 first_name: 'George',
 last_name: 'Clerk',
 phone_numbers: ['+11234567890'],
 });
 });

 render(<AccountPage />, { wrapper });
 screen.getByText(/Phone numbers/i);
 });

 it('shows the connected accounts of the user', async () => {
 const { wrapper } = await createFixtures(f => {
 f.withSocialProvider({ provider: 'google' });
Expand Down

36 changes: 36 additions & 0 deletions
packages/ui/src/components/UserProfile/__tests__/EmailsSection.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -95,6 +95,42 @@ describe('EmailSection', () => {
 });
 });

 describe('Add email with attribute disabled for sign-up but used for sign-in', () => {
 const disabledForSignUpConfig = createFixtures.config(f => {
 f.withEmailAddress({ enabled: false, used_for_first_factor: true });
 f.withUser({ username: 'georgeclerk' });
 });

 it('renders add email screen', async () => {
 const { wrapper } = await createFixtures(disabledForSignUpConfig);

 const { getByRole, userEvent, getByLabelText, findByRole } = render(<EmailsSection />, { wrapper });
 await userEvent.click(getByRole('button', { name: 'Add email address' }));
 await findByRole('heading', { name: /Add email address/i });
 getByLabelText(/email address/i);
 });

 it('can add an email and reach the verification screen', async () => {
 const { wrapper, fixtures } = await createFixtures(disabledForSignUpConfig);

 const { getByRole, userEvent, getByLabelText, findByRole } = render(<EmailsSection />, { wrapper });
 await userEvent.click(getByRole('button', { name: 'Add email address' }));
 await findByRole('heading', { name: /Add email address/i });

 fixtures.clerk.user?.createEmailAddress.mockReturnValueOnce(
 Promise.resolve({
 emailAddress: 'test+2@clerk.com',
 prepareVerification: vi.fn().mockReturnValueOnce(Promise.resolve({} as any)),
 } as any),
 );

 await userEvent.type(getByLabelText(/email address/i), 'test+2@clerk.com');
 await userEvent.click(getByRole('button', { name: /add$/i }));
 expect(fixtures.clerk.user?.createEmailAddress).toHaveBeenCalledWith({ email: 'test+2@clerk.com' });
 await findByRole('heading', { name: /Verify email address/i });
 });
 });

 describe('Remove email', () => {
 it('Renders remove screen', async () => {
 const { wrapper } = await createFixtures(withEmails);
Expand Down

38 changes: 36 additions & 2 deletions
packages/ui/src/components/UserProfile/__tests__/PhoneSection.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
import { act } from '@testing-library/react';
import { describe, expect, it } from 'vitest';
import { describe, expect, it, vi } from 'vitest';

import { bindCreateFixtures } from '@/test/create-fixtures';
import { render, screen } from '@/test/utils';
Expand DownExpand Up@@ -335,5 +335,39 @@ describe('PhoneSection', () => {
 });
 });

 it.todo('Test for verification of added phone number');
 describe('Add phone with attribute disabled for sign-up but used for sign-in', () => {
 const disabledForSignUpConfig = createFixtures.config(f => {
 f.withPhoneNumber({ enabled: false, used_for_first_factor: true });
 f.withUser({ email_addresses: ['test@clerk.com'] });
 });

 it('renders add phone screen', async () => {
 const { wrapper } = await createFixtures(disabledForSignUpConfig);

 const { getByRole, userEvent, getByLabelText, findByRole } = render(<PhoneSection />, { wrapper });
 await userEvent.click(getByRole('button', { name: 'Add phone number' }));
 await findByRole('heading', { name: /Add phone number/i });
 getByLabelText(/phone number/i);
 });

 it('can add a phone and reach the verification screen', async () => {
 const { wrapper, fixtures } = await createFixtures(disabledForSignUpConfig);

 const { getByRole, userEvent, getByLabelText, findByRole } = render(<PhoneSection />, { wrapper });
 await userEvent.click(getByRole('button', { name: 'Add phone number' }));
 await findByRole('heading', { name: /Add phone number/i });

 fixtures.clerk.user?.createPhoneNumber.mockReturnValueOnce(
 Promise.resolve({
 phoneNumber: '+16911111111',
 prepareVerification: vi.fn().mockReturnValueOnce(Promise.resolve({} as any)),
 } as any),
 );

 await userEvent.type(getByLabelText(/phone number/i), '6911111111');
 await userEvent.click(getByRole('button', { name: /add$/i }));
 expect(fixtures.clerk.user?.createPhoneNumber).toHaveBeenCalledWith({ phoneNumber: '+16911111111' });
 await findByRole('heading', { name: /Verify phone number/i });
 });
 });
});

12 changes: 11 additions & 1 deletion
packages/ui/src/components/UserProfile/utils.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,4 +1,14 @@
import type { EmailAddressResource, PhoneNumberResource, Web3WalletResource } from '@clerk/shared/types';
import type { AttributeData, EmailAddressResource, PhoneNumberResource, Web3WalletResource } from '@clerk/shared/types';

/**
 * An attribute is "available" in the UserProfile if it's enabled for sign-up
 * OR used as a first/second factor for sign-in. This covers instances where
 * an attribute is disabled for sign-up but still used for authentication
 * (e.g. accounts provisioned exclusively by invitation).
 */
export function isAttributeAvailable(attr: AttributeData | undefined): boolean {
 return Boolean(attr?.enabled || attr?.used_for_first_factor || attr?.used_for_second_factor);
}

type IDable = { id: string };

Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
fix(ui): UserProfile should show attributes enabled for sign in by dmoerner · Pull Request #8042 · clerk/javascript · GitHub
Skip to content
fix(ui): UserProfile should show attributes enabled for sign in#8042

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

wobsoriano
merged 11 commits into

from

Jun 29, 2026
 Merged


fix(ui): UserProfile should show attributes enabled for sign in
#8042
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


11 commits


Select commit
Hold shift + click to select a range
39ac1ee

fix(ui): Display attributes enabled for sign in


dmoerner Mar 10, 2026
a91df64

Merge branch 'main' into daniel/user-4904-userprofile-should-show-att…


dmoerner Mar 11, 2026
a389214

chore: changeset


dmoerner Mar 11, 2026
abe963c

chore: Add unit tests for email and phone verification


dmoerner Mar 11, 2026
ae81c5a

Merge branch 'main' into daniel/user-4904-userprofile-should-show-att…


dmoerner Apr 16, 2026
8f1e53b

fix: Precalculate available attributes on usersettings object


dmoerner Apr 20, 2026
b17a9c5

Merge branch 'main' into daniel/user-4904-userprofile-should-show-att…


dmoerner Apr 20, 2026
e848ffc

prettier


dmoerner Apr 20, 2026
4584aa1

Merge branch 'main' into daniel/user-4904-userprofile-should-show-att…


jacekradko Jun 10, 2026
af31b7f

fix(ui): compute attribute availability locally instead of a UserSett…


jacekradko Jun 11, 2026
1f3e363

Merge branch 'main' into daniel/user-4904-userprofile-should-show-att…


dmoerner Jun 29, 2026

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/curvy-years-strive.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/ui': patch
---

UserProfile should show attributes enabled for sign in

7 changes: 4 additions & 3 deletions
packages/ui/src/components/UserProfile/AccountPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -13,6 +13,7 @@ import { EnterpriseAccountsSection } from './EnterpriseAccountsSection';
import { PhoneSection } from './PhoneSection';
import { UsernameSection } from './UsernameSection';
import { UserProfileSection } from './UserProfileSection';
import { isAttributeAvailable } from './utils';
import { Web3Section } from './Web3Section';

export const AccountPage = withCardStateProvider(() => {
Expand All@@ -21,9 +22,9 @@ export const AccountPage = withCardStateProvider(() => {
 const { user } = useUser();
 const { shouldAllowIdentificationCreation, immutableAttributes } = useUserProfileContext();

 const showUsername = attributes.username?.enabled;
 const showEmail = attributes.email_address?.enabled;
 const showPhone = attributes.phone_number?.enabled;
 const showUsername = isAttributeAvailable(attributes.username);
 const showEmail = isAttributeAvailable(attributes.email_address);
 const showPhone = isAttributeAvailable(attributes.phone_number);
 const showConnectedAccounts = social && Object.values(social).filter(p => p.enabled).length > 0;
 const showEnterpriseAccounts = user && enterpriseSSO.enabled;
 const showWeb3 = attributes.web3_wallet?.enabled;
Expand Down

3 changes: 2 additions & 1 deletion
packages/ui/src/components/UserProfile/EmailForm.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -18,6 +18,7 @@ import { useWizard, Wizard } from '../../common';
import { useEnvironment } from '../../contexts';
import type { LocalizationKey } from '../../localization';
import { localizationKeys } from '../../localization';
import { isAttributeAvailable } from './utils';
import { VerifyWithCode } from './VerifyWithCode';
import { VerifyWithEnterpriseConnection } from './VerifyWithEnterpriseConnection';
import { VerifyWithLink } from './VerifyWithLink';
Expand DownExpand Up@@ -138,7 +139,7 @@ const getTranslationKeyByStrategy = (strategy: PrepareEmailAddressVerificationPa
function isEmailLinksEnabledForInstance(env: EnvironmentResource): boolean {
 const { userSettings } = env;
 const { email_address } = userSettings.attributes;
 return Boolean(email_address?.enabled && email_address?.verifications.includes('email_link'));
 return Boolean(isAttributeAvailable(email_address) && email_address?.verifications.includes('email_link'));
}

/**
Expand Down

34 changes: 34 additions & 0 deletions
packages/ui/src/components/UserProfile/__tests__/AccountPage.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -68,6 +68,40 @@ describe('AccountPage', () => {
 expect(queryByText(/Enterprise Accounts/i)).not.toBeInTheDocument();
 });

 it('shows sections for attributes disabled for sign-up but used for first factor', async () => {
 const { wrapper } = await createFixtures(f => {
 f.withEmailAddress({ enabled: false, used_for_first_factor: true });
 f.withPhoneNumber({ enabled: false, used_for_first_factor: true });
 f.withUsername({ enabled: false, used_for_first_factor: true });
 f.withUser({
 first_name: 'George',
 last_name: 'Clerk',
 email_addresses: ['test@clerk.com'],
 phone_numbers: ['+11234567890'],
 username: 'georgeclerk',
 });
 });

 render(<AccountPage />, { wrapper });
 screen.getByText(/Email addresses/i);
 screen.getByText(/Phone numbers/i);
 screen.getByText('georgeclerk');
 });

 it('shows phone section when disabled for sign-up but used for second factor', async () => {
 const { wrapper } = await createFixtures(f => {
 f.withPhoneNumber({ enabled: false, used_for_first_factor: false, used_for_second_factor: true });
 f.withUser({
 first_name: 'George',
 last_name: 'Clerk',
 phone_numbers: ['+11234567890'],
 });
 });

 render(<AccountPage />, { wrapper });
 screen.getByText(/Phone numbers/i);
 });

 it('shows the connected accounts of the user', async () => {
 const { wrapper } = await createFixtures(f => {
 f.withSocialProvider({ provider: 'google' });
Expand Down

36 changes: 36 additions & 0 deletions
packages/ui/src/components/UserProfile/__tests__/EmailsSection.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -95,6 +95,42 @@ describe('EmailSection', () => {
 });
 });

 describe('Add email with attribute disabled for sign-up but used for sign-in', () => {
 const disabledForSignUpConfig = createFixtures.config(f => {
 f.withEmailAddress({ enabled: false, used_for_first_factor: true });
 f.withUser({ username: 'georgeclerk' });
 });

 it('renders add email screen', async () => {
 const { wrapper } = await createFixtures(disabledForSignUpConfig);

 const { getByRole, userEvent, getByLabelText, findByRole } = render(<EmailsSection />, { wrapper });
 await userEvent.click(getByRole('button', { name: 'Add email address' }));
 await findByRole('heading', { name: /Add email address/i });
 getByLabelText(/email address/i);
 });

 it('can add an email and reach the verification screen', async () => {
 const { wrapper, fixtures } = await createFixtures(disabledForSignUpConfig);

 const { getByRole, userEvent, getByLabelText, findByRole } = render(<EmailsSection />, { wrapper });
 await userEvent.click(getByRole('button', { name: 'Add email address' }));
 await findByRole('heading', { name: /Add email address/i });

 fixtures.clerk.user?.createEmailAddress.mockReturnValueOnce(
 Promise.resolve({
 emailAddress: 'test+2@clerk.com',
 prepareVerification: vi.fn().mockReturnValueOnce(Promise.resolve({} as any)),
 } as any),
 );

 await userEvent.type(getByLabelText(/email address/i), 'test+2@clerk.com');
 await userEvent.click(getByRole('button', { name: /add$/i }));
 expect(fixtures.clerk.user?.createEmailAddress).toHaveBeenCalledWith({ email: 'test+2@clerk.com' });
 await findByRole('heading', { name: /Verify email address/i });
 });
 });

 describe('Remove email', () => {
 it('Renders remove screen', async () => {
 const { wrapper } = await createFixtures(withEmails);
Expand Down

38 changes: 36 additions & 2 deletions
packages/ui/src/components/UserProfile/__tests__/PhoneSection.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
import { act } from '@testing-library/react';
import { describe, expect, it } from 'vitest';
import { describe, expect, it, vi } from 'vitest';

import { bindCreateFixtures } from '@/test/create-fixtures';
import { render, screen } from '@/test/utils';
Expand DownExpand Up@@ -335,5 +335,39 @@ describe('PhoneSection', () => {
 });
 });

 it.todo('Test for verification of added phone number');
 describe('Add phone with attribute disabled for sign-up but used for sign-in', () => {
 const disabledForSignUpConfig = createFixtures.config(f => {
 f.withPhoneNumber({ enabled: false, used_for_first_factor: true });
 f.withUser({ email_addresses: ['test@clerk.com'] });
 });

 it('renders add phone screen', async () => {
 const { wrapper } = await createFixtures(disabledForSignUpConfig);

 const { getByRole, userEvent, getByLabelText, findByRole } = render(<PhoneSection />, { wrapper });
 await userEvent.click(getByRole('button', { name: 'Add phone number' }));
 await findByRole('heading', { name: /Add phone number/i });
 getByLabelText(/phone number/i);
 });

 it('can add a phone and reach the verification screen', async () => {
 const { wrapper, fixtures } = await createFixtures(disabledForSignUpConfig);

 const { getByRole, userEvent, getByLabelText, findByRole } = render(<PhoneSection />, { wrapper });
 await userEvent.click(getByRole('button', { name: 'Add phone number' }));
 await findByRole('heading', { name: /Add phone number/i });

 fixtures.clerk.user?.createPhoneNumber.mockReturnValueOnce(
 Promise.resolve({
 phoneNumber: '+16911111111',
 prepareVerification: vi.fn().mockReturnValueOnce(Promise.resolve({} as any)),
 } as any),
 );

 await userEvent.type(getByLabelText(/phone number/i), '6911111111');
 await userEvent.click(getByRole('button', { name: /add$/i }));
 expect(fixtures.clerk.user?.createPhoneNumber).toHaveBeenCalledWith({ phoneNumber: '+16911111111' });
 await findByRole('heading', { name: /Verify phone number/i });
 });
 });
});

12 changes: 11 additions & 1 deletion
packages/ui/src/components/UserProfile/utils.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,4 +1,14 @@
import type { EmailAddressResource, PhoneNumberResource, Web3WalletResource } from '@clerk/shared/types';
import type { AttributeData, EmailAddressResource, PhoneNumberResource, Web3WalletResource } from '@clerk/shared/types';

/**
 * An attribute is "available" in the UserProfile if it's enabled for sign-up
 * OR used as a first/second factor for sign-in. This covers instances where
 * an attribute is disabled for sign-up but still used for authentication
 * (e.g. accounts provisioned exclusively by invitation).
 */
export function isAttributeAvailable(attr: AttributeData | undefined): boolean {
 return Boolean(attr?.enabled || attr?.used_for_first_factor || attr?.used_for_second_factor);
}

type IDable = { id: string };

Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
})();
fix(ui): UserProfile should show attributes enabled for sign in by dmoerner · Pull Request #8042 · clerk/javascript · GitHub
Skip to content
fix(ui): UserProfile should show attributes enabled for sign in#8042

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

wobsoriano
merged 11 commits into

from

Jun 29, 2026
 Merged


fix(ui): UserProfile should show attributes enabled for sign in
#8042
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


11 commits


Select commit
Hold shift + click to select a range
39ac1ee

fix(ui): Display attributes enabled for sign in


dmoerner Mar 10, 2026
a91df64

Merge branch 'main' into daniel/user-4904-userprofile-should-show-att…


dmoerner Mar 11, 2026
a389214

chore: changeset


dmoerner Mar 11, 2026
abe963c

chore: Add unit tests for email and phone verification


dmoerner Mar 11, 2026
ae81c5a

Merge branch 'main' into daniel/user-4904-userprofile-should-show-att…


dmoerner Apr 16, 2026
8f1e53b

fix: Precalculate available attributes on usersettings object


dmoerner Apr 20, 2026
b17a9c5

Merge branch 'main' into daniel/user-4904-userprofile-should-show-att…


dmoerner Apr 20, 2026
e848ffc

prettier


dmoerner Apr 20, 2026
4584aa1

Merge branch 'main' into daniel/user-4904-userprofile-should-show-att…


jacekradko Jun 10, 2026
af31b7f

fix(ui): compute attribute availability locally instead of a UserSett…


jacekradko Jun 11, 2026
1f3e363

Merge branch 'main' into daniel/user-4904-userprofile-should-show-att…


dmoerner Jun 29, 2026

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/curvy-years-strive.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/ui': patch
---

UserProfile should show attributes enabled for sign in

7 changes: 4 additions & 3 deletions
packages/ui/src/components/UserProfile/AccountPage.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -13,6 +13,7 @@ import { EnterpriseAccountsSection } from './EnterpriseAccountsSection';
import { PhoneSection } from './PhoneSection';
import { UsernameSection } from './UsernameSection';
import { UserProfileSection } from './UserProfileSection';
import { isAttributeAvailable } from './utils';
import { Web3Section } from './Web3Section';

export const AccountPage = withCardStateProvider(() => {
Expand All@@ -21,9 +22,9 @@ export const AccountPage = withCardStateProvider(() => {
 const { user } = useUser();
 const { shouldAllowIdentificationCreation, immutableAttributes } = useUserProfileContext();

 const showUsername = attributes.username?.enabled;
 const showEmail = attributes.email_address?.enabled;
 const showPhone = attributes.phone_number?.enabled;
 const showUsername = isAttributeAvailable(attributes.username);
 const showEmail = isAttributeAvailable(attributes.email_address);
 const showPhone = isAttributeAvailable(attributes.phone_number);
 const showConnectedAccounts = social && Object.values(social).filter(p => p.enabled).length > 0;
 const showEnterpriseAccounts = user && enterpriseSSO.enabled;
 const showWeb3 = attributes.web3_wallet?.enabled;
Expand Down

3 changes: 2 additions & 1 deletion
packages/ui/src/components/UserProfile/EmailForm.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -18,6 +18,7 @@ import { useWizard, Wizard } from '../../common';
import { useEnvironment } from '../../contexts';
import type { LocalizationKey } from '../../localization';
import { localizationKeys } from '../../localization';
import { isAttributeAvailable } from './utils';
import { VerifyWithCode } from './VerifyWithCode';
import { VerifyWithEnterpriseConnection } from './VerifyWithEnterpriseConnection';
import { VerifyWithLink } from './VerifyWithLink';
Expand DownExpand Up@@ -138,7 +139,7 @@ const getTranslationKeyByStrategy = (strategy: PrepareEmailAddressVerificationPa
function isEmailLinksEnabledForInstance(env: EnvironmentResource): boolean {
 const { userSettings } = env;
 const { email_address } = userSettings.attributes;
 return Boolean(email_address?.enabled && email_address?.verifications.includes('email_link'));
 return Boolean(isAttributeAvailable(email_address) && email_address?.verifications.includes('email_link'));
}

/**
Expand Down

34 changes: 34 additions & 0 deletions
packages/ui/src/components/UserProfile/__tests__/AccountPage.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -68,6 +68,40 @@ describe('AccountPage', () => {
 expect(queryByText(/Enterprise Accounts/i)).not.toBeInTheDocument();
 });

 it('shows sections for attributes disabled for sign-up but used for first factor', async () => {
 const { wrapper } = await createFixtures(f => {
 f.withEmailAddress({ enabled: false, used_for_first_factor: true });
 f.withPhoneNumber({ enabled: false, used_for_first_factor: true });
 f.withUsername({ enabled: false, used_for_first_factor: true });
 f.withUser({
 first_name: 'George',
 last_name: 'Clerk',
 email_addresses: ['test@clerk.com'],
 phone_numbers: ['+11234567890'],
 username: 'georgeclerk',
 });
 });

 render(<AccountPage />, { wrapper });
 screen.getByText(/Email addresses/i);
 screen.getByText(/Phone numbers/i);
 screen.getByText('georgeclerk');
 });

 it('shows phone section when disabled for sign-up but used for second factor', async () => {
 const { wrapper } = await createFixtures(f => {
 f.withPhoneNumber({ enabled: false, used_for_first_factor: false, used_for_second_factor: true });
 f.withUser({
 first_name: 'George',
 last_name: 'Clerk',
 phone_numbers: ['+11234567890'],
 });
 });

 render(<AccountPage />, { wrapper });
 screen.getByText(/Phone numbers/i);
 });

 it('shows the connected accounts of the user', async () => {
 const { wrapper } = await createFixtures(f => {
 f.withSocialProvider({ provider: 'google' });
Expand Down

36 changes: 36 additions & 0 deletions
packages/ui/src/components/UserProfile/__tests__/EmailsSection.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -95,6 +95,42 @@ describe('EmailSection', () => {
 });
 });

 describe('Add email with attribute disabled for sign-up but used for sign-in', () => {
 const disabledForSignUpConfig = createFixtures.config(f => {
 f.withEmailAddress({ enabled: false, used_for_first_factor: true });
 f.withUser({ username: 'georgeclerk' });
 });

 it('renders add email screen', async () => {
 const { wrapper } = await createFixtures(disabledForSignUpConfig);

 const { getByRole, userEvent, getByLabelText, findByRole } = render(<EmailsSection />, { wrapper });
 await userEvent.click(getByRole('button', { name: 'Add email address' }));
 await findByRole('heading', { name: /Add email address/i });
 getByLabelText(/email address/i);
 });

 it('can add an email and reach the verification screen', async () => {
 const { wrapper, fixtures } = await createFixtures(disabledForSignUpConfig);

 const { getByRole, userEvent, getByLabelText, findByRole } = render(<EmailsSection />, { wrapper });
 await userEvent.click(getByRole('button', { name: 'Add email address' }));
 await findByRole('heading', { name: /Add email address/i });

 fixtures.clerk.user?.createEmailAddress.mockReturnValueOnce(
 Promise.resolve({
 emailAddress: 'test+2@clerk.com',
 prepareVerification: vi.fn().mockReturnValueOnce(Promise.resolve({} as any)),
 } as any),
 );

 await userEvent.type(getByLabelText(/email address/i), 'test+2@clerk.com');
 await userEvent.click(getByRole('button', { name: /add$/i }));
 expect(fixtures.clerk.user?.createEmailAddress).toHaveBeenCalledWith({ email: 'test+2@clerk.com' });
 await findByRole('heading', { name: /Verify email address/i });
 });
 });

 describe('Remove email', () => {
 it('Renders remove screen', async () => {
 const { wrapper } = await createFixtures(withEmails);
Expand Down

38 changes: 36 additions & 2 deletions
packages/ui/src/components/UserProfile/__tests__/PhoneSection.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
import { act } from '@testing-library/react';
import { describe, expect, it } from 'vitest';
import { describe, expect, it, vi } from 'vitest';

import { bindCreateFixtures } from '@/test/create-fixtures';
import { render, screen } from '@/test/utils';
Expand DownExpand Up@@ -335,5 +335,39 @@ describe('PhoneSection', () => {
 });
 });

 it.todo('Test for verification of added phone number');
 describe('Add phone with attribute disabled for sign-up but used for sign-in', () => {
 const disabledForSignUpConfig = createFixtures.config(f => {
 f.withPhoneNumber({ enabled: false, used_for_first_factor: true });
 f.withUser({ email_addresses: ['test@clerk.com'] });
 });

 it('renders add phone screen', async () => {
 const { wrapper } = await createFixtures(disabledForSignUpConfig);

 const { getByRole, userEvent, getByLabelText, findByRole } = render(<PhoneSection />, { wrapper });
 await userEvent.click(getByRole('button', { name: 'Add phone number' }));
 await findByRole('heading', { name: /Add phone number/i });
 getByLabelText(/phone number/i);
 });

 it('can add a phone and reach the verification screen', async () => {
 const { wrapper, fixtures } = await createFixtures(disabledForSignUpConfig);

 const { getByRole, userEvent, getByLabelText, findByRole } = render(<PhoneSection />, { wrapper });
 await userEvent.click(getByRole('button', { name: 'Add phone number' }));
 await findByRole('heading', { name: /Add phone number/i });

 fixtures.clerk.user?.createPhoneNumber.mockReturnValueOnce(
 Promise.resolve({
 phoneNumber: '+16911111111',
 prepareVerification: vi.fn().mockReturnValueOnce(Promise.resolve({} as any)),
 } as any),
 );

 await userEvent.type(getByLabelText(/phone number/i), '6911111111');
 await userEvent.click(getByRole('button', { name: /add$/i }));
 expect(fixtures.clerk.user?.createPhoneNumber).toHaveBeenCalledWith({ phoneNumber: '+16911111111' });
 await findByRole('heading', { name: /Verify phone number/i });
 });
 });
});

12 changes: 11 additions & 1 deletion
packages/ui/src/components/UserProfile/utils.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,4 +1,14 @@
import type { EmailAddressResource, PhoneNumberResource, Web3WalletResource } from '@clerk/shared/types';
import type { AttributeData, EmailAddressResource, PhoneNumberResource, Web3WalletResource } from '@clerk/shared/types';

/**
 * An attribute is "available" in the UserProfile if it's enabled for sign-up
 * OR used as a first/second factor for sign-in. This covers instances where
 * an attribute is disabled for sign-up but still used for authentication
 * (e.g. accounts provisioned exclusively by invitation).
 */
export function isAttributeAvailable(attr: AttributeData | undefined): boolean {
 return Boolean(attr?.enabled || attr?.used_for_first_factor || attr?.used_for_second_factor);
}

type IDable = { id: string };

Expand Down
Loading