Skip to content

Commit f325da5

Browse files
nikosdouvlisnikosdouvlis
authored
Use clerk/backend in clerk/remix [JS-47] (#659)
* feat(remix)!: Make /experimental the default implementation * feat(remix): Support CLERK_SECRET_KEY key
1 parent c54ada0 commit f325da5

37 files changed

+108
-748
lines changed

‎packages/remix/experimental/api.server.d.ts

-1
This file was deleted.

‎packages/remix/experimental/api.server.js

-1
This file was deleted.

‎packages/remix/experimental/index.d.ts

-1
This file was deleted.

‎packages/remix/experimental/index.js

-1
This file was deleted.

‎packages/remix/experimental/ssr.server.d.ts

-1
This file was deleted.

‎packages/remix/experimental/ssr.server.js

-1
This file was deleted.

‎packages/remix/package.json

-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@
1919
"typings": "dist/index.d.ts",
2020
"files": [
2121
"dist",
22-
"experimental",
2322
"api.server.d.ts",
2423
"api.server.js",
2524
"ssr.server.d.ts",

‎packages/remix/src/api/index.ts

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
if (!process.env.CLERK_API_KEY && !process.env.CLERK_SECRET_KEY) {
2-
throw Error(
3-
'The CLERK_API_KEY or CLERK_SECRET_KEY environment variable must be set to use imports from @clerk/remix/api.',
4-
);
5-
}
1+
import { Clerk } from '@clerk/backend';
62

7-
export * from '@clerk/clerk-sdk-node';
3+
const createClerkClient = Clerk;
4+
5+
export { createClerkClient };
6+
7+
export * from '@clerk/backend';

‎packages/remix/src/client/ClerkCatchBoundary.tsx

+3-11
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { LIB_VERSION } from '@clerk/clerk-react/dist/info';
21
import { useCatch } from '@remix-run/react';
32
import React from 'react';
43

@@ -7,17 +6,10 @@ import { Interstitial } from './Interstitial';
76
export function ClerkCatchBoundary(RootCatchBoundary?: () => JSX.Element) {
87
return () => {
98
const { data } = useCatch();
10-
const { __clerk_ssr_interstitial, __frontendApi, __lastAuthResult } =
11-
data?.clerkState?.__internal_clerk_state || {};
9+
const { __clerk_ssr_interstitial_html } = data?.clerkState?.__internal_clerk_state || {};
1210

13-
if (__clerk_ssr_interstitial) {
14-
return (
15-
<Interstitial
16-
frontendApi={__frontendApi}
17-
version={LIB_VERSION}
18-
debugData={{ __lastAuthResult }}
19-
/>
20-
);
11+
if (__clerk_ssr_interstitial_html) {
12+
return <Interstitial html={__clerk_ssr_interstitial_html} />;
2113
}
2214

2315
if (!RootCatchBoundary) {

‎packages/remix/src/client/Interstitial.tsx

+2-75
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,5 @@
11
import React from 'react';
22

3-
function isStaging(frontendApi: string): boolean {
4-
return (
5-
frontendApi.endsWith('.lclstage.dev') ||
6-
frontendApi.endsWith('.stgstage.dev') ||
7-
frontendApi.endsWith('.clerkstage.dev')
8-
);
9-
}
10-
11-
const getScriptUrl = (frontendApi: string, libVersion: string) => {
12-
const major = libVersion.includes('alpha') ? 'next' : isStaging(frontendApi) ? 'staging' : libVersion.split('.')[0];
13-
return `https://${frontendApi}/npm/@clerk/clerk-js@${major}/dist/clerk.browser.js`;
14-
};
15-
16-
const createInterstitialHTMLString = (frontendApi: string, libVersion: string, debugData: any) => {
17-
return `
18-
<head>
19-
<meta charset="UTF-8" />
20-
</head>
21-
<body>
22-
<script>
23-
window.__clerk_debug = ${JSON.stringify(debugData || {})};
24-
window.startClerk = async () => {
25-
function formRedirect(){
26-
const form = '<form method="get" action="" name="redirect"></form>';
27-
document.body.innerHTML = document.body.innerHTML + form;
28-
29-
const searchParams = new URLSearchParams(window.location.search);
30-
for (let paramTuple of searchParams) {
31-
const input = document.createElement("input");
32-
input.type = "hidden";
33-
input.name = paramTuple[0];
34-
input.value = paramTuple[1];
35-
document.forms.redirect.appendChild(input);
36-
}
37-
const url = new URL(window.location.origin + window.location.pathname + window.location.hash);
38-
window.history.pushState({}, '', url);
39-
40-
document.forms.redirect.action = window.location.pathname + window.location.hash;
41-
document.forms.redirect.submit();
42-
}
43-
44-
const Clerk = window.Clerk;
45-
try {
46-
await Clerk.load();
47-
if(window.location.href.indexOf("#") === -1){
48-
window.location.href = window.location.href;
49-
} else if (window.navigator.userAgent.toLowerCase().includes("firefox/")){
50-
formRedirect();
51-
} else {
52-
window.location.reload();
53-
}
54-
} catch (err) {
55-
console.error('Clerk: ', err);
56-
}
57-
};
58-
(() => {
59-
const script = document.createElement('script');
60-
script.setAttribute('data-clerk-frontend-api', '${frontendApi}');
61-
script.async = true;
62-
script.src = '${getScriptUrl(frontendApi, libVersion)}';
63-
script.crossOrigin = 'anonymous';
64-
script.addEventListener('load', startClerk);
65-
document.body.appendChild(script);
66-
})();
67-
</script>
68-
</body>
69-
`;
70-
};
71-
72-
export function Interstitial(opts: { frontendApi: string; version: string; debugData: any }) {
73-
return (
74-
<html
75-
dangerouslySetInnerHTML={{ __html: createInterstitialHTMLString(opts.frontendApi, opts.version, opts.debugData) }}
76-
/>
77-
);
3+
export function Interstitial({ html }: { html: string }) {
4+
return <html dangerouslySetInnerHTML={{ __html: html }} />;
785
}

‎packages/remix/src/client/RemixClerkProvider.tsx

+2-5
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,10 @@ import { ClerkProvider as ReactClerkProvider } from '@clerk/clerk-react';
22
import { IsomorphicClerkOptions } from '@clerk/clerk-react/dist/types';
33
import React from 'react';
44

5-
import { __internal__setErrorThrowerOptions } from '../errorThrower';
65
import { assertValidClerkState, warnForSsr } from '../utils';
76
import { ClerkState } from './types';
87
import { useAwaitableNavigate } from './useAwaitableNavigate';
98

10-
__internal__setErrorThrowerOptions({ packageName: '@clerk/remix' });
11-
129
export * from '@clerk/clerk-react';
1310

1411
export type RemixClerkProviderProps = {
@@ -22,14 +19,14 @@ export function ClerkProvider({ children, ...rest }: RemixClerkProviderProps): J
2219
ReactClerkProvider.displayName = 'ReactClerkProvider';
2320

2421
assertValidClerkState(clerkState);
25-
const { __clerk_ssr_state, __lastAuthResult } = clerkState?.__internal_clerk_state || {};
22+
const { __clerk_ssr_state, __clerk_debug } = clerkState?.__internal_clerk_state || {};
2623

2724
React.useEffect(() => {
2825
warnForSsr(clerkState);
2926
}, []);
3027

3128
React.useEffect(() => {
32-
(window as any).__clerk_debug = { __lastAuthResult };
29+
(window as any).__clerk_debug = __clerk_debug;
3330
}, []);
3431

3532
return (

‎packages/remix/src/client/types.ts

+1-2
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@ export type ClerkState = {
66
__clerk_ssr_interstitial: string;
77
__clerk_ssr_state: InitialState;
88
__frontendApi: string;
9-
__publishableKey: string;
10-
__lastAuthResult: string;
9+
__clerk_debug: any;
1110
};
1211
};
1312

‎packages/remix/src/errors.ts

+8-4
Original file line numberDiff line numberDiff line change
@@ -38,12 +38,12 @@ Looks like you didn't pass 'clerkState' to "<ClerkProvider clerkState={...}>".
3838
${ssrExample}
3939
`);
4040

41-
export const noRequestPassedInGetAuth = createErrorMessage(`
42-
You're calling 'getAuth()' from a loader, without providing the 'request' object.
41+
export const noLoaderArgsPassedInGetAuth = createErrorMessage(`
42+
You're calling 'getAuth()' from a loader, without providing the loader args object.
4343
Example:
4444
45-
export const loader: LoaderFunction = async ({request}) => {
46-
const { sessionId } = await getAuth(request);
45+
export const loader: LoaderFunction = async (args) => {
46+
const { sessionId } = await getAuth(args);
4747
...
4848
};
4949
`);
@@ -65,3 +65,7 @@ export const loader: LoaderFunction = args => rootAuthLoader(args, ({ auth }) =>
6565
return { data: posts };
6666
})
6767
`);
68+
69+
export const noApiKeyError = createErrorMessage(`
70+
The CLERK_API_KEY environment variable must be set to use SSR and @clerk/remix/api.');
71+
`);

‎packages/remix/src/experimental/api/index.ts

-7
This file was deleted.

‎packages/remix/src/experimental/client/ClerkApp.tsx

-21
This file was deleted.

‎packages/remix/src/experimental/client/ClerkCatchBoundary.tsx

-21
This file was deleted.

‎packages/remix/src/experimental/client/Interstitial.tsx

-5
This file was deleted.

‎packages/remix/src/experimental/client/RemixClerkProvider.tsx

-41
This file was deleted.

‎packages/remix/src/experimental/client/index.ts

-4
This file was deleted.

‎packages/remix/src/experimental/client/types.ts

-16
This file was deleted.

‎packages/remix/src/experimental/client/useAwaitableNavigate.tsx

-29
This file was deleted.

0 commit comments

Comments
 (0)