Skip to content
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

Jump to bottom

feat(clerk-js): Send FAPI version through URLSearchParams #4457

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
+34 −17
Open

feat(clerk-js): Send FAPI version through URLSearchParams #4457

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f577cb8
feat(clerk-js): send FAPI version through URLSearchParams
jacekradko Nov 1, 2024
b9b7184
changeset
jacekradko Nov 1, 2024
82d0dfe
Merge branch 'main' into feat/send-api-version
jacekradko Nov 2, 2024
93fe983
Merge branch 'main' into feat/send-api-version
jacekradko Nov 2, 2024
687aa1d
Merge branch 'main' into feat/send-api-version
jacekradko Nov 2, 2024
0f9ab2e
Update packages/clerk-js/src/core/__tests__/fapiClient.test.ts
jacekradko Nov 2, 2024
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/wild-guests-battle.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@clerk/clerk-js': minor
---

Now sending the Frontend API version through query string params
25 changes: 15 additions & 10 deletions packages/clerk-js/src/core/__tests__/fapiClient.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import type { Clerk } from '@clerk/types';

import { SUPPORTED_FAPI_VERSION } from '../constants';
import { createFapiClient } from '../fapiClient';

const mockedClerkInstance = {
Expand Down Expand Up @@ -73,38 +74,40 @@ afterAll(() => {
describe('buildUrl(options)', () => {
it('returns the full frontend API URL', () => {
expect(fapiClient.buildUrl({ path: '/foo' }).href).toBe(
'https://clerk.example.com/v1/foo?_clerk_js_version=42.0.0',
`https://clerk.example.com/v1/foo?__clerk_api_version=${SUPPORTED_FAPI_VERSION}&_clerk_js_version=42.0.0`,
);
});

it('returns the full frontend API URL using proxy url', () => {
expect(fapiClientWithProxy.buildUrl({ path: '/foo' }).href).toBe(`${proxyUrl}/v1/foo?_clerk_js_version=42.0.0`);
expect(fapiClientWithProxy.buildUrl({ path: '/foo' }).href).toBe(
`${proxyUrl}/v1/foo?__clerk_api_version=${SUPPORTED_FAPI_VERSION}&_clerk_js_version=42.0.0`,
);
});

it('adds _clerk_session_id as a query parameter if provided and path does not start with client', () => {
expect(fapiClient.buildUrl({ path: '/foo', sessionId: 'sess_42' }).href).toBe(
'https://clerk.example.com/v1/foo?_clerk_js_version=42.0.0&_clerk_session_id=sess_42',
`https://clerk.example.com/v1/foo?__clerk_api_version=${SUPPORTED_FAPI_VERSION}&_clerk_js_version=42.0.0&_clerk_session_id=sess_42`,
);
expect(fapiClient.buildUrl({ path: '/client/foo', sessionId: 'sess_42' }).href).toBe(
'https://clerk.example.com/v1/client/foo?_clerk_js_version=42.0.0',
`https://clerk.example.com/v1/client/foo?__clerk_api_version=${SUPPORTED_FAPI_VERSION}&_clerk_js_version=42.0.0`,
);
});

it('parses search params is an object with string values', () => {
expect(fapiClient.buildUrl({ path: '/foo', search: { test: '1' } }).href).toBe(
'https://clerk.example.com/v1/foo?test=1&_clerk_js_version=42.0.0',
`https://clerk.example.com/v1/foo?test=1&__clerk_api_version=${SUPPORTED_FAPI_VERSION}&_clerk_js_version=42.0.0`,
);
});

it('parses string search params ', () => {
expect(fapiClient.buildUrl({ path: '/foo', search: 'test=2' }).href).toBe(
'https://clerk.example.com/v1/foo?test=2&_clerk_js_version=42.0.0',
`https://clerk.example.com/v1/foo?test=2&__clerk_api_version=${SUPPORTED_FAPI_VERSION}&_clerk_js_version=42.0.0`,
);
});

it('parses search params when value contains invalid url symbols', () => {
expect(fapiClient.buildUrl({ path: '/foo', search: { bar: 'test=2' } }).href).toBe(
'https://clerk.example.com/v1/foo?bar=test%3D2&_clerk_js_version=42.0.0',
`https://clerk.example.com/v1/foo?bar=test%3D2&__clerk_api_version=${SUPPORTED_FAPI_VERSION}&_clerk_js_version=42.0.0`,
);
});

Expand All @@ -116,7 +119,9 @@ describe('buildUrl(options)', () => {
array: ['item1', 'item2'],
},
}).href,
).toBe('https://clerk.example.com/v1/foo?array=item1&array=item2&_clerk_js_version=42.0.0');
).toBe(
`https://clerk.example.com/v1/foo?array=item1&array=item2&__clerk_api_version=${SUPPORTED_FAPI_VERSION}&_clerk_js_version=42.0.0`,
);
});

// The return value isn't as expected.
Expand Down Expand Up @@ -152,7 +157,7 @@ describe('request', () => {
});

expect(fetch).toHaveBeenCalledWith(
'https://clerk.example.com/v1/foo?_clerk_js_version=42.0.0&_clerk_session_id=deadbeef',
`https://clerk.example.com/v1/foo?__clerk_api_version=${SUPPORTED_FAPI_VERSION}&_clerk_js_version=42.0.0&_clerk_session_id=deadbeef`,
expect.objectContaining({
credentials: 'include',
method: 'GET',
Expand All @@ -167,7 +172,7 @@ describe('request', () => {
});

expect(fetch).toHaveBeenCalledWith(
`${proxyUrl}/v1/foo?_clerk_js_version=42.0.0&_clerk_session_id=deadbeef`,
`${proxyUrl}/v1/foo?__clerk_api_version=${SUPPORTED_FAPI_VERSION}&_clerk_js_version=42.0.0&_clerk_session_id=deadbeef`,
expect.objectContaining({
credentials: 'include',
method: 'GET',
Expand Down
3 changes: 3 additions & 0 deletions packages/clerk-js/src/core/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,3 +37,6 @@ export const SIGN_UP_MODES: Record<string, SignUpModes> = {
PUBLIC: 'public',
RESTRICTED: 'restricted',
};

// This is the currently support version of the Frontend API
export const SUPPORTED_FAPI_VERSION = '2024-10-01';
Copy link
Member

Choose a reason for hiding this comment

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

I'm curious about FAPI versioning and keeping types in sync. The types package version and which FAPI version they represent.

4 changes: 4 additions & 0 deletions packages/clerk-js/src/core/fapiClient.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { runWithExponentialBackOff } from '@clerk/shared/utils';
import type { Clerk, ClerkAPIErrorJSON, ClientJSON } from '@clerk/types';

import { buildEmailAddress as buildEmailAddressUtil, buildURL as buildUrlUtil, stringifyQueryParams } from '../utils';
import { SUPPORTED_FAPI_VERSION } from './constants';
import { clerkNetworkError } from './errors';

export type HTTPMethod = 'CONNECT' | 'DELETE' | 'GET' | 'HEAD' | 'OPTIONS' | 'PATCH' | 'POST' | 'PUT' | 'TRACE';
Expand Down Expand Up @@ -93,6 +94,9 @@ export function createFapiClient(clerkInstance: Clerk): FapiClient {
const searchParams = new URLSearchParams(search as any);
// the above will parse {key: ['val1','val2']} as key: 'val1,val2' and we need to recreate the array bellow

// Append supported FAPI version to the query string
searchParams.append('__clerk_api_version', SUPPORTED_FAPI_VERSION);
Copy link
Member

Choose a reason for hiding this comment

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

The one for clerk js version only has one underscore as a prefix, is there a reason we break out of the existing pattern ?

Copy link
Member Author

Choose a reason for hiding this comment

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

Great question. Following the docs here: https://clerk.com/docs/backend-requests/versioning/overview#choosing-an-api-version . I can confirm with the API team that the double underscore is expected


if (clerkInstance.version) {
searchParams.append('_clerk_js_version', clerkInstance.version);
}
Expand Down
14 changes: 7 additions & 7 deletions packages/clerk-js/src/core/resources/__tests__/Token.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { SUPPORTED_FAPI_VERSION } from '../../constants';
import { createFapiClient } from '../../fapiClient';
import { mockDevClerkInstance, mockFetch, mockNetworkFailedFetch } from '../../test/fixtures';
import { BaseResource } from '../internal';
Expand All @@ -20,7 +21,7 @@ describe('Token', () => {
});

expect(global.fetch).toHaveBeenCalledWith(
'https://clerk.example.com/v1/path/to/tokens?_clerk_js_version=test-0.0.0',
`https://clerk.example.com/v1/path/to/tokens?__clerk_api_version=${SUPPORTED_FAPI_VERSION}&_clerk_js_version=test-0.0.0`,
// TODO(dimkl): omit extra params from fetch request (eg path, url) - remove expect.objectContaining
expect.objectContaining({
method: 'POST',
Expand Down Expand Up @@ -57,7 +58,7 @@ describe('Token', () => {
const token = await Token.create('/path/to/tokens');

expect(global.fetch).toHaveBeenCalledWith(
'https://clerk.example.com/v1/path/to/tokens?_clerk_js_version=test-0.0.0',
`https://clerk.example.com/v1/path/to/tokens?__clerk_api_version=${SUPPORTED_FAPI_VERSION}&_clerk_js_version=test-0.0.0`,
// TODO(dimkl): omit extra params from fetch request (eg path, url) - remove expect.objectContaining
expect.objectContaining({
method: 'POST',
Expand All @@ -77,13 +78,12 @@ describe('Token', () => {
mockNetworkFailedFetch();
BaseResource.clerk = { getFapiClient: () => createFapiClient(mockDevClerkInstance) } as any;

await expect(Token.create('/path/to/tokens')).rejects.toMatchObject({
message:
'ClerkJS: Network error at "https://clerk.example.com/v1/path/to/tokens?_clerk_js_version=test-0.0.0" - TypeError: Failed to fetch. Please try again.',
});
await expect(Token.create('/path/to/tokens')).rejects.toThrow(
`ClerkJS: Network error at "https://clerk.example.com/v1/path/to/tokens?__clerk_api_version=${SUPPORTED_FAPI_VERSION}&_clerk_js_version=test-0.0.0" - TypeError: Failed to fetch. Please try again.`,
);

expect(global.fetch).toHaveBeenCalledWith(
'https://clerk.example.com/v1/path/to/tokens?_clerk_js_version=test-0.0.0',
`https://clerk.example.com/v1/path/to/tokens?__clerk_api_version=${SUPPORTED_FAPI_VERSION}&_clerk_js_version=test-0.0.0`,
// TODO(dimkl): omit extra params from fetch request (eg path, url) - remove expect.objectContaining
expect.objectContaining({
method: 'POST',
Expand Down
Loading