Skip to content

refactor(clerk-js,nextjs,clerk-react,shared,types): Remove hashing and third-party cookie based session syncing for development instances. [SDK-645] #2367

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
SokratisVidros merged 1 commit into from
Dec 15, 2023
Merged

refactor(clerk-js,nextjs,clerk-react,shared,types): Remove hashing and third-party cookie based session syncing for development instances. [SDK-645] #2367

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
7 changes: 7 additions & 0 deletions .changeset/famous-penguins-bow.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
'@clerk/types': major
---

- Remove `BuildUrlWithAuthParams` type
- `AuthConfigResource` no longer has a `urlBasedSessionSyncing` property
- `buildUrlWithAuth` no longer accepts an `options` argument of `BuildUrlWithAuthParams`.
10 changes: 10 additions & 0 deletions .changeset/modern-buses-sort.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
---
'@clerk/chrome-extension': major
'@clerk/clerk-js': major
'@clerk/nextjs': major
'@clerk/shared': major
'@clerk/clerk-react': major
'@clerk/types': major
---

Remove hashing and third-party cookie functionality related to development instance session syncing in favor of URL-based session syncing with query parameters.
6 changes: 6 additions & 0 deletions .changeset/modern-mayflies-sort.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@clerk/clerk-js': major
'@clerk/clerk-react': major
---

- `buildUrlWithAuth` no longer accepts an `options` argument.
135 changes: 55 additions & 80 deletions packages/clerk-js/src/core/clerk.redirects.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
import { Clerk } from './clerk';
import type { AuthConfig, DisplayConfig } from './resources/internal';
import type { DevBrowser } from './devBrowser';
import type { DisplayConfig } from './resources/internal';
import { Client, Environment } from './resources/internal';

const mockClientFetch = jest.fn();
const mockEnvironmentFetch = jest.fn();
const mockUsesUrlBasedSessionSync = jest.fn();

jest.mock('./resources/Client');
jest.mock('./resources/Environment');

// Because Jest, don't ask me why...
jest.mock('./devBrowser', () => ({
createDevBrowser: () => ({
createDevBrowser: (): DevBrowser => ({
clear: jest.fn(),
setup: jest.fn(),
getDevBrowserJWT: jest.fn(() => 'deadbeef'),
Expand Down Expand Up @@ -57,7 +57,9 @@ const developmentPublishableKey = 'pk_test_Y2xlcmsuYWJjZWYuMTIzNDUuZGV2LmxjbGNsZ
const productionPublishableKey = 'pk_live_Y2xlcmsuYWJjZWYuMTIzNDUucHJvZC5sY2xjbGVyay5jb20k';

describe('Clerk singleton - Redirects', () => {
let mockNavigate = jest.fn();
const mockNavigate = jest.fn((to: string) => Promise.resolve(to));
const mockedLoadOptions = { routerPush: mockNavigate, routerReplace: mockNavigate };

let mockWindowLocation;
let mockHref: jest.Mock;

Expand Down Expand Up @@ -90,10 +92,10 @@ describe('Clerk singleton - Redirects', () => {
activeSessions: [],
}),
);

mockNavigate = jest.fn((to: string) => Promise.resolve(to));
});

afterEach(() => mockNavigate.mockReset());

describe('.redirectTo(SignUp|SignIn|UserProfile|AfterSignIn|AfterSignUp|CreateOrganization|OrganizationProfile)', () => {
let clerkForProductionInstance: Clerk;
let clerkForDevelopmentInstance: Clerk;
Expand All @@ -102,25 +104,18 @@ describe('Clerk singleton - Redirects', () => {
beforeEach(async () => {
mockEnvironmentFetch.mockReturnValue(
Promise.resolve({
authConfig: { urlBasedSessionSyncing: true } as AuthConfig,
userSettings: mockUserSettings,
displayConfig: mockDisplayConfigWithSameOrigin,
isProduction: () => false,
isDevelopmentOrStaging: () => true,
}),
);

mockUsesUrlBasedSessionSync.mockReturnValue(true);

clerkForProductionInstance = new Clerk(productionPublishableKey);
await clerkForProductionInstance.load({
routerPush: mockNavigate,
});

clerkForDevelopmentInstance = new Clerk(developmentPublishableKey);
await clerkForDevelopmentInstance.load({
routerPush: mockNavigate,
});

await clerkForProductionInstance.load(mockedLoadOptions);
await clerkForDevelopmentInstance.load(mockedLoadOptions);
});

afterEach(() => {
Expand All @@ -129,57 +124,57 @@ describe('Clerk singleton - Redirects', () => {

it('redirects to signInUrl', async () => {
await clerkForProductionInstance.redirectToSignIn({ redirectUrl: 'https://www.example.com/' });
expect(mockNavigate).toHaveBeenNthCalledWith(1, '/sign-in#/?redirect_url=https%3A%2F%2Fwww.example.com%2F');

await clerkForDevelopmentInstance.redirectToSignIn({ redirectUrl: 'https://www.example.com/' });

expect(mockNavigate).toHaveBeenNthCalledWith(1, '/sign-in#/?redirect_url=https%3A%2F%2Fwww.example.com%2F');
expect(mockNavigate).toHaveBeenNthCalledWith(2, '/sign-in#/?redirect_url=https%3A%2F%2Fwww.example.com%2F');
});

it('redirects to signUpUrl', async () => {
await clerkForProductionInstance.redirectToSignUp({ redirectUrl: 'https://www.example.com/' });
expect(mockNavigate).toHaveBeenNthCalledWith(1, '/sign-up#/?redirect_url=https%3A%2F%2Fwww.example.com%2F');

await clerkForDevelopmentInstance.redirectToSignUp({ redirectUrl: 'https://www.example.com/' });

expect(mockNavigate).toHaveBeenNthCalledWith(1, '/sign-up#/?redirect_url=https%3A%2F%2Fwww.example.com%2F');
expect(mockNavigate).toHaveBeenNthCalledWith(2, '/sign-up#/?redirect_url=https%3A%2F%2Fwww.example.com%2F');
});

it('redirects to userProfileUrl', async () => {
await clerkForProductionInstance.redirectToUserProfile();
expect(mockNavigate).toHaveBeenNthCalledWith(1, '/user-profile');

await clerkForDevelopmentInstance.redirectToUserProfile();

expect(mockNavigate).toHaveBeenNthCalledWith(1, '/user-profile');
expect(mockNavigate).toHaveBeenNthCalledWith(2, '/user-profile');
});

it('redirects to afterSignUp', async () => {
await clerkForProductionInstance.redirectToAfterSignUp();
expect(mockNavigate).toHaveBeenNthCalledWith(1, '/');

await clerkForDevelopmentInstance.redirectToAfterSignUp();

expect(mockNavigate).toHaveBeenNthCalledWith(1, '/');
expect(mockNavigate).toHaveBeenNthCalledWith(2, '/');
});

it('redirects to afterSignIn', async () => {
await clerkForProductionInstance.redirectToAfterSignIn();
expect(mockNavigate).toHaveBeenNthCalledWith(1, '/');

await clerkForDevelopmentInstance.redirectToAfterSignIn();

expect(mockNavigate).toHaveBeenNthCalledWith(1, '/');
expect(mockNavigate).toHaveBeenNthCalledWith(2, '/');
});

it('redirects to create organization', async () => {
await clerkForProductionInstance.redirectToCreateOrganization();
expect(mockNavigate).toHaveBeenNthCalledWith(1, '/create-organization');

await clerkForDevelopmentInstance.redirectToCreateOrganization();

expect(mockNavigate).toHaveBeenNthCalledWith(1, '/create-organization');
expect(mockNavigate).toHaveBeenNthCalledWith(2, '/create-organization');
});

it('redirects to organization profile', async () => {
await clerkForProductionInstance.redirectToOrganizationProfile();
expect(mockNavigate).toHaveBeenNthCalledWith(1, '/organization-profile');

await clerkForDevelopmentInstance.redirectToOrganizationProfile();

expect(mockNavigate).toHaveBeenNthCalledWith(1, '/organization-profile');
expect(mockNavigate).toHaveBeenNthCalledWith(2, '/organization-profile');
});
});
Expand All @@ -188,87 +183,71 @@ describe('Clerk singleton - Redirects', () => {
beforeEach(async () => {
mockEnvironmentFetch.mockReturnValue(
Promise.resolve({
authConfig: { urlBasedSessionSyncing: true } as AuthConfig,
userSettings: mockUserSettings,
displayConfig: mockDisplayConfigWithDifferentOrigin,
isProduction: () => false,
isDevelopmentOrStaging: () => true,
}),
);

mockUsesUrlBasedSessionSync.mockReturnValue(true);

clerkForProductionInstance = new Clerk(productionPublishableKey);
await clerkForProductionInstance.load({
routerPush: mockNavigate,
});

clerkForDevelopmentInstance = new Clerk(developmentPublishableKey);
await clerkForDevelopmentInstance.load({
routerPush: mockNavigate,
});

await clerkForProductionInstance.load(mockedLoadOptions);
await clerkForDevelopmentInstance.load(mockedLoadOptions);
});

afterEach(() => {
mockEnvironmentFetch.mockRestore();
});

const host = 'http://another-test.host';

it('redirects to signInUrl', async () => {
await clerkForProductionInstance.redirectToSignIn({ redirectUrl: 'https://www.example.com/' });
expect(mockHref).toHaveBeenNthCalledWith(
1,
'http://another-test.host/sign-in#/?redirect_url=https%3A%2F%2Fwww.example.com%2F',
);

await clerkForDevelopmentInstance.redirectToSignIn({ redirectUrl: 'https://www.example.com/' });

expect(mockHref).toHaveBeenNthCalledWith(1, `${host}/sign-in#/?redirect_url=https%3A%2F%2Fwww.example.com%2F`);

expect(mockHref).toHaveBeenNthCalledWith(
2,
'http://another-test.host/sign-in#/?redirect_url=https%3A%2F%2Fwww.example.com%2F__clerk_db_jwt[deadbeef]',
`${host}/sign-in?__clerk_db_jwt=deadbeef#/?redirect_url=https%3A%2F%2Fwww.example.com%2F`,
);
});

it('redirects to signUpUrl', async () => {
await clerkForProductionInstance.redirectToSignUp({ redirectUrl: 'https://www.example.com/' });
expect(mockHref).toHaveBeenNthCalledWith(
1,
'http://another-test.host/sign-up#/?redirect_url=https%3A%2F%2Fwww.example.com%2F',
);

await clerkForDevelopmentInstance.redirectToSignUp({ redirectUrl: 'https://www.example.com/' });

expect(mockHref).toHaveBeenNthCalledWith(1, `${host}/sign-up#/?redirect_url=https%3A%2F%2Fwww.example.com%2F`);
expect(mockHref).toHaveBeenNthCalledWith(
2,
'http://another-test.host/sign-up#/?redirect_url=https%3A%2F%2Fwww.example.com%2F__clerk_db_jwt[deadbeef]',
`${host}/sign-up?__clerk_db_jwt=deadbeef#/?redirect_url=https%3A%2F%2Fwww.example.com%2F`,
);
});

it('redirects to userProfileUrl', async () => {
await clerkForProductionInstance.redirectToUserProfile();
expect(mockHref).toHaveBeenNthCalledWith(1, 'http://another-test.host/user-profile');

await clerkForDevelopmentInstance.redirectToUserProfile();
expect(mockHref).toHaveBeenNthCalledWith(2, 'http://another-test.host/user-profile#__clerk_db_jwt[deadbeef]');

expect(mockHref).toHaveBeenNthCalledWith(1, `${host}/user-profile`);
expect(mockHref).toHaveBeenNthCalledWith(2, `${host}/user-profile?__clerk_db_jwt=deadbeef`);
});

it('redirects to create organization', async () => {
await clerkForProductionInstance.redirectToCreateOrganization();
expect(mockHref).toHaveBeenNthCalledWith(1, 'http://another-test.host/create-organization');

await clerkForDevelopmentInstance.redirectToCreateOrganization();
expect(mockHref).toHaveBeenNthCalledWith(
2,
'http://another-test.host/create-organization#__clerk_db_jwt[deadbeef]',
);

expect(mockHref).toHaveBeenNthCalledWith(1, `${host}/create-organization`);
expect(mockHref).toHaveBeenNthCalledWith(2, `${host}/create-organization?__clerk_db_jwt=deadbeef`);
});

it('redirects to organization profile', async () => {
await clerkForProductionInstance.redirectToOrganizationProfile();
expect(mockHref).toHaveBeenNthCalledWith(1, 'http://another-test.host/organization-profile');

await clerkForDevelopmentInstance.redirectToOrganizationProfile();
expect(mockHref).toHaveBeenNthCalledWith(
2,
'http://another-test.host/organization-profile#__clerk_db_jwt[deadbeef]',
);

expect(mockHref).toHaveBeenNthCalledWith(1, `${host}/organization-profile`);
expect(mockHref).toHaveBeenNthCalledWith(2, `${host}/organization-profile?__clerk_db_jwt=deadbeef`);
});
});
});
Expand All @@ -278,10 +257,8 @@ describe('Clerk singleton - Redirects', () => {
let clerkForDevelopmentInstance: Clerk;

beforeEach(async () => {
mockUsesUrlBasedSessionSync.mockReturnValue(true);
mockEnvironmentFetch.mockReturnValue(
Promise.resolve({
authConfig: { urlBasedSessionSyncing: true } as AuthConfig,
userSettings: mockUserSettings,
displayConfig: mockDisplayConfigWithDifferentOrigin,
isProduction: () => false,
Expand All @@ -290,22 +267,20 @@ describe('Clerk singleton - Redirects', () => {
);

clerkForProductionInstance = new Clerk(productionPublishableKey);
await clerkForProductionInstance.load({
routerPush: mockNavigate,
});

clerkForDevelopmentInstance = new Clerk(developmentPublishableKey);
await clerkForDevelopmentInstance.load({
routerPush: mockNavigate,
});

await clerkForProductionInstance.load(mockedLoadOptions);
await clerkForDevelopmentInstance.load(mockedLoadOptions);
});

const host = 'https://app.example.com';

it('redirects to the provided url with __clerk_db_jwt in the url', async () => {
await clerkForProductionInstance.redirectWithAuth('https://app.example.com');
expect(mockHref).toHaveBeenNthCalledWith(1, 'https://app.example.com/');
await clerkForProductionInstance.redirectWithAuth(host);
await clerkForDevelopmentInstance.redirectWithAuth(host);

await clerkForDevelopmentInstance.redirectWithAuth('https://app.example.com');
expect(mockHref).toHaveBeenNthCalledWith(2, 'https://app.example.com/#__clerk_db_jwt[deadbeef]');
expect(mockHref).toHaveBeenNthCalledWith(1, `${host}/`);
expect(mockHref).toHaveBeenNthCalledWith(2, `${host}/?__clerk_db_jwt=deadbeef`);
});
});
});
Loading