OTP Playground
-
- {value}
- {status === 'cursor' && (
-
- );
- }}
- />
-
-
-
- )}
-
- {value}
- {status === 'cursor' && (
-
- );
- }}
- />
-
-
-
- )}
- 
+ 
diff --git a/integration/templates/vue-vite/src/main.ts b/integration/templates/vue-vite/src/main.ts
index 375584714b4..d8980dd44a8 100644
--- a/integration/templates/vue-vite/src/main.ts
+++ b/integration/templates/vue-vite/src/main.ts
@@ -8,6 +8,7 @@ const app = createApp(App);
app.use(clerkPlugin, {
publishableKey: import.meta.env.VITE_CLERK_PUBLISHABLE_KEY,
clerkJSUrl: import.meta.env.VITE_CLERK_JS_URL,
+ clerkUiUrl: import.meta.env.VITE_CLERK_UI_URL,
clerkJSVersion: import.meta.env.VITE_CLERK_JS_VERSION,
});
app.use(router);
diff --git a/integration/tests/appearance.test.ts b/integration/tests/appearance.test.ts
index 589d6eff679..73192089912 100644
--- a/integration/tests/appearance.test.ts
+++ b/integration/tests/appearance.test.ts
@@ -14,7 +14,7 @@ test.describe('appearance prop', () => {
.addFile(
'src/App.tsx',
({ tsx }) => tsx`
- import { SignIn, SignUp } from '@clerk/clerk-react';
+ import { SignIn, SignUp } from '@clerk/react';
import { dark, neobrutalism, shadesOfPurple } from '@clerk/themes';
const themes = { shadesOfPurple, neobrutalism, dark };
diff --git a/integration/tests/elements/next-sign-in.test.ts b/integration/tests/elements/next-sign-in.test.ts
deleted file mode 100644
index 6534f28d3e5..00000000000
--- a/integration/tests/elements/next-sign-in.test.ts
+++ /dev/null
@@ -1,194 +0,0 @@
-import { expect, test } from '@playwright/test';
-
-import { appConfigs } from '../../presets';
-import type { FakeUser } from '../../testUtils';
-import { createTestUtils, testAgainstRunningApps } from '../../testUtils';
-
-testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('Next.js Sign-In Flow @elements', ({ app }) => {
- test.describe.configure({ mode: 'serial' });
-
- let fakeUser: FakeUser;
-
- test.beforeAll(async () => {
- const u = createTestUtils({ app });
- fakeUser = u.services.users.createFakeUser({
- fictionalEmail: true,
- withPhoneNumber: true,
- withUsername: true,
- });
- await u.services.users.createBapiUser(fakeUser);
- });
-
- test.afterAll(async () => {
- await fakeUser.deleteIfExists();
- await app.teardown();
- });
-
- test.afterEach(async ({ page, context }) => {
- const u = createTestUtils({ app, page, context });
- await u.page.signOut();
- await u.page.context().clearCookies();
- });
-
- test('sign in with email and password', async ({ page, context }) => {
- const u = createTestUtils({ app, page, context });
- await u.po.signIn.goTo({ headlessSelector: '[data-test-id="sign-in-step-start"]' });
-
- await u.po.signIn.setIdentifier(fakeUser.email);
- await u.po.signIn.continue();
- await u.page.waitForAppUrl('/sign-in/continue');
- await u.po.signIn.setPassword(fakeUser.password);
- await u.po.signIn.continue();
-
- await u.po.expect.toBeSignedIn();
- });
-
- test('sign in with email and instant password', async ({ page, context }) => {
- const u = createTestUtils({ app, page, context });
- await u.po.signIn.goTo({ headlessSelector: '[data-test-id="sign-in-step-start"]' });
-
- await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
-
- await u.po.expect.toBeSignedIn();
- });
-
- test('does not allow arbitrary redirect URLs on sign in', async ({ page, context }) => {
- const u = createTestUtils({ app, page, context });
- await u.po.signIn.goTo({
- searchParams: new URLSearchParams({ redirect_url: 'https://evil.com' }),
- headlessSelector: '[data-test-id="sign-in-step-start"]',
- });
-
- await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
-
- expect(u.page.url()).not.toContain('https://evil.com');
-
- await u.po.expect.toBeSignedIn();
- });
-
- test('sign in with email code', async ({ page, context }) => {
- const u = createTestUtils({ app, page, context });
- await u.po.signIn.goTo({ headlessSelector: '[data-test-id="sign-in-step-start"]' });
-
- await u.po.signIn.setIdentifier(fakeUser.email);
- await u.po.signIn.continue();
-
- await u.page.getByRole('button', { name: /use another method/i }).click();
- await u.po.signIn.getAltMethodsEmailCodeButton().click();
- await page.getByRole('textbox', { name: 'Enter email verification code' }).click();
- await page.keyboard.type('424242', { delay: 100 });
- await u.po.signIn.continue();
-
- await u.page.waitForAppUrl('/');
- await u.po.expect.toBeSignedIn();
- });
-
- test('sign in with phone number and password', async ({ page, context }) => {
- const u = createTestUtils({ app, page, context });
- await u.po.signIn.goTo({ headlessSelector: '[data-test-id="sign-in-step-start"]' });
-
- await u.page.getByRole('button', { name: /^use phone/i }).click();
- await u.po.signIn.getIdentifierInput().fill(fakeUser.phoneNumber);
- await u.po.signIn.continue();
- await u.page.waitForAppUrl('/sign-in/continue');
- await u.po.signIn.setPassword(fakeUser.password);
- await u.po.signIn.continue();
-
- await u.po.expect.toBeSignedIn();
- });
-
- test('sign in only with phone number', async ({ page, context }) => {
- const u = createTestUtils({ app, page, context });
- const fakeUserWithoutPassword = u.services.users.createFakeUser({
- fictionalEmail: true,
- withPassword: false,
- withPhoneNumber: true,
- });
- await u.services.users.createBapiUser(fakeUserWithoutPassword);
- await u.po.signIn.goTo({ headlessSelector: '[data-test-id="sign-in-step-start"]' });
- await u.page.getByRole('button', { name: /^use phone/i }).click();
- await u.po.signIn.getIdentifierInput().fill(fakeUserWithoutPassword.phoneNumber);
- await u.po.signIn.continue();
- await page.getByRole('textbox', { name: 'Enter phone verification code' }).click();
- await page.keyboard.type('424242', { delay: 100 });
- await u.po.signIn.continue();
-
- await u.po.expect.toBeSignedIn();
-
- await fakeUserWithoutPassword.deleteIfExists();
- });
-
- test('sign in with username and password', async ({ page, context }) => {
- const u = createTestUtils({ app, page, context });
- await u.po.signIn.goTo({ headlessSelector: '[data-test-id="sign-in-step-start"]' });
-
- await u.po.signIn.getIdentifierInput().fill(fakeUser.username);
- await u.po.signIn.continue();
- await u.page.waitForAppUrl('/sign-in/continue');
- await u.po.signIn.setPassword(fakeUser.password);
- await u.po.signIn.continue();
-
- await u.po.expect.toBeSignedIn();
- });
-
- test('can reset password', async ({ page, context }) => {
- const u = createTestUtils({ app, page, context });
- const fakeUserWithPasword = u.services.users.createFakeUser({
- fictionalEmail: true,
- withPassword: true,
- });
- await u.services.users.createBapiUser(fakeUserWithPasword);
-
- await u.po.signIn.goTo({ headlessSelector: '[data-test-id="sign-in-step-start"]' });
-
- await u.po.signIn.getIdentifierInput().fill(fakeUserWithPasword.email);
- await u.po.signIn.continue();
- await u.page.getByRole('button', { name: /^forgot password/i }).click();
- await u.po.signIn.getResetPassword().click();
- await page.getByRole('textbox', { name: 'Enter email verification code' }).click();
- await page.keyboard.type('424242', { delay: 100 });
- await u.po.signIn.continue();
-
- await u.po.signIn.setPassword(`${fakeUserWithPasword.password}_reset`);
- await u.po.signIn.setPasswordConfirmation(`${fakeUserWithPasword.password}_reset`);
- await u.po.signIn.getResetPassword().click();
- await u.po.expect.toBeSignedIn();
-
- await fakeUserWithPasword.deleteIfExists();
- });
-
- test('cannot sign in with wrong password', async ({ page, context }) => {
- const u = createTestUtils({ app, page, context });
-
- await u.po.signIn.goTo({ headlessSelector: '[data-test-id="sign-in-step-start"]' });
- await u.po.signIn.getIdentifierInput().fill(fakeUser.email);
- await u.po.signIn.continue();
- await u.page.waitForAppUrl('/sign-in/continue');
- await u.po.signIn.setPassword('wrong-password');
- await u.po.signIn.continue();
- await expect(u.page.getByText(/^password is incorrect/i)).toBeVisible();
-
- await u.po.expect.toBeSignedOut();
- });
-
- test('cannot sign in with wrong password but can sign in with email', async ({ page, context }) => {
- const u = createTestUtils({ app, page, context });
-
- await u.po.signIn.goTo({ headlessSelector: '[data-test-id="sign-in-step-start"]' });
- await u.po.signIn.getIdentifierInput().fill(fakeUser.email);
- await u.po.signIn.continue();
- await u.page.waitForAppUrl('/sign-in/continue');
- await u.po.signIn.setPassword('wrong-password');
- await u.po.signIn.continue();
-
- await expect(u.page.getByText(/^password is incorrect/i)).toBeVisible();
-
- await u.page.getByRole('button', { name: /use another method/i }).click();
- await u.po.signIn.getAltMethodsEmailCodeButton().click();
- await page.getByRole('textbox', { name: 'Enter email verification code' }).click();
- await page.keyboard.type('424242', { delay: 100 });
- await u.po.signIn.continue();
-
- await u.po.expect.toBeSignedIn();
- });
-});
diff --git a/integration/tests/elements/next-sign-up.test.ts b/integration/tests/elements/next-sign-up.test.ts
deleted file mode 100644
index 70f7d42dd25..00000000000
--- a/integration/tests/elements/next-sign-up.test.ts
+++ /dev/null
@@ -1,192 +0,0 @@
-import { expect, test } from '@playwright/test';
-
-import { appConfigs } from '../../presets';
-import { createTestUtils, testAgainstRunningApps } from '../../testUtils';
-
-testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('Next.js Sign-Up Flow @elements', ({ app }) => {
- test.describe.configure({ mode: 'serial' });
-
- test.afterAll(async () => {
- await app.teardown();
- });
-
- test('sign up with email and password', async ({ page, context }) => {
- const u = createTestUtils({ app, page, context });
- const fakeUser = u.services.users.createFakeUser({
- fictionalEmail: true,
- withPhoneNumber: true,
- withUsername: true,
- });
-
- await u.po.signUp.goTo({ headlessSelector: '[data-test-id="sign-up-step-start"]' });
-
- await u.po.signUp.signUpWithEmailAndPassword({
- email: fakeUser.email,
- password: fakeUser.password,
- });
-
- await page.getByRole('textbox', { name: 'Enter email verification code' }).click();
- await page.keyboard.type('424242', { delay: 100 });
- await u.po.signUp.continue();
-
- await u.page.waitForAppUrl('/');
- await u.po.expect.toBeSignedIn();
-
- await fakeUser.deleteIfExists();
- });
-
- test('does not allow arbitrary redirect URLs on sign up', async ({ page, context }) => {
- const u = createTestUtils({ app, page, context });
- const fakeUser = u.services.users.createFakeUser({
- fictionalEmail: true,
- withPhoneNumber: true,
- withUsername: true,
- });
-
- await u.po.signUp.goTo({
- searchParams: new URLSearchParams({ redirect_url: 'https://evil.com' }),
- headlessSelector: '[data-test-id="sign-up-step-start"]',
- });
-
- await u.po.signUp.signUpWithEmailAndPassword({
- email: fakeUser.email,
- password: fakeUser.password,
- });
-
- await page.getByRole('textbox', { name: 'Enter email verification code' }).click();
- await page.keyboard.type('424242', { delay: 100 });
- await u.po.signUp.continue();
-
- await u.page.waitForAppUrl('/');
- await u.po.expect.toBeSignedIn();
-
- await fakeUser.deleteIfExists();
- });
-
- test("can't sign up with weak password", async ({ page, context }) => {
- const u = createTestUtils({ app, page, context });
- const fakeUser = u.services.users.createFakeUser({
- fictionalEmail: true,
- withPhoneNumber: true,
- withUsername: true,
- });
-
- await u.po.signUp.goTo({ headlessSelector: '[data-test-id="sign-up-step-start"]' });
-
- await u.po.signUp.signUpWithEmailAndPassword({
- email: fakeUser.email,
- password: '12345',
- });
-
- // Check if password error is visible
- await expect(u.page.getByText(/Passwords must be \d+ characters or more/i)).toBeVisible();
-
- await u.po.expect.toBeSignedOut();
-
- await fakeUser.deleteIfExists();
- });
-
- test('can sign up with phone number', async ({ page, context }) => {
- const u = createTestUtils({ app, page, context });
- const fakeUser = u.services.users.createFakeUser({
- fictionalEmail: true,
- withPhoneNumber: true,
- withUsername: true,
- });
-
- await u.po.signUp.goTo({ headlessSelector: '[data-test-id="sign-up-step-start"]' });
-
- await u.po.signUp.signUp({
- email: fakeUser.email,
- phoneNumber: fakeUser.phoneNumber,
- password: fakeUser.password,
- });
-
- await page.getByRole('textbox', { name: 'Enter phone verification code' }).click();
- await page.keyboard.type('424242', { delay: 100 });
- await u.po.signUp.continue();
-
- await page.getByRole('textbox', { name: 'Enter email verification code' }).click();
- await page.keyboard.type('424242', { delay: 100 });
- await u.po.signUp.continue();
-
- await u.po.expect.toBeSignedIn();
- await fakeUser.deleteIfExists();
- });
-
- test('sign up with first name, last name, email, phone and password', async ({ page, context }) => {
- const u = createTestUtils({ app, page, context });
- const fakeUser = u.services.users.createFakeUser({
- fictionalEmail: true,
- withPhoneNumber: true,
- withUsername: true,
- });
-
- await u.po.signUp.goTo({ headlessSelector: '[data-test-id="sign-up-step-start"]' });
-
- await u.po.signUp.signUp({
- username: fakeUser.username,
- email: fakeUser.email,
- phoneNumber: fakeUser.phoneNumber,
- password: fakeUser.password,
- });
-
- await page.getByRole('textbox', { name: 'Enter phone verification code' }).click();
- await page.keyboard.type('424242', { delay: 100 });
- await u.po.signUp.continue();
-
- await page.getByRole('textbox', { name: 'Enter email verification code' }).click();
- await page.keyboard.type('424242', { delay: 100 });
- await u.po.signUp.continue();
-
- await u.po.expect.toBeSignedIn();
-
- await fakeUser.deleteIfExists();
- });
-
- test('sign up, sign out and sign in again', async ({ page, context }) => {
- const u = createTestUtils({ app, page, context });
- const fakeUser = u.services.users.createFakeUser({
- fictionalEmail: true,
- withPhoneNumber: true,
- withUsername: true,
- });
-
- await u.po.signUp.goTo({ headlessSelector: '[data-test-id="sign-up-step-start"]' });
-
- await u.po.signUp.signUp({
- username: fakeUser.username,
- email: fakeUser.email,
- phoneNumber: fakeUser.phoneNumber,
- password: fakeUser.password,
- });
-
- await page.getByRole('textbox', { name: 'Enter phone verification code' }).click();
- await page.keyboard.type('424242', { delay: 100 });
- await u.po.signUp.continue();
-
- await page.getByRole('textbox', { name: 'Enter email verification code' }).click();
- await page.keyboard.type('424242', { delay: 100 });
- await u.po.signUp.continue();
-
- await u.po.expect.toBeSignedIn();
-
- await u.page.evaluate(async () => {
- await window.Clerk.signOut();
- });
-
- await u.po.expect.toBeSignedOut();
-
- await u.po.signIn.goTo({ headlessSelector: '[data-test-id="sign-in-step-start"]' });
-
- await u.po.signIn.setIdentifier(fakeUser.email);
- await u.po.signIn.continue();
- await u.page.waitForAppUrl('/sign-in/continue');
- await u.po.signIn.setPassword(fakeUser.password);
- await u.po.signIn.continue();
-
- await u.po.expect.toBeSignedIn();
-
- await fakeUser.deleteIfExists();
- });
-});
diff --git a/integration/tests/elements/otp.test.ts b/integration/tests/elements/otp.test.ts
deleted file mode 100644
index 59f63f3414f..00000000000
--- a/integration/tests/elements/otp.test.ts
+++ /dev/null
@@ -1,225 +0,0 @@
-import { expect, test } from '@playwright/test';
-
-import { appConfigs } from '../../presets';
-import { createTestUtils, testAgainstRunningApps } from '../../testUtils';
-
-testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('OTP @elements', ({ app }) => {
- test.describe.configure({ mode: 'parallel' });
-
- test.afterAll(async () => {
- await app.teardown();
- });
-
- test.beforeEach(async ({ page, context }) => {
- const u = createTestUtils({ app, page, context });
- await u.page.goToRelative('/otp');
- });
-
- const otpTypes = {
- simpleOtp: 'simple-otp',
- segmentedOtp: 'segmented-otp',
- segmentedOtpWithProps: 'segmented-otp-with-props',
- } as const;
-
- for (const otpType of [otpTypes.simpleOtp, otpTypes.segmentedOtp]) {
- test.describe(`Type: ${otpType}`, () => {
- test(`should receive correct standard props`, async ({ page }) => {
- const otp = page.getByTestId(otpType);
-
- await expect(otp).toHaveAttribute('autocomplete', 'one-time-code');
- await expect(otp).toHaveAttribute('spellcheck', 'false');
- await expect(otp).toHaveAttribute('inputmode', 'numeric');
- await expect(otp).toHaveAttribute('maxlength', '6');
- await expect(otp).toHaveAttribute('minlength', '6');
- await expect(otp).toHaveAttribute('pattern', '[0-9]{6}');
- await expect(otp).toHaveAttribute('type', 'text');
- });
-
- test(`should change the input value`, async ({ page }) => {
- const otp = page.getByTestId(otpType);
-
- // Check that the input starts with an empty value
- await expect(otp).toHaveValue('');
-
- await otp.pressSequentially('1');
- await expect(otp).toHaveValue('1');
-
- await otp.pressSequentially('23456');
- await expect(otp).toHaveValue('123456');
- });
- });
- }
-
- test.describe(`Type: ${otpTypes.simpleOtp}`, () => {
- test(`should prevent typing greater than max length`, async ({ page }) => {
- const otp = page.getByTestId(otpTypes.simpleOtp);
-
- await otp.pressSequentially('1234567');
- await expect(otp).toHaveValue('123456');
- });
- });
-
- test.describe(`Type: ${otpTypes.segmentedOtp}`, () => {
- test('renders hidden segments', async ({ page }) => {
- const otpSegmentsWrapper = page.locator('.segmented-otp-wrapper');
-
- await expect(otpSegmentsWrapper).toHaveAttribute('aria-hidden', 'true');
- // Check that 6 segments are rendered
- await expect(otpSegmentsWrapper.locator('> div')).toHaveCount(6);
- });
-
- test(`should prevent typing greater than max length`, async ({ page }) => {
- const otp = page.getByTestId(otpTypes.segmentedOtp);
-
- await otp.pressSequentially('1234567');
- // With the segmented OTP we expect the last char to be replaced by any new input
- await expect(otp).toHaveValue('123457');
- });
-
- test(`should put values into segments`, async ({ page }) => {
- const otp = page.getByTestId(otpTypes.segmentedOtp);
-
- // Check initial state before any interaction
- for (let i = 0; i < 6; i++) {
- await expect(page.getByTestId(`segmented-otp-${i}`)).toHaveText('');
- await expect(page.getByTestId(`segmented-otp-${i}`)).toHaveAttribute('data-status', 'none');
- }
-
- await otp.pressSequentially('123456');
-
- for (let i = 0; i < 6; i++) {
- await expect(page.getByTestId(`segmented-otp-${i}`)).toHaveText(`${i + 1}`);
- }
- });
-
- test('should set hover status on segments', async ({ page }) => {
- const otp = page.getByTestId(otpTypes.segmentedOtp);
-
- await otp.hover();
- for (let i = 0; i < 6; i++) {
- await expect(page.getByTestId(`segmented-otp-${i}`)).toHaveAttribute('data-status', 'hovered');
- }
- });
-
- test('should not set hover status on segments if they are focused', async ({ page }) => {
- const otp = page.getByTestId(otpTypes.segmentedOtp);
-
- await otp.pressSequentially('123');
- await otp.hover();
- for (let i = 0; i < 6; i++) {
- await expect(page.getByTestId(`segmented-otp-${i}`)).not.toHaveAttribute('data-status', 'hovered');
- }
- });
-
- test('should set cursor and selected status on segments', async ({ page }) => {
- const otp = page.getByTestId(otpTypes.segmentedOtp);
-
- await otp.pressSequentially('12');
-
- await expect(page.getByTestId('segmented-otp-0')).toHaveAttribute('data-status', 'none');
- await expect(page.getByTestId('segmented-otp-1')).toHaveAttribute('data-status', 'none');
- await expect(page.getByTestId('segmented-otp-2')).toHaveAttribute('data-status', 'cursor');
-
- await otp.press('ArrowLeft');
-
- await expect(page.getByTestId('segmented-otp-0')).toHaveAttribute('data-status', 'none');
- await expect(page.getByTestId('segmented-otp-1')).toHaveAttribute('data-status', 'selected');
- await expect(page.getByTestId('segmented-otp-2')).toHaveAttribute('data-status', 'none');
-
- await otp.press('ArrowLeft');
-
- await expect(page.getByTestId('segmented-otp-0')).toHaveAttribute('data-status', 'selected');
- await expect(page.getByTestId('segmented-otp-1')).toHaveAttribute('data-status', 'none');
- });
-
- test('should replace selected segment with new input', async ({ page }) => {
- const otp = page.getByTestId(otpTypes.segmentedOtp);
-
- await otp.pressSequentially('12');
-
- await otp.press('ArrowLeft');
- await otp.pressSequentially('1');
- await expect(otp).toHaveValue('11');
- });
-
- test('should replace multi-selected segments with new input', async ({ page }) => {
- const otp = page.getByTestId(otpTypes.segmentedOtp);
-
- await otp.pressSequentially('12345');
- // Mark two segments to the left of the cursor
- await otp.press('Shift+ArrowLeft');
- await otp.press('Shift+ArrowLeft');
- await expect(page.getByTestId('segmented-otp-3')).toHaveAttribute('data-status', 'selected');
- await expect(page.getByTestId('segmented-otp-4')).toHaveAttribute('data-status', 'selected');
- await otp.pressSequentially('1');
-
- await expect(otp).toHaveValue('1231');
-
- // Mark all segments
- await otp.press('ControlOrMeta+a');
- await otp.pressSequentially('1');
-
- await expect(otp).toHaveValue('1');
- });
-
- test('should backspace char', async ({ page }) => {
- const otp = page.getByTestId(otpTypes.segmentedOtp);
-
- await otp.pressSequentially('123');
- await otp.press('Backspace');
-
- await expect(otp).toHaveValue('12');
- await expect(page.getByTestId('segmented-otp-2')).toHaveAttribute('data-status', 'cursor');
- });
-
- test('should backspace all chars with modifier', async ({ page }) => {
- const otp = page.getByTestId(otpTypes.segmentedOtp);
-
- await otp.pressSequentially('123');
- await otp.press('ControlOrMeta+Backspace');
-
- await expect(otp).toHaveValue('');
- await expect(page.getByTestId('segmented-otp-0')).toHaveAttribute('data-status', 'cursor');
- });
-
- test('should backspace selected char', async ({ page }) => {
- const otp = page.getByTestId(otpTypes.segmentedOtp);
-
- await otp.pressSequentially('123');
- await otp.press('ArrowLeft');
- await otp.press('ArrowLeft');
- await otp.press('Backspace');
-
- await expect(otp).toHaveValue('13');
- });
-
- test('should forward-delete char when pressing delete', async ({ page }) => {
- const otp = page.getByTestId(otpTypes.segmentedOtp);
-
- await otp.pressSequentially('1234');
-
- await otp.press('ArrowLeft');
- await otp.press('ArrowLeft');
- await otp.press('Delete');
-
- await expect(otp).toHaveValue('124');
- await otp.press('ArrowRight');
- await otp.press('Delete');
- await expect(otp).toHaveValue('12');
- });
- });
-
- test.describe('Custom props', () => {
- test('length', async ({ page }) => {
- const otp = page.getByTestId(otpTypes.segmentedOtpWithProps);
- const otpSegmentsWrapper = page.locator('.segmented-otp-with-props-wrapper');
-
- await expect(otp).toHaveAttribute('maxlength', '4');
- await expect(otp).toHaveAttribute('minlength', '4');
- await expect(otp).toHaveAttribute('pattern', '[0-9]{4}');
-
- // Check that only 4 segments are rendered
- await expect(otpSegmentsWrapper.locator('> div')).toHaveCount(4);
- });
- });
-});
diff --git a/integration/tests/elements/validate-password.test.ts b/integration/tests/elements/validate-password.test.ts
deleted file mode 100644
index a79999d4d64..00000000000
--- a/integration/tests/elements/validate-password.test.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import { expect, test } from '@playwright/test';
-
-import { appConfigs } from '../../presets';
-import { createTestUtils, testAgainstRunningApps } from '../../testUtils';
-
-testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('Password Validation @elements', ({ app }) => {
- test.describe.configure({ mode: 'parallel' });
-
- test.afterAll(async () => {
- await app.teardown();
- });
-
- test.beforeEach(async ({ page, context }) => {
- const u = createTestUtils({ app, page, context });
- await u.page.goToRelative('/validate-password');
- });
-
- test('should have initial "idle" state', async ({ page, context }) => {
- const u = createTestUtils({ app, page, context });
-
- await expect(u.po.signIn.getPasswordInput()).toHaveAttribute('data-state', 'idle');
- await expect(page.getByTestId('state')).toHaveText('idle');
- });
-
- test('should change state to "info" on focus', async ({ page, context }) => {
- const u = createTestUtils({ app, page, context });
- await u.po.signIn.getPasswordInput().focus();
-
- await expect(page.getByTestId('state')).toHaveText('info');
- });
-
- test('should return codes and message with non-idle state', async ({ page, context }) => {
- const u = createTestUtils({ app, page, context });
- await u.po.signIn.getPasswordInput().focus();
-
- await expect(page.getByTestId('codes')).toHaveText(/min_length/);
- await expect(page.getByTestId('message')).toHaveText('Your password must contain 8 or more characters.');
- });
-
- test('should return error when requirements are not met', async ({ page, context }) => {
- const u = createTestUtils({ app, page, context });
- await u.po.signIn.setPassword('12345678');
-
- await expect(page.getByTestId('state')).toHaveText('error');
- await expect(page.getByTestId('codes')).toHaveText(/require_special_char/);
- await expect(page.getByTestId('message')).toHaveText('Your password must contain a special character.');
- });
-
- test('should return success when requirements are met', async ({ page, context }) => {
- const u = createTestUtils({ app, page, context });
- await u.po.signIn.setPassword('12345678@');
-
- await expect(page.getByTestId('state')).toHaveText('success');
- await expect(page.getByTestId('codes')).toHaveText('');
- await expect(page.getByTestId('message')).toHaveText('Your password meets all the necessary requirements.');
- });
-
- test('should have working flow', async ({ page, context }) => {
- const u = createTestUtils({ app, page, context });
-
- await expect(page.getByTestId('state')).toHaveText('idle');
- await u.po.signIn.setPassword('123');
- await expect(page.getByTestId('state')).toHaveText('info');
- await u.po.signIn.setPassword('12345678');
- await expect(page.getByTestId('state')).toHaveText('error');
- await u.po.signIn.setPassword('12345678@');
- await expect(page.getByTestId('state')).toHaveText('success');
- });
-});
diff --git a/integration/tests/global.setup.ts b/integration/tests/global.setup.ts
index 52a373ebe71..377477b4979 100644
--- a/integration/tests/global.setup.ts
+++ b/integration/tests/global.setup.ts
@@ -2,7 +2,7 @@ import { test as setup } from '@playwright/test';
import { constants } from '../constants';
import { appConfigs } from '../presets';
-import { fs, parseEnvOptions, startClerkJsHttpServer } from '../scripts';
+import { fs, parseEnvOptions, startClerkJsHttpServer, startClerkUiHttpServer } from '../scripts';
setup('start long running apps', async () => {
setup.setTimeout(90_000);
@@ -10,6 +10,7 @@ setup('start long running apps', async () => {
await fs.ensureDir(constants.TMP_DIR);
await startClerkJsHttpServer();
+ await startClerkUiHttpServer();
const { appIds } = parseEnvOptions();
if (appIds.length) {
diff --git a/integration/tests/global.teardown.ts b/integration/tests/global.teardown.ts
index e9aee7c0f26..00e9296dca5 100644
--- a/integration/tests/global.teardown.ts
+++ b/integration/tests/global.teardown.ts
@@ -3,13 +3,14 @@ import { test as setup } from '@playwright/test';
import { constants } from '../constants';
import { stateFile } from '../models/stateFile';
import { appConfigs } from '../presets';
-import { killClerkJsHttpServer, parseEnvOptions } from '../scripts';
+import { killClerkJsHttpServer, killClerkUiHttpServer, parseEnvOptions } from '../scripts';
setup('teardown long running apps', async () => {
setup.setTimeout(90_000);
const { appUrl } = parseEnvOptions();
await killClerkJsHttpServer();
+ await killClerkUiHttpServer();
if (appUrl || !constants.CLEANUP) {
// if appUrl is provided, it means that the user is running an app manually
diff --git a/integration/tests/last-authentication-strategy.test.ts b/integration/tests/last-authentication-strategy.test.ts
index 09449c0fde8..194ca1c6a82 100644
--- a/integration/tests/last-authentication-strategy.test.ts
+++ b/integration/tests/last-authentication-strategy.test.ts
@@ -1,7 +1,7 @@
+import type { LastAuthenticationStrategy } from '@clerk/shared/types';
import type { Page } from '@playwright/test';
import { expect, test } from '@playwright/test';
-import type { LastAuthenticationStrategy } from '../../packages/types';
import { appConfigs } from '../presets';
import { createTestUtils, testAgainstRunningApps } from '../testUtils';
diff --git a/integration/tests/nuxt/basic.test.ts b/integration/tests/nuxt/basic.test.ts
index 12bf61f114d..5f48239e37e 100644
--- a/integration/tests/nuxt/basic.test.ts
+++ b/integration/tests/nuxt/basic.test.ts
@@ -30,21 +30,6 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withCustomRoles] })('basic te
await u.page.context().clearCookies();
});
- test('sign in with hash routing', async ({ page, context }) => {
- const u = createTestUtils({ app, page, context });
-
- await u.page.goToRelative('/sign-in');
- await u.po.signIn.waitForMounted();
-
- await u.po.signIn.setIdentifier(fakeUser.email);
- await u.po.signIn.continue();
- await u.page.waitForURL(`${app.serverUrl}/sign-in#/factor-one`);
-
- await u.po.signIn.setPassword(fakeUser.password);
- await u.po.signIn.continue();
- await u.po.expect.toBeSignedIn();
- });
-
test('render user profile with SSR data', async ({ page, context }) => {
const u = createTestUtils({ app, page, context });
@@ -54,7 +39,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withCustomRoles] })('basic te
await u.po.expect.toBeSignedIn();
await u.po.userButton.waitForMounted();
- await u.page.goToRelative('/user');
+ await u.page.goToRelative('/user-profile');
await u.po.userProfile.waitForMounted();
// Fetched from an API endpoint (/api/me), which is server-rendered.
@@ -66,7 +51,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withCustomRoles] })('basic te
test('redirects to sign-in when unauthenticated', async ({ page, context }) => {
const u = createTestUtils({ app, page, context });
- await u.page.goToRelative('/user');
+ await u.page.goToRelative('/user-profile');
await u.page.waitForURL(`${app.serverUrl}/sign-in`);
await u.po.signIn.waitForMounted();
});
diff --git a/integration/tests/nuxt/navigation.test.ts b/integration/tests/nuxt/navigation.test.ts
new file mode 100644
index 00000000000..de872e9e8e0
--- /dev/null
+++ b/integration/tests/nuxt/navigation.test.ts
@@ -0,0 +1,76 @@
+import { expect, test } from '@playwright/test';
+
+import { appConfigs } from '../../presets';
+import type { FakeUser } from '../../testUtils';
+import { createTestUtils, testAgainstRunningApps } from '../../testUtils';
+
+testAgainstRunningApps({ withEnv: [appConfigs.envs.withCustomRoles] })('navigation modes @nuxt', ({ app }) => {
+ test.describe.configure({ mode: 'serial' });
+ let fakeUser: FakeUser;
+
+ test.beforeAll(async () => {
+ const m = createTestUtils({ app });
+ fakeUser = m.services.users.createFakeUser();
+ await m.services.users.createBapiUser(fakeUser);
+ });
+
+ test.afterAll(async () => {
+ await fakeUser.deleteIfExists();
+ await app.teardown();
+ });
+
+ test('sign in with path routing', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.po.signIn.goTo();
+ await u.po.signIn.waitForMounted();
+
+ await u.po.signIn.setIdentifier(fakeUser.email);
+ await u.po.signIn.continue();
+ await u.page.waitForURL(`${app.serverUrl}/sign-in/factor-one`);
+
+ await u.po.signIn.setPassword(fakeUser.password);
+ await u.po.signIn.continue();
+
+ await u.po.expect.toBeSignedIn();
+ });
+
+ test('sign in with hash routing', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+
+ await u.page.goToRelative('/hash/sign-in');
+ await u.po.signIn.waitForMounted();
+
+ await u.po.signIn.setIdentifier(fakeUser.email);
+ await u.po.signIn.continue();
+ await u.page.waitForURL(`${app.serverUrl}/hash/sign-in#/factor-one`);
+
+ await u.po.signIn.setPassword(fakeUser.password);
+ await u.po.signIn.continue();
+ await u.po.expect.toBeSignedIn();
+ });
+
+ test('sign in with path routing navigates to previous page', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.po.signIn.goTo();
+ await u.po.signIn.waitForMounted();
+
+ await u.po.signIn.getGoToSignUp().click();
+ await u.po.signUp.waitForMounted();
+ await u.page.waitForURL(`${app.serverUrl}/sign-up`);
+
+ await page.goBack();
+ await u.po.signIn.waitForMounted();
+ await u.page.waitForURL(`${app.serverUrl}/sign-in`);
+ });
+
+ test('user profile uses path routing', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+ await u.po.signIn.goTo();
+ await u.po.signIn.waitForMounted();
+ await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+ await u.po.expect.toBeSignedIn();
+
+ await u.page.goToRelative('/user-profile/security');
+ await expect(u.page.locator('.cl-headerTitle').filter({ hasText: 'Security' })).toBeVisible();
+ });
+});
diff --git a/integration/types.d.ts b/integration/types.d.ts
index 8df81fba45b..241f1637063 100644
--- a/integration/types.d.ts
+++ b/integration/types.d.ts
@@ -1,4 +1,4 @@
-import type { Clerk } from '@clerk/types';
+import type { Clerk } from '@clerk/shared/types';
declare global {
interface Window {
diff --git a/package.json b/package.json
index 9d09bb226ed..bd269d632a0 100644
--- a/package.json
+++ b/package.json
@@ -5,12 +5,12 @@
"license": "MIT",
"scripts": {
"build": "FORCE_COLOR=1 turbo build --concurrency=${TURBO_CONCURRENCY:-80%}",
- "build:declarations": "FORCE_COLOR=1 turbo build:declarations --concurrency=${TURBO_CONCURRENCY:-80%} --filter=@clerk/nextjs --filter=@clerk/clerk-react --filter=@clerk/shared --filter=@clerk/types",
+ "build:declarations": "FORCE_COLOR=1 turbo build:declarations --concurrency=${TURBO_CONCURRENCY:-80%} --filter=@clerk/nextjs --filter=@clerk/react --filter=@clerk/shared",
"bundlewatch": "turbo bundlewatch",
"changeset": "changeset",
"changeset:empty": "pnpm changeset --empty",
"clean": "turbo clean",
- "dev": "TURBO_UI=0 FORCE_COLOR=1 turbo dev --filter=@clerk/* --filter=!@clerk/clerk-expo --filter=!@clerk/tanstack-react-start --filter=!@clerk/elements --filter=!@clerk/remix --filter=!@clerk/chrome-extension",
+ "dev": "TURBO_UI=0 FORCE_COLOR=1 turbo dev --filter=@clerk/* --filter=!@clerk/expo --filter=!@clerk/tanstack-react-start --filter=!@clerk/chrome-extension",
"dev:js": "TURBO_UI=0 FORCE_COLOR=1 turbo dev:current --filter=@clerk/clerk-js",
"format": "turbo format && node scripts/format-non-workspace.mjs",
"format:check": "turbo format:check && node scripts/format-non-workspace.mjs --check",
@@ -26,6 +26,7 @@
"prepare": "husky install",
"release": "changeset publish && git push --follow-tags",
"release:canary": "changeset publish --tag canary --no-git-tag",
+ "release:canary-core3": "changeset publish --tag canary-core3 --no-git-tag",
"release:snapshot": "changeset publish --tag snapshot --no-git-tag",
"release:verdaccio": "if [ \"$(npm config get registry)\" = \"https://registry.npmjs.org/\" ]; then echo 'Error: Using default registry' && exit 1; else TURBO_CONCURRENCY=1 pnpm build && changeset publish --no-git-tag; fi",
"test": "FORCE_COLOR=1 turbo test --concurrency=${TURBO_CONCURRENCY:-80%}",
@@ -37,8 +38,7 @@
"test:integration:cleanup": "pnpm playwright test --config integration/playwright.cleanup.config.ts",
"test:integration:custom": "pnpm test:integration:base --grep @custom",
"test:integration:deployment:nextjs": "pnpm playwright test --config integration/playwright.deployments.config.ts",
- "test:integration:elements": "E2E_APP_ID=elements.* pnpm test:integration:base --grep @elements",
- "test:integration:expo-web": "E2E_APP_ID=expo.expo-web pnpm test:integration:base --grep @expo-web",
+ "test:integration:expo-web:disabled": "E2E_APP_ID=expo.expo-web pnpm test:integration:base --grep @expo-web",
"test:integration:express": "E2E_APP_ID=express.* pnpm test:integration:base --grep @express",
"test:integration:generic": "E2E_APP_ID=react.vite.*,next.appRouter.withEmailCodes* pnpm test:integration:base --grep @generic",
"test:integration:handshake": "DISABLE_WEB_SECURITY=true E2E_APP_1_ENV_KEY=sessions-prod-1 E2E_SESSIONS_APP_1_HOST=multiple-apps-e2e.clerk.app pnpm test:integration:base --grep @handshake",
@@ -55,10 +55,11 @@
"test:integration:vue": "E2E_APP_ID=vue.vite pnpm test:integration:base --grep @vue",
"test:typedoc": "pnpm typedoc:generate && cd ./.typedoc && vitest run",
"turbo:clean": "turbo daemon clean",
- "typedoc:generate": "pnpm build:declarations && pnpm typedoc:generate:skip-build",
+ "typedoc:generate": "pnpm build && pnpm typedoc:generate:skip-build",
"typedoc:generate:skip-build": "typedoc --tsconfig tsconfig.typedoc.json && node .typedoc/extract-returns-and-params.mjs && rimraf .typedoc/docs && cpy '.typedoc/temp-docs/**' '.typedoc/docs' && rimraf .typedoc/temp-docs",
"version-packages": "changeset version && pnpm install --lockfile-only --engine-strict=false",
"version-packages:canary": "./scripts/canary.mjs",
+ "version-packages:canary-core3": "./scripts/canary-core3.mjs",
"version-packages:snapshot": "./scripts/snapshot.mjs",
"yalc:all": "for d in packages/*/; do echo $d; cd $d; pnpm yalc push --replace --sig; cd '../../'; done"
},
@@ -154,7 +155,7 @@
},
"packageManager": "pnpm@10.17.1",
"engines": {
- "node": ">=18.17.0",
+ "node": ">=20.9.0",
"pnpm": ">=10.17.1"
},
"pnpm": {
diff --git a/packages/agent-toolkit/package.json b/packages/agent-toolkit/package.json
index 92b136c88dd..569405f3ca9 100644
--- a/packages/agent-toolkit/package.json
+++ b/packages/agent-toolkit/package.json
@@ -49,7 +49,6 @@
"dependencies": {
"@clerk/backend": "workspace:^",
"@clerk/shared": "workspace:^",
- "@clerk/types": "workspace:^",
"@modelcontextprotocol/sdk": "1.7.0",
"yargs": "17.7.2",
"zod": "3.24.2"
diff --git a/packages/astro/package.json b/packages/astro/package.json
index 07e216f1e15..2cb0404cab9 100644
--- a/packages/astro/package.json
+++ b/packages/astro/package.json
@@ -90,7 +90,6 @@
"dependencies": {
"@clerk/backend": "workspace:^",
"@clerk/shared": "workspace:^",
- "@clerk/types": "workspace:^",
"nanoid": "5.1.6",
"nanostores": "1.0.1"
},
@@ -101,7 +100,7 @@
"astro": "^4.15.0 || ^5.0.0"
},
"engines": {
- "node": ">=18.17.0"
+ "node": ">=20.9.0"
},
"publishConfig": {
"access": "public"
diff --git a/packages/astro/src/astro-components/control/AuthenticateWithRedirectCallback.astro b/packages/astro/src/astro-components/control/AuthenticateWithRedirectCallback.astro
index aef20144140..43032416254 100644
--- a/packages/astro/src/astro-components/control/AuthenticateWithRedirectCallback.astro
+++ b/packages/astro/src/astro-components/control/AuthenticateWithRedirectCallback.astro
@@ -1,5 +1,5 @@
---
-import type { HandleOAuthCallbackParams } from '@clerk/types';
+import type { HandleOAuthCallbackParams } from '@clerk/shared/types';
type Props = HandleOAuthCallbackParams;
diff --git a/packages/astro/src/astro-components/control/ProtectCSR.astro b/packages/astro/src/astro-components/control/ProtectCSR.astro
index cee284935c5..e3aa5ca8f3c 100644
--- a/packages/astro/src/astro-components/control/ProtectCSR.astro
+++ b/packages/astro/src/astro-components/control/ProtectCSR.astro
@@ -44,7 +44,7 @@ const {
+ \n`;
}
diff --git a/packages/astro/src/server/clerk-middleware.ts b/packages/astro/src/server/clerk-middleware.ts
index 6841e1c40df..b40c656de99 100644
--- a/packages/astro/src/server/clerk-middleware.ts
+++ b/packages/astro/src/server/clerk-middleware.ts
@@ -18,8 +18,8 @@ import {
import { isDevelopmentFromSecretKey } from '@clerk/shared/keys';
import { handleNetlifyCacheInDevInstance } from '@clerk/shared/netlifyCacheHandler';
import { isHttpOrHttps } from '@clerk/shared/proxy';
+import type { PendingSessionOptions } from '@clerk/shared/types';
import { handleValueOrFn } from '@clerk/shared/utils';
-import type { PendingSessionOptions } from '@clerk/types';
import type { APIContext } from 'astro';
import { authAsyncStorage } from '#async-local-storage';
diff --git a/packages/astro/src/server/get-safe-env.ts b/packages/astro/src/server/get-safe-env.ts
index c1b21574f8d..7ec1824029b 100644
--- a/packages/astro/src/server/get-safe-env.ts
+++ b/packages/astro/src/server/get-safe-env.ts
@@ -31,6 +31,7 @@ function getSafeEnv(context: ContextOrLocals) {
signInUrl: getContextEnvVar('PUBLIC_CLERK_SIGN_IN_URL', context),
signUpUrl: getContextEnvVar('PUBLIC_CLERK_SIGN_UP_URL', context),
clerkJsUrl: getContextEnvVar('PUBLIC_CLERK_JS_URL', context),
+ clerkUiUrl: getContextEnvVar('PUBLIC_CLERK_UI_URL', context),
clerkJsVariant: getContextEnvVar('PUBLIC_CLERK_JS_VARIANT', context) as 'headless' | '' | undefined,
clerkJsVersion: getContextEnvVar('PUBLIC_CLERK_JS_VERSION', context),
apiVersion: getContextEnvVar('CLERK_API_VERSION', context),
diff --git a/packages/astro/src/stores/external.ts b/packages/astro/src/stores/external.ts
index c5516fd5da1..3903ea9f0fb 100644
--- a/packages/astro/src/stores/external.ts
+++ b/packages/astro/src/stores/external.ts
@@ -1,6 +1,6 @@
import { deriveState } from '@clerk/shared/deriveState';
import { eventMethodCalled } from '@clerk/shared/telemetry';
-import type { SignedInSessionResource } from '@clerk/types';
+import type { SignedInSessionResource } from '@clerk/shared/types';
import { batched, computed, onMount, type Store } from 'nanostores';
import { $clerk, $csrState, $initialState } from './internal';
@@ -70,7 +70,7 @@ export const $organizationStore = computed([$authStore], auth => auth.organizati
* It is a nanostore, for instructions on how to use nanostores please review the [documentation](https://github.com/nanostores/nanostores)
*
* @example
- * $clientStore.subscribe((client) => console.log(client.activeSessions))
+ * $clientStore.subscribe((client) => console.log(client?.signedInSessions?.length))
*/
export const $clientStore = computed([$csrState], csr => csr.client);
diff --git a/packages/astro/src/stores/internal.ts b/packages/astro/src/stores/internal.ts
index 4f9a9d50dc4..383cf38e2cc 100644
--- a/packages/astro/src/stores/internal.ts
+++ b/packages/astro/src/stores/internal.ts
@@ -5,7 +5,7 @@ import type {
OrganizationResource,
SignedInSessionResource,
UserResource,
-} from '@clerk/types';
+} from '@clerk/shared/types';
import { atom, map } from 'nanostores';
export const $csrState = map<{
diff --git a/packages/astro/src/types.ts b/packages/astro/src/types.ts
index 4636b5aa317..707006e66dc 100644
--- a/packages/astro/src/types.ts
+++ b/packages/astro/src/types.ts
@@ -5,7 +5,8 @@ import type {
MultiDomainAndOrProxyPrimitives,
ProtectProps,
Without,
-} from '@clerk/types';
+} from '@clerk/shared/types';
+import type { ClerkUiConstructor } from '@clerk/shared/ui';
type AstroClerkUpdateOptions = Pick