From 642a81134d2e5adf3ac8e00508ca070bb30e8882 Mon Sep 17 00:00:00 2001 From: panteliselef Date: Mon, 1 Jul 2024 14:47:34 +0300 Subject: [PATCH 01/13] feat(astro): Introduce Astro SDK --- .../control/ClerkLayout.astro | 7 +++ .../interactive/OrganizationProfile.astro | 3 + .../interactive/OrganizationSwitcher.astro | 3 + .../astro-components/interactive/SignIn.astro | 7 +++ .../astro-components/interactive/SignUp.astro | 7 +++ .../interactive/UserButton.astro | 7 +++ .../interactive/UserProfile.astro | 7 +++ .../react/OrganizationList.astro | 4 ++ .../react/OrganizationProfile.astro | 4 ++ .../react/OrganizationSwitcher.astro | 4 ++ .../src/astro-components/react/Protect.astro | 4 ++ .../src/astro-components/react/SignIn.astro | 4 ++ .../src/astro-components/react/SignUp.astro | 4 ++ .../src/astro-components/react/SignedIn.astro | 4 ++ .../astro-components/react/UserButton.astro | 4 ++ .../astro-components/react/UserProfile.astro | 4 ++ packages/astro/src/client/hotload.ts | 58 +++++++++++++++++++ packages/astro/src/client/index.ts | 34 +++++++++++ .../client/mount-clerk-astro-js-components.ts | 3 + packages/astro/src/client/react/hooks.ts | 4 ++ packages/astro/src/client/run-once.ts | 4 ++ packages/astro/src/hotload.ts | 1 + .../src/integration/create-integration.ts | 19 ++++++ packages/astro/src/integration/hotload.ts | 5 ++ packages/astro/src/integration/index.ts | 4 ++ packages/astro/src/internal/hotload.ts | 13 +++++ .../internal/merge-env-vars-with-params.ts | 3 + .../src/internal/utils/loadClerkJSScript.ts | 3 + .../src/internal/utils/versionSelector.ts | 7 +++ packages/astro/src/server/clerk-middleware.ts | 51 ++++++++++++++++ packages/astro/src/server/get-auth.ts | 10 ++++ packages/astro/src/server/route-matcher.ts | 10 ++++ .../src/server/server-redirect-with-auth.ts | 3 + packages/astro/src/stores/external.ts | 15 +++++ packages/astro/src/stores/index.ts | 2 + packages/astro/src/stores/internal.ts | 20 +++++++ packages/astro/src/v0/clerkClient.ts | 20 +++++++ packages/astro/src/v0/constants.ts | 55 ++++++++++++++++++ packages/astro/src/v0/index.ts | 2 + packages/astro/v0/package.json | 3 + 40 files changed, 426 insertions(+) create mode 100644 packages/astro/src/astro-components/control/ClerkLayout.astro create mode 100644 packages/astro/src/client/hotload.ts create mode 100644 packages/astro/src/hotload.ts create mode 100644 packages/astro/src/integration/hotload.ts create mode 100644 packages/astro/src/internal/hotload.ts create mode 100644 packages/astro/src/stores/index.ts create mode 100644 packages/astro/src/v0/clerkClient.ts create mode 100644 packages/astro/src/v0/constants.ts create mode 100644 packages/astro/src/v0/index.ts create mode 100644 packages/astro/v0/package.json diff --git a/packages/astro/src/astro-components/control/ClerkLayout.astro b/packages/astro/src/astro-components/control/ClerkLayout.astro new file mode 100644 index 00000000000..c4f4795eced --- /dev/null +++ b/packages/astro/src/astro-components/control/ClerkLayout.astro @@ -0,0 +1,7 @@ +--- +interface Props { + protectedPage?: boolean; +} + +--- + diff --git a/packages/astro/src/astro-components/interactive/OrganizationProfile.astro b/packages/astro/src/astro-components/interactive/OrganizationProfile.astro index 14d6d26a9c1..1a1371ed031 100644 --- a/packages/astro/src/astro-components/interactive/OrganizationProfile.astro +++ b/packages/astro/src/astro-components/interactive/OrganizationProfile.astro @@ -14,11 +14,14 @@ const props = {
+======= + +>>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) diff --git a/packages/astro/src/astro-components/interactive/SignUp.astro b/packages/astro/src/astro-components/interactive/SignUp.astro index 80204a3a61c..a8ba78a7502 100644 --- a/packages/astro/src/astro-components/interactive/SignUp.astro +++ b/packages/astro/src/astro-components/interactive/SignUp.astro @@ -14,11 +14,14 @@ const props = {
+======= + +>>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) diff --git a/packages/astro/src/astro-components/interactive/UserButton.astro b/packages/astro/src/astro-components/interactive/UserButton.astro index f8c7643daa4..73f14fa6c83 100644 --- a/packages/astro/src/astro-components/interactive/UserButton.astro +++ b/packages/astro/src/astro-components/interactive/UserButton.astro @@ -10,11 +10,14 @@ const safeId = customAlphabet(urlAlphabet, 10)();
+======= + +>>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) diff --git a/packages/astro/src/astro-components/interactive/UserProfile.astro b/packages/astro/src/astro-components/interactive/UserProfile.astro index 82184d80c99..a74b508fe0b 100644 --- a/packages/astro/src/astro-components/interactive/UserProfile.astro +++ b/packages/astro/src/astro-components/interactive/UserProfile.astro @@ -10,11 +10,14 @@ const safeId = customAlphabet(urlAlphabet, 10)();
+======= + +>>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) diff --git a/packages/astro/src/astro-components/react/OrganizationList.astro b/packages/astro/src/astro-components/react/OrganizationList.astro index d6d0aae2a4d..2a626c07c62 100644 --- a/packages/astro/src/astro-components/react/OrganizationList.astro +++ b/packages/astro/src/astro-components/react/OrganizationList.astro @@ -3,7 +3,11 @@ import type { OrganizationListProps } from "@clerk/types"; type Props = OrganizationListProps import type { AstroBuiltinProps } from 'astro'; +<<<<<<< HEAD import { OrganizationList as OrganizationListReact } from "@clerk/astro/client/react"; +======= +import { OrganizationList as OrganizationListReact } from "astro-clerk-auth/client/react"; +>>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) const props = { ...Astro.props, diff --git a/packages/astro/src/astro-components/react/OrganizationProfile.astro b/packages/astro/src/astro-components/react/OrganizationProfile.astro index 261fa459aa5..75268409c19 100644 --- a/packages/astro/src/astro-components/react/OrganizationProfile.astro +++ b/packages/astro/src/astro-components/react/OrganizationProfile.astro @@ -3,7 +3,11 @@ import type { OrganizationProfileProps } from "@clerk/types"; type Props = OrganizationProfileProps import type { AstroBuiltinProps } from 'astro'; +<<<<<<< HEAD import { OrganizationProfile as OrganizationProfileReact } from "@clerk/astro/client/react"; +======= +import { OrganizationProfile as OrganizationProfileReact } from "astro-clerk-auth/client/react"; +>>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) const props = { ...Astro.props, diff --git a/packages/astro/src/astro-components/react/OrganizationSwitcher.astro b/packages/astro/src/astro-components/react/OrganizationSwitcher.astro index b8efae096e2..207583e2e74 100644 --- a/packages/astro/src/astro-components/react/OrganizationSwitcher.astro +++ b/packages/astro/src/astro-components/react/OrganizationSwitcher.astro @@ -3,7 +3,11 @@ import type { OrganizationSwitcherProps } from "@clerk/types"; type Props = OrganizationSwitcherProps import type { AstroBuiltinProps } from 'astro'; +<<<<<<< HEAD import { OrganizationSwitcher as OrganizationSwitcherReact } from "@clerk/astro/client/react"; +======= +import { OrganizationSwitcher as OrganizationSwitcherReact } from "astro-clerk-auth/client/react"; +>>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) const props = { ...Astro.props, diff --git a/packages/astro/src/astro-components/react/Protect.astro b/packages/astro/src/astro-components/react/Protect.astro index d3e18f7492e..799538ed58a 100644 --- a/packages/astro/src/astro-components/react/Protect.astro +++ b/packages/astro/src/astro-components/react/Protect.astro @@ -1,7 +1,11 @@ --- import type { ProtectComponentDefaultProps } from "../../types"; type Props = ProtectComponentDefaultProps +<<<<<<< HEAD import { Protect as ProtectReact } from "@clerk/astro/client/react"; +======= +import { Protect as ProtectReact } from "astro-clerk-auth/client/react"; +>>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) const props = { ...Astro.props, diff --git a/packages/astro/src/astro-components/react/SignIn.astro b/packages/astro/src/astro-components/react/SignIn.astro index 5fe14ddf570..bf9300eef16 100644 --- a/packages/astro/src/astro-components/react/SignIn.astro +++ b/packages/astro/src/astro-components/react/SignIn.astro @@ -2,7 +2,11 @@ import type { SignInProps } from "@clerk/types"; type Props = SignInProps +<<<<<<< HEAD import { SignIn as SignInReact } from "@clerk/astro/client/react"; +======= +import { SignIn as SignInReact } from "astro-clerk-auth/client/react"; +>>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) const props = { ...Astro.props diff --git a/packages/astro/src/astro-components/react/SignUp.astro b/packages/astro/src/astro-components/react/SignUp.astro index ed7bf2dc67d..07b27f78133 100644 --- a/packages/astro/src/astro-components/react/SignUp.astro +++ b/packages/astro/src/astro-components/react/SignUp.astro @@ -2,7 +2,11 @@ import type { SignUpProps } from "@clerk/types"; type Props = SignUpProps +<<<<<<< HEAD import { SignUp as SignUpReact } from "@clerk/astro/client/react"; +======= +import { SignUp as SignUpReact } from "astro-clerk-auth/client/react"; +>>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) const props = { ...Astro.props diff --git a/packages/astro/src/astro-components/react/SignedIn.astro b/packages/astro/src/astro-components/react/SignedIn.astro index c543dca99ca..cd80f74c259 100644 --- a/packages/astro/src/astro-components/react/SignedIn.astro +++ b/packages/astro/src/astro-components/react/SignedIn.astro @@ -1,5 +1,9 @@ --- +<<<<<<< HEAD import { SignedIn as SignedInReact } from "@clerk/astro/client/react"; +======= +import { SignedIn as SignedInReact } from "astro-clerk-auth/client/react"; +>>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) --- diff --git a/packages/astro/src/astro-components/react/UserButton.astro b/packages/astro/src/astro-components/react/UserButton.astro index 0deff393bd7..26e34608b9b 100644 --- a/packages/astro/src/astro-components/react/UserButton.astro +++ b/packages/astro/src/astro-components/react/UserButton.astro @@ -2,7 +2,11 @@ import type { UserButtonProps } from "@clerk/types"; type Props = UserButtonProps +<<<<<<< HEAD import { UserButton as UserButtonReact } from "@clerk/astro/client/react"; +======= +import { UserButton as UserButtonReact } from "astro-clerk-auth/client/react"; +>>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) const props = { ...Astro.props, diff --git a/packages/astro/src/astro-components/react/UserProfile.astro b/packages/astro/src/astro-components/react/UserProfile.astro index a836ed34d69..1f3583b40c9 100644 --- a/packages/astro/src/astro-components/react/UserProfile.astro +++ b/packages/astro/src/astro-components/react/UserProfile.astro @@ -3,7 +3,11 @@ import type { UserProfileProps } from "@clerk/types"; type Props = UserProfileProps import type { AstroBuiltinProps } from 'astro'; +<<<<<<< HEAD import { UserProfile as UserProfileReact } from "@clerk/astro/client/react"; +======= +import { UserProfile as UserProfileReact } from "astro-clerk-auth/client/react"; +>>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) const props = { ...Astro.props, diff --git a/packages/astro/src/client/hotload.ts b/packages/astro/src/client/hotload.ts new file mode 100644 index 00000000000..57b8b853a63 --- /dev/null +++ b/packages/astro/src/client/hotload.ts @@ -0,0 +1,58 @@ +import { waitForClerkScript } from '../internal/utils/loadClerkJSScript'; +import { $clerk, $csrState } from '../stores/internal'; +import type { AstroClerkIntegrationParams, AstroClerkUpdateOptions } from '../types'; +import { mountAllClerkAstroJSComponents } from './mount-clerk-astro-js-components'; +import { runOnce } from './run-once'; + +let initOptions: AstroClerkIntegrationParams | undefined; + +/** + * Prevents firing clerk.load multiple times + */ +export const createClerkInstance = runOnce(createClerkInstanceInternal); + +export async function createClerkInstanceInternal(options?: AstroClerkIntegrationParams) { + let clerkJSInstance = window.Clerk; + if (!clerkJSInstance) { + await waitForClerkScript(); + + if (!window.Clerk) { + throw new Error('Failed to download latest ClerkJS. Contact support@clerk.com.'); + } + clerkJSInstance = window.Clerk; + } + + if (!$clerk.get()) { + $clerk.set(clerkJSInstance); + } + + initOptions = options; + // TODO: Update Clerk type from @clerk/types to include this method + return (clerkJSInstance as any) + .load(options) + .then(() => { + $csrState.setKey('isLoaded', true); + + mountAllClerkAstroJSComponents(); + + clerkJSInstance.addListener(payload => { + $csrState.setKey('client', payload.client); + $csrState.setKey('user', payload.user); + $csrState.setKey('session', payload.session); + $csrState.setKey('organization', payload.organization); + }); + }) + .catch(() => {}); +} + +export function updateClerkOptions(options: AstroClerkUpdateOptions) { + const clerk = $clerk.get(); + if (!clerk) { + throw new Error('Missing clerk instance'); + } + // TODO: Update Clerk type from @clerk/types to include this method + void (clerk as any).__unstable__updateProps({ + options: { ...initOptions, ...options }, + appearance: { ...initOptions?.appearance, ...options.appearance }, + }); +} diff --git a/packages/astro/src/client/index.ts b/packages/astro/src/client/index.ts index ffe5b8c612b..4a0dff6f8c3 100644 --- a/packages/astro/src/client/index.ts +++ b/packages/astro/src/client/index.ts @@ -1,3 +1,4 @@ +<<<<<<< HEAD import { waitForClerkScript } from '../internal/utils/loadClerkJSScript'; import { $clerk, $csrState } from '../stores/internal'; import type { AstroClerkIntegrationParams, AstroClerkUpdateOptions } from '../types'; @@ -5,10 +6,22 @@ import { mountAllClerkAstroJSComponents } from './mount-clerk-astro-js-component import { runOnce } from './run-once'; let initOptions: AstroClerkIntegrationParams | undefined; +======= +import { Clerk } from '@clerk/clerk-js'; + +import { $clerk, $csrState } from '../stores/internal'; +import type { AstroClerkCreateInstanceParams, AstroClerkUpdateOptions } from '../types'; +import { mountAllClerkAstroJSComponents } from './mount-clerk-astro-js-components'; +import { runOnce } from './run-once'; +import type { CreateClerkInstanceInternalFn } from './types'; + +let initOptions: AstroClerkCreateInstanceParams | undefined; +>>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) /** * Prevents firing clerk.load multiple times */ +<<<<<<< HEAD export const createClerkInstance = runOnce(createClerkInstanceInternal); export async function createClerkInstanceInternal(options?: AstroClerkIntegrationParams) { @@ -30,6 +43,22 @@ export async function createClerkInstanceInternal(options?: AstroClerkIntegratio initOptions = options; // TODO: Update Clerk type from @clerk/types to include this method return (clerkJSInstance as any) +======= +export const createClerkInstance: CreateClerkInstanceInternalFn = runOnce(createClerkInstanceInternal); + +export function createClerkInstanceInternal(options?: AstroClerkCreateInstanceParams) { + let clerkJSInstance = window.Clerk as unknown as Clerk; + if (!clerkJSInstance) { + clerkJSInstance = new Clerk(options!.publishableKey); + // @ts-ignore + $clerk.set(clerkJSInstance); + // @ts-ignore + window.Clerk = clerkJSInstance; + } + + initOptions = options; + return clerkJSInstance +>>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) .load(options) .then(() => { $csrState.setKey('isLoaded', true); @@ -51,8 +80,13 @@ export function updateClerkOptions(options: AstroClerkUpdateOptions) { if (!clerk) { throw new Error('Missing clerk instance'); } +<<<<<<< HEAD // TODO: Update Clerk type from @clerk/types to include this method void (clerk as any).__unstable__updateProps({ +======= + //@ts-ignore + clerk.__unstable__updateProps({ +>>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) options: { ...initOptions, ...options }, appearance: { ...initOptions?.appearance, ...options.appearance }, }); diff --git a/packages/astro/src/client/mount-clerk-astro-js-components.ts b/packages/astro/src/client/mount-clerk-astro-js-components.ts index 035bd35ef53..0a401cff90f 100644 --- a/packages/astro/src/client/mount-clerk-astro-js-components.ts +++ b/packages/astro/src/client/mount-clerk-astro-js-components.ts @@ -1,8 +1,11 @@ import { $clerk } from '../stores/internal'; +<<<<<<< HEAD /** * Loop through any Astro component that has requested to mount a UI component and mount it with its respective props. */ +======= +>>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) const mountAllClerkAstroJSComponents = () => { const mountFns = { 'organization-list': 'mountOrganizationList', diff --git a/packages/astro/src/client/react/hooks.ts b/packages/astro/src/client/react/hooks.ts index f7b97e723d7..dc86dd3b6ed 100644 --- a/packages/astro/src/client/react/hooks.ts +++ b/packages/astro/src/client/react/hooks.ts @@ -263,7 +263,11 @@ function useStore>(store: T): SV { return authAsyncStorage.getStore(); } +<<<<<<< HEAD /** +======= + /**a +>>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) * When this runs on the client, during hydration, we want to grab the content the store. */ return get(); diff --git a/packages/astro/src/client/run-once.ts b/packages/astro/src/client/run-once.ts index 11ec81768d3..03e187b8619 100644 --- a/packages/astro/src/client/run-once.ts +++ b/packages/astro/src/client/run-once.ts @@ -24,8 +24,12 @@ const runOnce = (onFirst: CreateClerkInstanceInternalFn) => { }); } /** +<<<<<<< HEAD * Probably html streaming has delayed the component from mounting immediately. * In Astro, js modules will start executing only after html streaming has ended. +======= + * Probably html streaming has delayed the component from mounting immediately +>>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) */ hasRun = true; return onFirst(params); diff --git a/packages/astro/src/hotload.ts b/packages/astro/src/hotload.ts new file mode 100644 index 00000000000..91fef73a055 --- /dev/null +++ b/packages/astro/src/hotload.ts @@ -0,0 +1 @@ +export { default } from './integration/hotload'; diff --git a/packages/astro/src/integration/create-integration.ts b/packages/astro/src/integration/create-integration.ts index 112f354ac94..573ba6d018b 100644 --- a/packages/astro/src/integration/create-integration.ts +++ b/packages/astro/src/integration/create-integration.ts @@ -19,7 +19,11 @@ function createIntegration

({ mode }: ): AstroIntegration => { const { proxyUrl, isSatellite, domain, signInUrl, signUpUrl } = params || {}; +<<<<<<< HEAD // These are not provided when the "bundled" integration is used +======= + // This are not provided when the "bundled" integration is used +>>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) const clerkJSUrl = (params as any)?.clerkJSUrl as string | undefined; const clerkJSVariant = (params as any)?.clerkJSVariant as string | undefined; const clerkJSVersion = (params as any)?.clerkJSVersion as string | undefined; @@ -40,18 +44,28 @@ function createIntegration

({ mode }: logger.error('Invalid value for clerkJSVariant. Acceptable values are `"headless"`, `""`, and `undefined`'); } +<<<<<<< HEAD const defaultBundledImportPath = `${packageName}/internal/bundled`; const buildImportPath = mode === 'bundled' ? defaultBundledImportPath : defaultBundledImportPath.replace('/bundled', ''); +======= + const defaultHotLoadImportPath = `${packageName}/internal/hotload`; + + const buildImportPath = + mode === 'hotload' ? defaultHotLoadImportPath : defaultHotLoadImportPath.replace('/hotload', ''); +>>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) // Set params as envs do backend code has access to them updateConfig({ vite: { define: { +<<<<<<< HEAD /** * Convert the integration params to environment variable in order for be readable from the server */ +======= +>>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) ...buildEnvVarFromOption(signInUrl, 'PUBLIC_ASTRO_APP_CLERK_SIGN_IN_URL'), ...buildEnvVarFromOption(signUpUrl, 'PUBLIC_ASTRO_APP_CLERK_SIGN_UP_URL'), ...buildEnvVarFromOption(isSatellite, 'PUBLIC_ASTRO_APP_CLERK_IS_SATELLITE'), @@ -82,6 +96,7 @@ function createIntegration

({ mode }: }); /** +<<<<<<< HEAD * ------------- Script Injection -------------------------- * Below we are injecting the same script twice. `runInjectionScript` is build in such way in order to instanciate and load Clerk only once. * We need both scripts in order to support applications with or without UI frameworks. @@ -90,6 +105,10 @@ function createIntegration

({ mode }: /** * The above script will run before client frameworks like React hydrate. * This makes sure that we have initialized a Clerk instance and populated stores in order to avoid hydration issues. +======= + * The above script will run before client frameworks like React hydrate. + * This makes sure that we have initialized a Clerk instance and populated stores in order to avoid hydration issues +>>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) */ injectScript( 'before-hydration', diff --git a/packages/astro/src/integration/hotload.ts b/packages/astro/src/integration/hotload.ts new file mode 100644 index 00000000000..77f3eaaa6b7 --- /dev/null +++ b/packages/astro/src/integration/hotload.ts @@ -0,0 +1,5 @@ +import { createIntegration } from './create-integration'; + +export default createIntegration({ + mode: 'hotload', +}); diff --git a/packages/astro/src/integration/index.ts b/packages/astro/src/integration/index.ts index 77f3eaaa6b7..97e874b4e14 100644 --- a/packages/astro/src/integration/index.ts +++ b/packages/astro/src/integration/index.ts @@ -1,5 +1,9 @@ import { createIntegration } from './create-integration'; export default createIntegration({ +<<<<<<< HEAD mode: 'hotload', +======= + mode: 'bundled', +>>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) }); diff --git a/packages/astro/src/internal/hotload.ts b/packages/astro/src/internal/hotload.ts new file mode 100644 index 00000000000..ca17cfb879f --- /dev/null +++ b/packages/astro/src/internal/hotload.ts @@ -0,0 +1,13 @@ +/** + * The following code will be used in order to be injected as script via the astro integration. + * F.e. + * + * injectScript('before-hydration', `...`) + */ + +import { createClerkInstance } from '../client/hotload'; +import { createInjectionScriptRunner } from './create-injection-script-runner'; + +const runInjectionScript = createInjectionScriptRunner(createClerkInstance); + +export { runInjectionScript }; diff --git a/packages/astro/src/internal/merge-env-vars-with-params.ts b/packages/astro/src/internal/merge-env-vars-with-params.ts index b8aebfa02fc..2c4b7621226 100644 --- a/packages/astro/src/internal/merge-env-vars-with-params.ts +++ b/packages/astro/src/internal/merge-env-vars-with-params.ts @@ -1,8 +1,11 @@ import type { AstroClerkIntegrationParams } from '../types'; +<<<<<<< HEAD /** * @internal */ +======= +>>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) const mergeEnvVarsWithParams = (params?: AstroClerkIntegrationParams & { publishableKey?: string }) => { const { signInUrl: paramSignIn, diff --git a/packages/astro/src/internal/utils/loadClerkJSScript.ts b/packages/astro/src/internal/utils/loadClerkJSScript.ts index 6d250441339..153b9630057 100644 --- a/packages/astro/src/internal/utils/loadClerkJSScript.ts +++ b/packages/astro/src/internal/utils/loadClerkJSScript.ts @@ -1,6 +1,9 @@ const FAILED_TO_FIND_CLERK_SCRIPT = 'Clerk: Failed find clerk-js script'; +<<<<<<< HEAD // TODO-SHARED: Something similar exists inside clerk-react +======= +>>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) export const waitForClerkScript = () => { return new Promise((resolve, reject) => { const script = document.querySelector('script[data-clerk-script]'); diff --git a/packages/astro/src/internal/utils/versionSelector.ts b/packages/astro/src/internal/utils/versionSelector.ts index 12b8d4c2fdd..a2e444bff61 100644 --- a/packages/astro/src/internal/utils/versionSelector.ts +++ b/packages/astro/src/internal/utils/versionSelector.ts @@ -1,9 +1,16 @@ +<<<<<<< HEAD const HARDCODED_LATEST_CLERK_JS_VERSION = '5'; +======= +>>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) export const versionSelector = (clerkJSVersion: string | undefined): string => { if (clerkJSVersion) { return clerkJSVersion; } +<<<<<<< HEAD return HARDCODED_LATEST_CLERK_JS_VERSION; +======= + return '5'; +>>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) }; diff --git a/packages/astro/src/server/clerk-middleware.ts b/packages/astro/src/server/clerk-middleware.ts index 6991c9b732e..73cb5389ee5 100644 --- a/packages/astro/src/server/clerk-middleware.ts +++ b/packages/astro/src/server/clerk-middleware.ts @@ -81,8 +81,13 @@ export const clerkMiddleware: ClerkMiddleware = (...args: unknown[]): any => { decorateAstroLocal(context.request, context, requestState); /** +<<<<<<< HEAD * ALS is crucial for guaranteeing SSR in UI frameworks like React. * This currently powers the `useAuth()` React hook and any other hook or Component that depends on it. +======= + * For React component, in order to avoid hydration errors populate SSR store and do not depend on the component being wrapped ClerkLayout. + * For now this is only needed for control components like SignedIn/SignedOut +>>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) */ return authAsyncStorage.run(context.locals.auth(), async () => { /** @@ -113,7 +118,11 @@ export const clerkMiddleware: ClerkMiddleware = (...args: unknown[]): any => { return astroMiddleware; }; +<<<<<<< HEAD // TODO-SHARED: Duplicate from '@clerk/nextjs' +======= +// Duplicate from '@clerk/nextjs' +>>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) const parseHandlerAndOptions = (args: unknown[]) => { return [ typeof args[0] === 'function' ? args[0] : undefined, @@ -123,7 +132,11 @@ const parseHandlerAndOptions = (args: unknown[]) => { type AuthenticateRequest = Pick['authenticateRequest']; +<<<<<<< HEAD // TODO-SHARED: Duplicate from '@clerk/nextjs' +======= +// Duplicate from '@clerk/nextjs' +>>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) export const createAuthenticateRequestOptions = ( clerkRequest: ClerkRequest, options: ClerkAstroMiddlewareOptions, @@ -139,7 +152,11 @@ export const createAuthenticateRequestOptions = ( }; }; +<<<<<<< HEAD // TODO-SHARED: Duplicate from '@clerk/nextjs' +======= +// Duplicate from '@clerk/nextjs' +>>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) export const decorateResponseWithObservabilityHeaders = (res: Response, requestState: RequestState): Response => { requestState.message && res.headers.set(constants.Headers.AuthMessage, encodeURIComponent(requestState.message)); requestState.reason && res.headers.set(constants.Headers.AuthReason, encodeURIComponent(requestState.reason)); @@ -147,7 +164,11 @@ export const decorateResponseWithObservabilityHeaders = (res: Response, requestS return res; }; +<<<<<<< HEAD // TODO-SHARED: Duplicate from '@clerk/nextjs' +======= +// Duplicate from '@clerk/nextjs' +>>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) export const handleMultiDomainAndProxy = ( clerkRequest: ClerkRequest, opts: AuthenticateRequestOptions, @@ -189,25 +210,46 @@ export const handleMultiDomainAndProxy = ( }; }; +<<<<<<< HEAD +======= +// Duplicate from '@clerk/nextjs' +>>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) export const missingDomainAndProxy = ` Missing domain and proxyUrl. A satellite application needs to specify a domain or a proxyUrl. 1) With middleware +<<<<<<< HEAD e.g. export default clerkMiddleware({domain:'YOUR_DOMAIN',isSatellite:true}); 2) With environment variables e.g. PUBLIC_ASTRO_APP_CLERK_DOMAIN='YOUR_DOMAIN' PUBLIC_ASTRO_APP_CLERK_IS_SATELLITE='true' `; +======= + e.g. export default authMiddleware({domain:'YOUR_DOMAIN',isSatellite:true}); +2) With environment variables e.g. + NEXT_PUBLIC_CLERK_DOMAIN='YOUR_DOMAIN' + NEXT_PUBLIC_CLERK_IS_SATELLITE='true' + `; + +// Duplicate from '@clerk/nextjs' +>>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) export const missingSignInUrlInDev = ` Invalid signInUrl. A satellite application requires a signInUrl for development instances. Check if signInUrl is missing from your configuration or if it is not an absolute URL 1) With middleware +<<<<<<< HEAD e.g. export default clerkMiddleware({signInUrl:'SOME_URL', isSatellite:true}); 2) With environment variables e.g. PUBLIC_ASTRO_APP_CLERK_SIGN_IN_URL='SOME_URL' PUBLIC_ASTRO_APP_CLERK_IS_SATELLITE='true'`; +======= + e.g. export default authMiddleware({signInUrl:'SOME_URL', isSatellite:true}); +2) With environment variables e.g. + NEXT_PUBLIC_CLERK_SIGN_IN_URL='SOME_URL' + NEXT_PUBLIC_CLERK_IS_SATELLITE='true'`; +>>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) function decorateAstroLocal(req: Request, context: APIContext, requestState: RequestState) { const { reason, message, status, token } = requestState; @@ -233,7 +275,12 @@ async function decorateRequest( /** * Populate every page with the authObject. This allows for SSR to work properly +<<<<<<< HEAD * without sucrificing DX and having developers wrap each page with a Layout that would handle this. +======= + * without the developer having to wrap manually each page with `ClerkLayout.astro` + * ^ ClerkLayout is still needed in order to populate the ssrState store, but it not responsible for passing the data to a page. +>>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) */ if (res.headers.get('content-type') === 'text/html') { const reader = res.body?.getReader(); @@ -312,7 +359,11 @@ const createMiddlewareRedirectToSignIn = ( }; }; +<<<<<<< HEAD // Handle errors thrown by redirectToSignIn() calls, +======= +// Handle errors thrown by protect() and redirectToSignIn() calls, +>>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) // as we want to align the APIs between middleware, pages and route handlers // Normally, middleware requires to explicitly return a response, but we want to // avoid discrepancies between the APIs as it's easy to miss the `return` statement diff --git a/packages/astro/src/server/get-auth.ts b/packages/astro/src/server/get-auth.ts index 49d66936fe5..ad8ea2f43eb 100644 --- a/packages/astro/src/server/get-auth.ts +++ b/packages/astro/src/server/get-auth.ts @@ -55,10 +55,20 @@ export const createGetAuth = ({ noAuthStatusMessage }: { noAuthStatusMessage: st }; }; +<<<<<<< HEAD // TODO: Once docs for astro land, update the following message with this line // "For more details, see " const authAuthHeaderMissing = (helperName = 'auth') => `Clerk: ${helperName}() was called but Clerk can't detect usage of clerkMiddleware(). Please ensure that the clerkMiddleware() is used in your Astro Middleware. +======= +const authAuthHeaderMissing = (helperName = 'auth') => + `Clerk: ${helperName}() was called but Clerk can't detect usage of authMiddleware(). Please ensure the following: + - authMiddleware() is used in your Next.js Middleware. + - Your Middleware matcher is configured to match this route or page. + - If you are using the src directory, make sure the Middleware file is inside of it. + + For more details, see https://clerk.com/docs/quickstarts/get-started-with-nextjs +>>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) `; export const getAuth = createGetAuth({ diff --git a/packages/astro/src/server/route-matcher.ts b/packages/astro/src/server/route-matcher.ts index c0cfced19da..e3ba59d8fde 100644 --- a/packages/astro/src/server/route-matcher.ts +++ b/packages/astro/src/server/route-matcher.ts @@ -3,11 +3,21 @@ import { pathToRegexp } from 'path-to-regexp'; type WithPathPatternWildcard = `${T & string}(.*)`; +<<<<<<< HEAD type RouteMatcherRoutes = Autocomplete; export type RouteMatcherParam = Array | RegExp | RouteMatcherRoutes; // TODO-SHARED: This can be moved to @clerk/shared as an identical implementation exists in @clerk/nextjs +======= +type RouteMatcherWithNextTypedRoutes = Autocomplete; + +export type RouteMatcherParam = + | Array + | RegExp + | RouteMatcherWithNextTypedRoutes; + +>>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) /** * Returns a function that accepts a `Request` object and returns whether the request matches the list of * predefined routes that can be passed in as the first argument. diff --git a/packages/astro/src/server/server-redirect-with-auth.ts b/packages/astro/src/server/server-redirect-with-auth.ts index 38d8c33523b..e33c2d01a3f 100644 --- a/packages/astro/src/server/server-redirect-with-auth.ts +++ b/packages/astro/src/server/server-redirect-with-auth.ts @@ -6,7 +6,10 @@ import { DEV_BROWSER_JWT_KEY, isDevelopmentFromSecretKey, setDevBrowserJWTInURL import { getSafeEnv } from './get-safe-env'; import type { AstroMiddlewareContextParam } from './types'; +<<<<<<< HEAD // TODO-SHARED: This exists in @clerk/nextjs +======= +>>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) /** * Grabs the dev browser JWT from cookies and appends it to the redirect URL when redirecting to cross-origin. */ diff --git a/packages/astro/src/stores/external.ts b/packages/astro/src/stores/external.ts index 1f129ee2f7c..0cb1e27fe77 100644 --- a/packages/astro/src/stores/external.ts +++ b/packages/astro/src/stores/external.ts @@ -3,6 +3,7 @@ import { computed } from 'nanostores'; import { $clerk, $csrState, $initialState } from './internal'; import { deriveState } from './utils'; +<<<<<<< HEAD /** * A client side store that is prepopulated with the authentication context during SSR. * It is a nanostore, for instructions on how to use nanostores please review the [documentation](https://github.com/nanostores/nanostores) @@ -12,6 +13,8 @@ import { deriveState } from './utils'; * * $authStore.subscribe((auth) => console.log(auth.userId)) */ +======= +>>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) export const $authStore = computed([$csrState, $initialState], (state, initialState) => { return deriveState( state.isLoaded, @@ -25,6 +28,7 @@ export const $authStore = computed([$csrState, $initialState], (state, initialSt ); }); +<<<<<<< HEAD /** * A client side store that is populated after clerk-js has loaded. * The store returns back the authenticated user or `null`. @@ -35,12 +39,15 @@ export const $authStore = computed([$csrState, $initialState], (state, initialSt * * $userStore.subscribe((user) => console.log(user.id)) */ +======= +>>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) export const $userStore = computed([$authStore], auth => auth.user); // TODO: on mounted subscriber log telemetry // onMount($userStore, () => { // // isomorphicClerk.telemetry?.record(eventMethodCalled('useSignIn')); // }); +<<<<<<< HEAD /** * A client side store that is populated after clerk-js has loaded. * The store returns the session of the authenticated user or `null`. @@ -123,4 +130,12 @@ export const $signInStore = computed([$clientStore], client => client?.signIn); * * $signUpStore.subscribe((signUp) => console.log(signUp.status)) */ +======= +export const $sessionStore = computed([$authStore], auth => auth.session); +export const $organizationStore = computed([$authStore], auth => auth.organization); +export const $clientStore = computed([$csrState], csr => csr.client); +export const $clerkStore = computed([$clerk], clerk => clerk); +export const $sessionListStore = computed([$clientStore], client => client?.sessions); +export const $signInStore = computed([$clientStore], client => client?.signIn); +>>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) export const $signUpStore = computed([$clientStore], client => client?.signUp); diff --git a/packages/astro/src/stores/index.ts b/packages/astro/src/stores/index.ts new file mode 100644 index 00000000000..7e13c9380c8 --- /dev/null +++ b/packages/astro/src/stores/index.ts @@ -0,0 +1,2 @@ +// TODO: Don't expose internal +export * from './internal'; diff --git a/packages/astro/src/stores/internal.ts b/packages/astro/src/stores/internal.ts index 2ac76f464f0..8039f486127 100644 --- a/packages/astro/src/stores/internal.ts +++ b/packages/astro/src/stores/internal.ts @@ -8,6 +8,14 @@ import type { } from '@clerk/types'; import { atom, map } from 'nanostores'; +<<<<<<< HEAD +======= +// Deprecation warning as for not for the authors of this library + +/** + * @deprecated Use the individual stores exported from `/client/stores` + */ +>>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) export const $csrState = map<{ isLoaded: boolean; client: ClientResource | undefined | null; @@ -22,7 +30,19 @@ export const $csrState = map<{ organization: null, }); +<<<<<<< HEAD +export const $initialState = map(); + +// Use atom instead of `map` to prohibit key changes and allow only replacing the whole object +======= +/** + * @deprecated Use the individual stores exported from `/client/stores` + */ export const $initialState = map(); // Use atom instead of `map` to prohibit key changes and allow only replacing the whole object +/** + * @deprecated Use the individual stores exported from `/client/stores` + */ +>>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) export const $clerk = atom(null); diff --git a/packages/astro/src/v0/clerkClient.ts b/packages/astro/src/v0/clerkClient.ts new file mode 100644 index 00000000000..b5b7320b560 --- /dev/null +++ b/packages/astro/src/v0/clerkClient.ts @@ -0,0 +1,20 @@ +import { createClerkClient } from '@clerk/backend'; +import { deprecated } from '@clerk/shared/deprecated'; + +import { API_URL, API_VERSION, SECRET_KEY } from './constants'; + +const clerkClientSingleton = createClerkClient({ secretKey: SECRET_KEY, apiVersion: API_VERSION, apiUrl: API_URL }); + +/** + * @deprecated + * Accessing `clerkClient` as a variable is deprecated and will be removed in a future release. Please use `clerkClient()` as a function instead. + */ +const clerkClient = new Proxy(clerkClientSingleton, { + get(target, prop, receiver) { + deprecated('clerkClient object', 'Use `clerkClient()` as a function instead.'); + + return Reflect.get(target, prop, receiver); + }, +}); + +export { clerkClient }; diff --git a/packages/astro/src/v0/constants.ts b/packages/astro/src/v0/constants.ts new file mode 100644 index 00000000000..d46797255a1 --- /dev/null +++ b/packages/astro/src/v0/constants.ts @@ -0,0 +1,55 @@ +const apiKey = import.meta.env.CLERK_API_KEY || ''; + +const secretKey = import.meta.env.CLERK_SECRET_KEY || ''; + +const apiVersion = import.meta.env.CLERK_API_VERSION || 'v1'; + +const apiUrl = import.meta.env.CLERK_API_URL || 'https://api.clerk.dev'; + +const frontendApi = import.meta.env.PUBLIC_ASTRO_APP_CLERK_FRONTEND_API || ''; + +const publishableKey = import.meta.env.PUBLIC_ASTRO_APP_CLERK_PUBLISHABLE_KEY || ''; + +const signInUrl = import.meta.env.PUBLIC_ASTRO_APP_CLERK_SIGN_IN_URL || ('' as string); + +const signUpUrl = import.meta.env.PUBLIC_ASTRO_APP_CLERK_SIGN_UP_URL || ('' as string); + +const jwtKey = import.meta.env.CLERK_JWT_KEY || ''; + +const PUBLISHABLE_KEY = publishableKey; +const SECRET_KEY = secretKey; +const SIGN_IN_URL = signInUrl; +const SIGN_UP_URL = signUpUrl; +const DOMAIN = import.meta.env.PUBLIC_ASTRO_APP_CLERK_DOMAIN || ('' as string); +const PROXY_URL = import.meta.env.PUBLIC_ASTRO_APP_CLERK_PROXY_URL || ('' as string); +const IS_SATELLITE = import.meta.env.PUBLIC_ASTRO_APP_CLERK_IS_SATELLITE === 'true'; +const API_VERSION = import.meta.env.CLERK_API_VERSION || 'v1'; +const API_URL = import.meta.env.CLERK_API_URL || 'https://api.clerk.dev'; + +const CLERK_JS_URL = import.meta.env.PUBLIC_ASTRO_APP_CLERK_JS_URL; +const CLERK_JS_VARIANT = import.meta.env.PUBLIC_ASTRO_APP_CLERK_JS_VARIANT; +const CLERK_JS_VERSION = import.meta.env.PUBLIC_ASTRO_APP_CLERK_JS_VERSION; + +export { + secretKey, + apiKey, + apiUrl, + apiVersion, + frontendApi, + publishableKey, + jwtKey, + signInUrl, + signUpUrl, + PUBLISHABLE_KEY, + SECRET_KEY, + SIGN_IN_URL, + SIGN_UP_URL, + DOMAIN, + PROXY_URL, + IS_SATELLITE, + API_URL, + API_VERSION, + CLERK_JS_URL, + CLERK_JS_VARIANT, + CLERK_JS_VERSION, +}; diff --git a/packages/astro/src/v0/index.ts b/packages/astro/src/v0/index.ts new file mode 100644 index 00000000000..454b8ea7992 --- /dev/null +++ b/packages/astro/src/v0/index.ts @@ -0,0 +1,2 @@ +export * from './clerkClient'; +export * from './constants'; diff --git a/packages/astro/v0/package.json b/packages/astro/v0/package.json new file mode 100644 index 00000000000..d2fdc59191a --- /dev/null +++ b/packages/astro/v0/package.json @@ -0,0 +1,3 @@ +{ + "main": "../dist/v0/index.js" +} From 7b71c50d550886f498b8e7948cc2ab0803513f09 Mon Sep 17 00:00:00 2001 From: panteliselef Date: Mon, 1 Jul 2024 14:52:44 +0300 Subject: [PATCH 02/13] chore(astro): Cleanup --- .../control/ClerkLayout.astro | 7 --- .../react/OrganizationList.astro | 41 ++++++++++++----- .../react/OrganizationProfile.astro | 41 ++++++++++++----- .../react/OrganizationSwitcher.astro | 41 ++++++++++++----- .../src/astro-components/react/Protect.astro | 23 ++++------ .../src/astro-components/react/SignIn.astro | 43 +++++++++++++----- .../src/astro-components/react/SignUp.astro | 42 ++++++++++++----- .../src/astro-components/react/SignedIn.astro | 11 ++--- .../astro-components/react/UserButton.astro | 44 ++++++++++++------ .../astro-components/react/UserProfile.astro | 45 +++++++++++++------ packages/astro/src/client/hotload.ts | 1 + .../src/integration/create-integration.ts | 21 +-------- 12 files changed, 233 insertions(+), 127 deletions(-) delete mode 100644 packages/astro/src/astro-components/control/ClerkLayout.astro diff --git a/packages/astro/src/astro-components/control/ClerkLayout.astro b/packages/astro/src/astro-components/control/ClerkLayout.astro deleted file mode 100644 index c4f4795eced..00000000000 --- a/packages/astro/src/astro-components/control/ClerkLayout.astro +++ /dev/null @@ -1,7 +0,0 @@ ---- -interface Props { - protectedPage?: boolean; -} - ---- - diff --git a/packages/astro/src/astro-components/react/OrganizationList.astro b/packages/astro/src/astro-components/react/OrganizationList.astro index 2a626c07c62..d5165446419 100644 --- a/packages/astro/src/astro-components/react/OrganizationList.astro +++ b/packages/astro/src/astro-components/react/OrganizationList.astro @@ -2,19 +2,40 @@ import type { OrganizationListProps } from "@clerk/types"; type Props = OrganizationListProps -import type { AstroBuiltinProps } from 'astro'; -<<<<<<< HEAD -import { OrganizationList as OrganizationListReact } from "@clerk/astro/client/react"; -======= -import { OrganizationList as OrganizationListReact } from "astro-clerk-auth/client/react"; ->>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) +import { customAlphabet, urlAlphabet } from "nanoid"; + +const safeId = customAlphabet(urlAlphabet, 10)(); const props = { ...Astro.props, } --- - +

+ + \ No newline at end of file diff --git a/packages/astro/src/astro-components/react/OrganizationProfile.astro b/packages/astro/src/astro-components/react/OrganizationProfile.astro index 75268409c19..f8a38199ebd 100644 --- a/packages/astro/src/astro-components/react/OrganizationProfile.astro +++ b/packages/astro/src/astro-components/react/OrganizationProfile.astro @@ -2,19 +2,40 @@ import type { OrganizationProfileProps } from "@clerk/types"; type Props = OrganizationProfileProps -import type { AstroBuiltinProps } from 'astro'; -<<<<<<< HEAD -import { OrganizationProfile as OrganizationProfileReact } from "@clerk/astro/client/react"; -======= -import { OrganizationProfile as OrganizationProfileReact } from "astro-clerk-auth/client/react"; ->>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) +import { customAlphabet, urlAlphabet } from "nanoid"; + +const safeId = customAlphabet(urlAlphabet, 10)(); const props = { ...Astro.props, } --- - +
+ + \ No newline at end of file diff --git a/packages/astro/src/astro-components/react/OrganizationSwitcher.astro b/packages/astro/src/astro-components/react/OrganizationSwitcher.astro index 207583e2e74..a22c0823b85 100644 --- a/packages/astro/src/astro-components/react/OrganizationSwitcher.astro +++ b/packages/astro/src/astro-components/react/OrganizationSwitcher.astro @@ -2,19 +2,40 @@ import type { OrganizationSwitcherProps } from "@clerk/types"; type Props = OrganizationSwitcherProps -import type { AstroBuiltinProps } from 'astro'; -<<<<<<< HEAD -import { OrganizationSwitcher as OrganizationSwitcherReact } from "@clerk/astro/client/react"; -======= -import { OrganizationSwitcher as OrganizationSwitcherReact } from "astro-clerk-auth/client/react"; ->>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) +import { customAlphabet, urlAlphabet } from "nanoid"; + +const safeId = customAlphabet(urlAlphabet, 10)(); const props = { ...Astro.props, } --- - +
+ + \ No newline at end of file diff --git a/packages/astro/src/astro-components/react/Protect.astro b/packages/astro/src/astro-components/react/Protect.astro index 799538ed58a..316c3366dbe 100644 --- a/packages/astro/src/astro-components/react/Protect.astro +++ b/packages/astro/src/astro-components/react/Protect.astro @@ -1,20 +1,13 @@ --- -import type { ProtectComponentDefaultProps } from "../../types"; +import { ProtectComponentDefaultProps } from "../../types"; type Props = ProtectComponentDefaultProps -<<<<<<< HEAD -import { Protect as ProtectReact } from "@clerk/astro/client/react"; -======= -import { Protect as ProtectReact } from "astro-clerk-auth/client/react"; ->>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) -const props = { - ...Astro.props, -} +const { has, userId } = Astro.locals.auth(); +const isUnauthorized = + !userId || + (typeof Astro.props.condition === "function" && + !Astro.props.condition(has)) || + ((Astro.props.role || Astro.props.permission) && !has(Astro.props)); --- - - - - - - +{isUnauthorized ? : } \ No newline at end of file diff --git a/packages/astro/src/astro-components/react/SignIn.astro b/packages/astro/src/astro-components/react/SignIn.astro index bf9300eef16..8b626e221a4 100644 --- a/packages/astro/src/astro-components/react/SignIn.astro +++ b/packages/astro/src/astro-components/react/SignIn.astro @@ -1,19 +1,42 @@ --- import type { SignInProps } from "@clerk/types"; -type Props = SignInProps +type Props = SignInProps; -<<<<<<< HEAD -import { SignIn as SignInReact } from "@clerk/astro/client/react"; -======= -import { SignIn as SignInReact } from "astro-clerk-auth/client/react"; ->>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) +import { customAlphabet, urlAlphabet } from "nanoid"; + +const safeId = customAlphabet(urlAlphabet, 10)(); const props = { ...Astro.props } --- - +
+ + \ No newline at end of file diff --git a/packages/astro/src/astro-components/react/SignUp.astro b/packages/astro/src/astro-components/react/SignUp.astro index 07b27f78133..1eef4fb9fb1 100644 --- a/packages/astro/src/astro-components/react/SignUp.astro +++ b/packages/astro/src/astro-components/react/SignUp.astro @@ -1,19 +1,41 @@ --- import type { SignUpProps } from "@clerk/types"; -type Props = SignUpProps +type Props = SignUpProps; -<<<<<<< HEAD -import { SignUp as SignUpReact } from "@clerk/astro/client/react"; -======= -import { SignUp as SignUpReact } from "astro-clerk-auth/client/react"; ->>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) +import { customAlphabet, urlAlphabet } from "nanoid"; + +const safeId = customAlphabet(urlAlphabet, 10)(); const props = { ...Astro.props } --- - +
+ + \ No newline at end of file diff --git a/packages/astro/src/astro-components/react/SignedIn.astro b/packages/astro/src/astro-components/react/SignedIn.astro index cd80f74c259..c1657391909 100644 --- a/packages/astro/src/astro-components/react/SignedIn.astro +++ b/packages/astro/src/astro-components/react/SignedIn.astro @@ -1,11 +1,6 @@ --- -<<<<<<< HEAD -import { SignedIn as SignedInReact } from "@clerk/astro/client/react"; -======= -import { SignedIn as SignedInReact } from "astro-clerk-auth/client/react"; ->>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) +const { userId } = Astro.locals.auth() --- - - - + +{ userId ? : null } \ No newline at end of file diff --git a/packages/astro/src/astro-components/react/UserButton.astro b/packages/astro/src/astro-components/react/UserButton.astro index 26e34608b9b..1ec10d1d294 100644 --- a/packages/astro/src/astro-components/react/UserButton.astro +++ b/packages/astro/src/astro-components/react/UserButton.astro @@ -1,19 +1,37 @@ --- import type { UserButtonProps } from "@clerk/types"; -type Props = UserButtonProps +type Props = UserButtonProps; -<<<<<<< HEAD -import { UserButton as UserButtonReact } from "@clerk/astro/client/react"; -======= -import { UserButton as UserButtonReact } from "astro-clerk-auth/client/react"; ->>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) +import { customAlphabet, urlAlphabet } from "nanoid"; -const props = { - ...Astro.props, -} +const safeId = customAlphabet(urlAlphabet, 10)(); --- - +
+ + \ No newline at end of file diff --git a/packages/astro/src/astro-components/react/UserProfile.astro b/packages/astro/src/astro-components/react/UserProfile.astro index 1f3583b40c9..44470d3a41c 100644 --- a/packages/astro/src/astro-components/react/UserProfile.astro +++ b/packages/astro/src/astro-components/react/UserProfile.astro @@ -1,20 +1,37 @@ --- import type { UserProfileProps } from "@clerk/types"; -type Props = UserProfileProps +type Props = UserProfileProps; -import type { AstroBuiltinProps } from 'astro'; -<<<<<<< HEAD -import { UserProfile as UserProfileReact } from "@clerk/astro/client/react"; -======= -import { UserProfile as UserProfileReact } from "astro-clerk-auth/client/react"; ->>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) +import { customAlphabet, urlAlphabet } from "nanoid"; -const props = { - ...Astro.props, -} +const safeId = customAlphabet(urlAlphabet, 10)(); --- - +
+ + \ No newline at end of file diff --git a/packages/astro/src/client/hotload.ts b/packages/astro/src/client/hotload.ts index 57b8b853a63..ffe5b8c612b 100644 --- a/packages/astro/src/client/hotload.ts +++ b/packages/astro/src/client/hotload.ts @@ -23,6 +23,7 @@ export async function createClerkInstanceInternal(options?: AstroClerkIntegratio } if (!$clerk.get()) { + // @ts-ignore $clerk.set(clerkJSInstance); } diff --git a/packages/astro/src/integration/create-integration.ts b/packages/astro/src/integration/create-integration.ts index 573ba6d018b..fb90162b9b3 100644 --- a/packages/astro/src/integration/create-integration.ts +++ b/packages/astro/src/integration/create-integration.ts @@ -19,11 +19,7 @@ function createIntegration

({ mode }: ): AstroIntegration => { const { proxyUrl, isSatellite, domain, signInUrl, signUpUrl } = params || {}; -<<<<<<< HEAD // These are not provided when the "bundled" integration is used -======= - // This are not provided when the "bundled" integration is used ->>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) const clerkJSUrl = (params as any)?.clerkJSUrl as string | undefined; const clerkJSVariant = (params as any)?.clerkJSVariant as string | undefined; const clerkJSVersion = (params as any)?.clerkJSVersion as string | undefined; @@ -44,28 +40,18 @@ function createIntegration

({ mode }: logger.error('Invalid value for clerkJSVariant. Acceptable values are `"headless"`, `""`, and `undefined`'); } -<<<<<<< HEAD const defaultBundledImportPath = `${packageName}/internal/bundled`; const buildImportPath = mode === 'bundled' ? defaultBundledImportPath : defaultBundledImportPath.replace('/bundled', ''); -======= - const defaultHotLoadImportPath = `${packageName}/internal/hotload`; - - const buildImportPath = - mode === 'hotload' ? defaultHotLoadImportPath : defaultHotLoadImportPath.replace('/hotload', ''); ->>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) // Set params as envs do backend code has access to them updateConfig({ vite: { define: { -<<<<<<< HEAD /** * Convert the integration params to environment variable in order for be readable from the server */ -======= ->>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) ...buildEnvVarFromOption(signInUrl, 'PUBLIC_ASTRO_APP_CLERK_SIGN_IN_URL'), ...buildEnvVarFromOption(signUpUrl, 'PUBLIC_ASTRO_APP_CLERK_SIGN_UP_URL'), ...buildEnvVarFromOption(isSatellite, 'PUBLIC_ASTRO_APP_CLERK_IS_SATELLITE'), @@ -96,7 +82,6 @@ function createIntegration

({ mode }: }); /** -<<<<<<< HEAD * ------------- Script Injection -------------------------- * Below we are injecting the same script twice. `runInjectionScript` is build in such way in order to instanciate and load Clerk only once. * We need both scripts in order to support applications with or without UI frameworks. @@ -105,10 +90,6 @@ function createIntegration

({ mode }: /** * The above script will run before client frameworks like React hydrate. * This makes sure that we have initialized a Clerk instance and populated stores in order to avoid hydration issues. -======= - * The above script will run before client frameworks like React hydrate. - * This makes sure that we have initialized a Clerk instance and populated stores in order to avoid hydration issues ->>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) */ injectScript( 'before-hydration', @@ -137,4 +118,4 @@ function createIntegration

({ mode }: }; } -export { createIntegration }; +export { createIntegration }; \ No newline at end of file From ae977811a8b58687315a36719b977b61fa5545ce Mon Sep 17 00:00:00 2001 From: panteliselef Date: Mon, 1 Jul 2024 15:30:31 +0300 Subject: [PATCH 03/13] chore(astro): Drop deprecations --- packages/astro/src/stores/index.ts | 2 - packages/astro/src/stores/internal.ts | 22 +---------- packages/astro/src/v0/clerkClient.ts | 20 ---------- packages/astro/src/v0/constants.ts | 55 --------------------------- packages/astro/src/v0/index.ts | 2 - packages/astro/v0/package.json | 3 -- 6 files changed, 1 insertion(+), 103 deletions(-) delete mode 100644 packages/astro/src/stores/index.ts delete mode 100644 packages/astro/src/v0/clerkClient.ts delete mode 100644 packages/astro/src/v0/constants.ts delete mode 100644 packages/astro/src/v0/index.ts delete mode 100644 packages/astro/v0/package.json diff --git a/packages/astro/src/stores/index.ts b/packages/astro/src/stores/index.ts deleted file mode 100644 index 7e13c9380c8..00000000000 --- a/packages/astro/src/stores/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -// TODO: Don't expose internal -export * from './internal'; diff --git a/packages/astro/src/stores/internal.ts b/packages/astro/src/stores/internal.ts index 8039f486127..f42c3255b28 100644 --- a/packages/astro/src/stores/internal.ts +++ b/packages/astro/src/stores/internal.ts @@ -8,14 +8,6 @@ import type { } from '@clerk/types'; import { atom, map } from 'nanostores'; -<<<<<<< HEAD -======= -// Deprecation warning as for not for the authors of this library - -/** - * @deprecated Use the individual stores exported from `/client/stores` - */ ->>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) export const $csrState = map<{ isLoaded: boolean; client: ClientResource | undefined | null; @@ -30,19 +22,7 @@ export const $csrState = map<{ organization: null, }); -<<<<<<< HEAD -export const $initialState = map(); - -// Use atom instead of `map` to prohibit key changes and allow only replacing the whole object -======= -/** - * @deprecated Use the individual stores exported from `/client/stores` - */ export const $initialState = map(); // Use atom instead of `map` to prohibit key changes and allow only replacing the whole object -/** - * @deprecated Use the individual stores exported from `/client/stores` - */ ->>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) -export const $clerk = atom(null); +export const $clerk = atom(null); \ No newline at end of file diff --git a/packages/astro/src/v0/clerkClient.ts b/packages/astro/src/v0/clerkClient.ts deleted file mode 100644 index b5b7320b560..00000000000 --- a/packages/astro/src/v0/clerkClient.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { createClerkClient } from '@clerk/backend'; -import { deprecated } from '@clerk/shared/deprecated'; - -import { API_URL, API_VERSION, SECRET_KEY } from './constants'; - -const clerkClientSingleton = createClerkClient({ secretKey: SECRET_KEY, apiVersion: API_VERSION, apiUrl: API_URL }); - -/** - * @deprecated - * Accessing `clerkClient` as a variable is deprecated and will be removed in a future release. Please use `clerkClient()` as a function instead. - */ -const clerkClient = new Proxy(clerkClientSingleton, { - get(target, prop, receiver) { - deprecated('clerkClient object', 'Use `clerkClient()` as a function instead.'); - - return Reflect.get(target, prop, receiver); - }, -}); - -export { clerkClient }; diff --git a/packages/astro/src/v0/constants.ts b/packages/astro/src/v0/constants.ts deleted file mode 100644 index d46797255a1..00000000000 --- a/packages/astro/src/v0/constants.ts +++ /dev/null @@ -1,55 +0,0 @@ -const apiKey = import.meta.env.CLERK_API_KEY || ''; - -const secretKey = import.meta.env.CLERK_SECRET_KEY || ''; - -const apiVersion = import.meta.env.CLERK_API_VERSION || 'v1'; - -const apiUrl = import.meta.env.CLERK_API_URL || 'https://api.clerk.dev'; - -const frontendApi = import.meta.env.PUBLIC_ASTRO_APP_CLERK_FRONTEND_API || ''; - -const publishableKey = import.meta.env.PUBLIC_ASTRO_APP_CLERK_PUBLISHABLE_KEY || ''; - -const signInUrl = import.meta.env.PUBLIC_ASTRO_APP_CLERK_SIGN_IN_URL || ('' as string); - -const signUpUrl = import.meta.env.PUBLIC_ASTRO_APP_CLERK_SIGN_UP_URL || ('' as string); - -const jwtKey = import.meta.env.CLERK_JWT_KEY || ''; - -const PUBLISHABLE_KEY = publishableKey; -const SECRET_KEY = secretKey; -const SIGN_IN_URL = signInUrl; -const SIGN_UP_URL = signUpUrl; -const DOMAIN = import.meta.env.PUBLIC_ASTRO_APP_CLERK_DOMAIN || ('' as string); -const PROXY_URL = import.meta.env.PUBLIC_ASTRO_APP_CLERK_PROXY_URL || ('' as string); -const IS_SATELLITE = import.meta.env.PUBLIC_ASTRO_APP_CLERK_IS_SATELLITE === 'true'; -const API_VERSION = import.meta.env.CLERK_API_VERSION || 'v1'; -const API_URL = import.meta.env.CLERK_API_URL || 'https://api.clerk.dev'; - -const CLERK_JS_URL = import.meta.env.PUBLIC_ASTRO_APP_CLERK_JS_URL; -const CLERK_JS_VARIANT = import.meta.env.PUBLIC_ASTRO_APP_CLERK_JS_VARIANT; -const CLERK_JS_VERSION = import.meta.env.PUBLIC_ASTRO_APP_CLERK_JS_VERSION; - -export { - secretKey, - apiKey, - apiUrl, - apiVersion, - frontendApi, - publishableKey, - jwtKey, - signInUrl, - signUpUrl, - PUBLISHABLE_KEY, - SECRET_KEY, - SIGN_IN_URL, - SIGN_UP_URL, - DOMAIN, - PROXY_URL, - IS_SATELLITE, - API_URL, - API_VERSION, - CLERK_JS_URL, - CLERK_JS_VARIANT, - CLERK_JS_VERSION, -}; diff --git a/packages/astro/src/v0/index.ts b/packages/astro/src/v0/index.ts deleted file mode 100644 index 454b8ea7992..00000000000 --- a/packages/astro/src/v0/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './clerkClient'; -export * from './constants'; diff --git a/packages/astro/v0/package.json b/packages/astro/v0/package.json deleted file mode 100644 index d2fdc59191a..00000000000 --- a/packages/astro/v0/package.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "main": "../dist/v0/index.js" -} From 1dcc3718c764e77236de48fcef1be53cb11d5b60 Mon Sep 17 00:00:00 2001 From: panteliselef Date: Mon, 1 Jul 2024 15:57:53 +0300 Subject: [PATCH 04/13] chore(astro): Make hotloading the default --- packages/astro/src/client/hotload.ts | 59 ----------------------- packages/astro/src/client/index.ts | 36 +------------- packages/astro/src/hotload.ts | 1 - packages/astro/src/integration/hotload.ts | 5 -- packages/astro/src/integration/index.ts | 6 +-- packages/astro/src/internal/hotload.ts | 13 ----- 6 files changed, 2 insertions(+), 118 deletions(-) delete mode 100644 packages/astro/src/client/hotload.ts delete mode 100644 packages/astro/src/hotload.ts delete mode 100644 packages/astro/src/integration/hotload.ts delete mode 100644 packages/astro/src/internal/hotload.ts diff --git a/packages/astro/src/client/hotload.ts b/packages/astro/src/client/hotload.ts deleted file mode 100644 index ffe5b8c612b..00000000000 --- a/packages/astro/src/client/hotload.ts +++ /dev/null @@ -1,59 +0,0 @@ -import { waitForClerkScript } from '../internal/utils/loadClerkJSScript'; -import { $clerk, $csrState } from '../stores/internal'; -import type { AstroClerkIntegrationParams, AstroClerkUpdateOptions } from '../types'; -import { mountAllClerkAstroJSComponents } from './mount-clerk-astro-js-components'; -import { runOnce } from './run-once'; - -let initOptions: AstroClerkIntegrationParams | undefined; - -/** - * Prevents firing clerk.load multiple times - */ -export const createClerkInstance = runOnce(createClerkInstanceInternal); - -export async function createClerkInstanceInternal(options?: AstroClerkIntegrationParams) { - let clerkJSInstance = window.Clerk; - if (!clerkJSInstance) { - await waitForClerkScript(); - - if (!window.Clerk) { - throw new Error('Failed to download latest ClerkJS. Contact support@clerk.com.'); - } - clerkJSInstance = window.Clerk; - } - - if (!$clerk.get()) { - // @ts-ignore - $clerk.set(clerkJSInstance); - } - - initOptions = options; - // TODO: Update Clerk type from @clerk/types to include this method - return (clerkJSInstance as any) - .load(options) - .then(() => { - $csrState.setKey('isLoaded', true); - - mountAllClerkAstroJSComponents(); - - clerkJSInstance.addListener(payload => { - $csrState.setKey('client', payload.client); - $csrState.setKey('user', payload.user); - $csrState.setKey('session', payload.session); - $csrState.setKey('organization', payload.organization); - }); - }) - .catch(() => {}); -} - -export function updateClerkOptions(options: AstroClerkUpdateOptions) { - const clerk = $clerk.get(); - if (!clerk) { - throw new Error('Missing clerk instance'); - } - // TODO: Update Clerk type from @clerk/types to include this method - void (clerk as any).__unstable__updateProps({ - options: { ...initOptions, ...options }, - appearance: { ...initOptions?.appearance, ...options.appearance }, - }); -} diff --git a/packages/astro/src/client/index.ts b/packages/astro/src/client/index.ts index 4a0dff6f8c3..99c311c9401 100644 --- a/packages/astro/src/client/index.ts +++ b/packages/astro/src/client/index.ts @@ -1,4 +1,3 @@ -<<<<<<< HEAD import { waitForClerkScript } from '../internal/utils/loadClerkJSScript'; import { $clerk, $csrState } from '../stores/internal'; import type { AstroClerkIntegrationParams, AstroClerkUpdateOptions } from '../types'; @@ -6,22 +5,10 @@ import { mountAllClerkAstroJSComponents } from './mount-clerk-astro-js-component import { runOnce } from './run-once'; let initOptions: AstroClerkIntegrationParams | undefined; -======= -import { Clerk } from '@clerk/clerk-js'; - -import { $clerk, $csrState } from '../stores/internal'; -import type { AstroClerkCreateInstanceParams, AstroClerkUpdateOptions } from '../types'; -import { mountAllClerkAstroJSComponents } from './mount-clerk-astro-js-components'; -import { runOnce } from './run-once'; -import type { CreateClerkInstanceInternalFn } from './types'; - -let initOptions: AstroClerkCreateInstanceParams | undefined; ->>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) /** * Prevents firing clerk.load multiple times */ -<<<<<<< HEAD export const createClerkInstance = runOnce(createClerkInstanceInternal); export async function createClerkInstanceInternal(options?: AstroClerkIntegrationParams) { @@ -43,22 +30,6 @@ export async function createClerkInstanceInternal(options?: AstroClerkIntegratio initOptions = options; // TODO: Update Clerk type from @clerk/types to include this method return (clerkJSInstance as any) -======= -export const createClerkInstance: CreateClerkInstanceInternalFn = runOnce(createClerkInstanceInternal); - -export function createClerkInstanceInternal(options?: AstroClerkCreateInstanceParams) { - let clerkJSInstance = window.Clerk as unknown as Clerk; - if (!clerkJSInstance) { - clerkJSInstance = new Clerk(options!.publishableKey); - // @ts-ignore - $clerk.set(clerkJSInstance); - // @ts-ignore - window.Clerk = clerkJSInstance; - } - - initOptions = options; - return clerkJSInstance ->>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) .load(options) .then(() => { $csrState.setKey('isLoaded', true); @@ -80,14 +51,9 @@ export function updateClerkOptions(options: AstroClerkUpdateOptions) { if (!clerk) { throw new Error('Missing clerk instance'); } -<<<<<<< HEAD // TODO: Update Clerk type from @clerk/types to include this method void (clerk as any).__unstable__updateProps({ -======= - //@ts-ignore - clerk.__unstable__updateProps({ ->>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) options: { ...initOptions, ...options }, appearance: { ...initOptions?.appearance, ...options.appearance }, }); -} +} \ No newline at end of file diff --git a/packages/astro/src/hotload.ts b/packages/astro/src/hotload.ts deleted file mode 100644 index 91fef73a055..00000000000 --- a/packages/astro/src/hotload.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './integration/hotload'; diff --git a/packages/astro/src/integration/hotload.ts b/packages/astro/src/integration/hotload.ts deleted file mode 100644 index 77f3eaaa6b7..00000000000 --- a/packages/astro/src/integration/hotload.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { createIntegration } from './create-integration'; - -export default createIntegration({ - mode: 'hotload', -}); diff --git a/packages/astro/src/integration/index.ts b/packages/astro/src/integration/index.ts index 97e874b4e14..edbd9aaa934 100644 --- a/packages/astro/src/integration/index.ts +++ b/packages/astro/src/integration/index.ts @@ -1,9 +1,5 @@ import { createIntegration } from './create-integration'; export default createIntegration({ -<<<<<<< HEAD mode: 'hotload', -======= - mode: 'bundled', ->>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) -}); +}); \ No newline at end of file diff --git a/packages/astro/src/internal/hotload.ts b/packages/astro/src/internal/hotload.ts deleted file mode 100644 index ca17cfb879f..00000000000 --- a/packages/astro/src/internal/hotload.ts +++ /dev/null @@ -1,13 +0,0 @@ -/** - * The following code will be used in order to be injected as script via the astro integration. - * F.e. - * - * injectScript('before-hydration', `...`) - */ - -import { createClerkInstance } from '../client/hotload'; -import { createInjectionScriptRunner } from './create-injection-script-runner'; - -const runInjectionScript = createInjectionScriptRunner(createClerkInstance); - -export { runInjectionScript }; From 8b049c672929295ee3a84f94fc7a7677f8023cbf Mon Sep 17 00:00:00 2001 From: panteliselef Date: Tue, 2 Jul 2024 15:04:39 +0300 Subject: [PATCH 05/13] chore(astro): Update REAMDE --- packages/astro/src/client/react/hooks.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/astro/src/client/react/hooks.ts b/packages/astro/src/client/react/hooks.ts index dc86dd3b6ed..4feddacb1bc 100644 --- a/packages/astro/src/client/react/hooks.ts +++ b/packages/astro/src/client/react/hooks.ts @@ -263,13 +263,9 @@ function useStore>(store: T): SV { return authAsyncStorage.getStore(); } -<<<<<<< HEAD /** -======= - /**a ->>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) * When this runs on the client, during hydration, we want to grab the content the store. */ return get(); }); -} +} \ No newline at end of file From 5f7ac94d8172506bd8608a4bc1cae85f44e06365 Mon Sep 17 00:00:00 2001 From: panteliselef Date: Tue, 2 Jul 2024 19:40:07 +0300 Subject: [PATCH 06/13] chore(astro): Address PR comments --- packages/astro/src/server/clerk-middleware.ts | 53 +------------------ packages/astro/src/server/get-auth.ts | 12 +---- 2 files changed, 2 insertions(+), 63 deletions(-) diff --git a/packages/astro/src/server/clerk-middleware.ts b/packages/astro/src/server/clerk-middleware.ts index 73cb5389ee5..8d2dbe46b87 100644 --- a/packages/astro/src/server/clerk-middleware.ts +++ b/packages/astro/src/server/clerk-middleware.ts @@ -81,13 +81,8 @@ export const clerkMiddleware: ClerkMiddleware = (...args: unknown[]): any => { decorateAstroLocal(context.request, context, requestState); /** -<<<<<<< HEAD * ALS is crucial for guaranteeing SSR in UI frameworks like React. * This currently powers the `useAuth()` React hook and any other hook or Component that depends on it. -======= - * For React component, in order to avoid hydration errors populate SSR store and do not depend on the component being wrapped ClerkLayout. - * For now this is only needed for control components like SignedIn/SignedOut ->>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) */ return authAsyncStorage.run(context.locals.auth(), async () => { /** @@ -118,11 +113,7 @@ export const clerkMiddleware: ClerkMiddleware = (...args: unknown[]): any => { return astroMiddleware; }; -<<<<<<< HEAD // TODO-SHARED: Duplicate from '@clerk/nextjs' -======= -// Duplicate from '@clerk/nextjs' ->>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) const parseHandlerAndOptions = (args: unknown[]) => { return [ typeof args[0] === 'function' ? args[0] : undefined, @@ -132,11 +123,7 @@ const parseHandlerAndOptions = (args: unknown[]) => { type AuthenticateRequest = Pick['authenticateRequest']; -<<<<<<< HEAD // TODO-SHARED: Duplicate from '@clerk/nextjs' -======= -// Duplicate from '@clerk/nextjs' ->>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) export const createAuthenticateRequestOptions = ( clerkRequest: ClerkRequest, options: ClerkAstroMiddlewareOptions, @@ -152,11 +139,7 @@ export const createAuthenticateRequestOptions = ( }; }; -<<<<<<< HEAD // TODO-SHARED: Duplicate from '@clerk/nextjs' -======= -// Duplicate from '@clerk/nextjs' ->>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) export const decorateResponseWithObservabilityHeaders = (res: Response, requestState: RequestState): Response => { requestState.message && res.headers.set(constants.Headers.AuthMessage, encodeURIComponent(requestState.message)); requestState.reason && res.headers.set(constants.Headers.AuthReason, encodeURIComponent(requestState.reason)); @@ -164,11 +147,7 @@ export const decorateResponseWithObservabilityHeaders = (res: Response, requestS return res; }; -<<<<<<< HEAD // TODO-SHARED: Duplicate from '@clerk/nextjs' -======= -// Duplicate from '@clerk/nextjs' ->>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) export const handleMultiDomainAndProxy = ( clerkRequest: ClerkRequest, opts: AuthenticateRequestOptions, @@ -210,46 +189,25 @@ export const handleMultiDomainAndProxy = ( }; }; -<<<<<<< HEAD -======= -// Duplicate from '@clerk/nextjs' ->>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) export const missingDomainAndProxy = ` Missing domain and proxyUrl. A satellite application needs to specify a domain or a proxyUrl. 1) With middleware -<<<<<<< HEAD e.g. export default clerkMiddleware({domain:'YOUR_DOMAIN',isSatellite:true}); 2) With environment variables e.g. PUBLIC_ASTRO_APP_CLERK_DOMAIN='YOUR_DOMAIN' PUBLIC_ASTRO_APP_CLERK_IS_SATELLITE='true' `; -======= - e.g. export default authMiddleware({domain:'YOUR_DOMAIN',isSatellite:true}); -2) With environment variables e.g. - NEXT_PUBLIC_CLERK_DOMAIN='YOUR_DOMAIN' - NEXT_PUBLIC_CLERK_IS_SATELLITE='true' - `; - -// Duplicate from '@clerk/nextjs' ->>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) export const missingSignInUrlInDev = ` Invalid signInUrl. A satellite application requires a signInUrl for development instances. Check if signInUrl is missing from your configuration or if it is not an absolute URL 1) With middleware -<<<<<<< HEAD e.g. export default clerkMiddleware({signInUrl:'SOME_URL', isSatellite:true}); 2) With environment variables e.g. PUBLIC_ASTRO_APP_CLERK_SIGN_IN_URL='SOME_URL' PUBLIC_ASTRO_APP_CLERK_IS_SATELLITE='true'`; -======= - e.g. export default authMiddleware({signInUrl:'SOME_URL', isSatellite:true}); -2) With environment variables e.g. - NEXT_PUBLIC_CLERK_SIGN_IN_URL='SOME_URL' - NEXT_PUBLIC_CLERK_IS_SATELLITE='true'`; ->>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) function decorateAstroLocal(req: Request, context: APIContext, requestState: RequestState) { const { reason, message, status, token } = requestState; @@ -275,12 +233,7 @@ async function decorateRequest( /** * Populate every page with the authObject. This allows for SSR to work properly -<<<<<<< HEAD * without sucrificing DX and having developers wrap each page with a Layout that would handle this. -======= - * without the developer having to wrap manually each page with `ClerkLayout.astro` - * ^ ClerkLayout is still needed in order to populate the ssrState store, but it not responsible for passing the data to a page. ->>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) */ if (res.headers.get('content-type') === 'text/html') { const reader = res.body?.getReader(); @@ -359,11 +312,7 @@ const createMiddlewareRedirectToSignIn = ( }; }; -<<<<<<< HEAD // Handle errors thrown by redirectToSignIn() calls, -======= -// Handle errors thrown by protect() and redirectToSignIn() calls, ->>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) // as we want to align the APIs between middleware, pages and route handlers // Normally, middleware requires to explicitly return a response, but we want to // avoid discrepancies between the APIs as it's easy to miss the `return` statement @@ -388,4 +337,4 @@ const handleControlFlowErrors = ( default: throw e; } -}; +}; \ No newline at end of file diff --git a/packages/astro/src/server/get-auth.ts b/packages/astro/src/server/get-auth.ts index ad8ea2f43eb..cff0cb64372 100644 --- a/packages/astro/src/server/get-auth.ts +++ b/packages/astro/src/server/get-auth.ts @@ -55,22 +55,12 @@ export const createGetAuth = ({ noAuthStatusMessage }: { noAuthStatusMessage: st }; }; -<<<<<<< HEAD // TODO: Once docs for astro land, update the following message with this line // "For more details, see " const authAuthHeaderMissing = (helperName = 'auth') => `Clerk: ${helperName}() was called but Clerk can't detect usage of clerkMiddleware(). Please ensure that the clerkMiddleware() is used in your Astro Middleware. -======= -const authAuthHeaderMissing = (helperName = 'auth') => - `Clerk: ${helperName}() was called but Clerk can't detect usage of authMiddleware(). Please ensure the following: - - authMiddleware() is used in your Next.js Middleware. - - Your Middleware matcher is configured to match this route or page. - - If you are using the src directory, make sure the Middleware file is inside of it. - - For more details, see https://clerk.com/docs/quickstarts/get-started-with-nextjs ->>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) `; export const getAuth = createGetAuth({ noAuthStatusMessage: authAuthHeaderMissing('getAuth'), -}); +}); \ No newline at end of file From fbce381e284e27032058e59872b10f3fea3791cf Mon Sep 17 00:00:00 2001 From: panteliselef Date: Wed, 3 Jul 2024 17:29:05 +0300 Subject: [PATCH 07/13] chore(astro): Add jsdoc and todo comments --- .../interactive/OrganizationProfile.astro | 5 +---- .../interactive/OrganizationSwitcher.astro | 5 +---- .../astro-components/interactive/SignIn.astro | 9 +-------- .../astro-components/interactive/SignUp.astro | 9 +-------- .../interactive/UserButton.astro | 9 +-------- .../interactive/UserProfile.astro | 9 +-------- .../client/mount-clerk-astro-js-components.ts | 5 +---- .../src/internal/merge-env-vars-with-params.ts | 5 +---- .../src/internal/utils/loadClerkJSScript.ts | 5 +---- .../astro/src/internal/utils/versionSelector.ts | 9 +-------- packages/astro/src/server/route-matcher.ts | 12 +----------- .../src/server/server-redirect-with-auth.ts | 5 +---- packages/astro/src/stores/external.ts | 17 +---------------- 13 files changed, 13 insertions(+), 91 deletions(-) diff --git a/packages/astro/src/astro-components/interactive/OrganizationProfile.astro b/packages/astro/src/astro-components/interactive/OrganizationProfile.astro index 1a1371ed031..f8a38199ebd 100644 --- a/packages/astro/src/astro-components/interactive/OrganizationProfile.astro +++ b/packages/astro/src/astro-components/interactive/OrganizationProfile.astro @@ -14,14 +14,11 @@ const props = {

+ \ No newline at end of file diff --git a/packages/astro/src/astro-components/interactive/OrganizationSwitcher.astro b/packages/astro/src/astro-components/interactive/OrganizationSwitcher.astro index 5aca8237e14..a22c0823b85 100644 --- a/packages/astro/src/astro-components/interactive/OrganizationSwitcher.astro +++ b/packages/astro/src/astro-components/interactive/OrganizationSwitcher.astro @@ -14,14 +14,11 @@ const props = {
+ \ No newline at end of file diff --git a/packages/astro/src/astro-components/interactive/SignIn.astro b/packages/astro/src/astro-components/interactive/SignIn.astro index 8433bb7e232..8b626e221a4 100644 --- a/packages/astro/src/astro-components/interactive/SignIn.astro +++ b/packages/astro/src/astro-components/interactive/SignIn.astro @@ -14,14 +14,11 @@ const props = {
-======= - ->>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) + \ No newline at end of file diff --git a/packages/astro/src/astro-components/interactive/SignUp.astro b/packages/astro/src/astro-components/interactive/SignUp.astro index a8ba78a7502..1eef4fb9fb1 100644 --- a/packages/astro/src/astro-components/interactive/SignUp.astro +++ b/packages/astro/src/astro-components/interactive/SignUp.astro @@ -14,14 +14,11 @@ const props = {
-======= - ->>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) + \ No newline at end of file diff --git a/packages/astro/src/astro-components/interactive/UserButton.astro b/packages/astro/src/astro-components/interactive/UserButton.astro index 73f14fa6c83..1ec10d1d294 100644 --- a/packages/astro/src/astro-components/interactive/UserButton.astro +++ b/packages/astro/src/astro-components/interactive/UserButton.astro @@ -10,14 +10,11 @@ const safeId = customAlphabet(urlAlphabet, 10)();
-======= - ->>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) + \ No newline at end of file diff --git a/packages/astro/src/astro-components/interactive/UserProfile.astro b/packages/astro/src/astro-components/interactive/UserProfile.astro index a74b508fe0b..44470d3a41c 100644 --- a/packages/astro/src/astro-components/interactive/UserProfile.astro +++ b/packages/astro/src/astro-components/interactive/UserProfile.astro @@ -10,14 +10,11 @@ const safeId = customAlphabet(urlAlphabet, 10)();
-======= - ->>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) + \ No newline at end of file diff --git a/packages/astro/src/client/mount-clerk-astro-js-components.ts b/packages/astro/src/client/mount-clerk-astro-js-components.ts index 0a401cff90f..d1d65782825 100644 --- a/packages/astro/src/client/mount-clerk-astro-js-components.ts +++ b/packages/astro/src/client/mount-clerk-astro-js-components.ts @@ -1,11 +1,8 @@ import { $clerk } from '../stores/internal'; -<<<<<<< HEAD /** * Loop through any Astro component that has requested to mount a UI component and mount it with its respective props. */ -======= ->>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) const mountAllClerkAstroJSComponents = () => { const mountFns = { 'organization-list': 'mountOrganizationList', @@ -28,4 +25,4 @@ const mountAllClerkAstroJSComponents = () => { }); }; -export { mountAllClerkAstroJSComponents }; +export { mountAllClerkAstroJSComponents }; \ No newline at end of file diff --git a/packages/astro/src/internal/merge-env-vars-with-params.ts b/packages/astro/src/internal/merge-env-vars-with-params.ts index 2c4b7621226..6f95fb19bec 100644 --- a/packages/astro/src/internal/merge-env-vars-with-params.ts +++ b/packages/astro/src/internal/merge-env-vars-with-params.ts @@ -1,11 +1,8 @@ import type { AstroClerkIntegrationParams } from '../types'; -<<<<<<< HEAD /** * @internal */ -======= ->>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) const mergeEnvVarsWithParams = (params?: AstroClerkIntegrationParams & { publishableKey?: string }) => { const { signInUrl: paramSignIn, @@ -28,4 +25,4 @@ const mergeEnvVarsWithParams = (params?: AstroClerkIntegrationParams & { publish }; }; -export { mergeEnvVarsWithParams }; +export { mergeEnvVarsWithParams }; \ No newline at end of file diff --git a/packages/astro/src/internal/utils/loadClerkJSScript.ts b/packages/astro/src/internal/utils/loadClerkJSScript.ts index 153b9630057..8f3b446d406 100644 --- a/packages/astro/src/internal/utils/loadClerkJSScript.ts +++ b/packages/astro/src/internal/utils/loadClerkJSScript.ts @@ -1,9 +1,6 @@ const FAILED_TO_FIND_CLERK_SCRIPT = 'Clerk: Failed find clerk-js script'; -<<<<<<< HEAD // TODO-SHARED: Something similar exists inside clerk-react -======= ->>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) export const waitForClerkScript = () => { return new Promise((resolve, reject) => { const script = document.querySelector('script[data-clerk-script]'); @@ -17,4 +14,4 @@ export const waitForClerkScript = () => { resolve(script); }); }); -}; +}; \ No newline at end of file diff --git a/packages/astro/src/internal/utils/versionSelector.ts b/packages/astro/src/internal/utils/versionSelector.ts index a2e444bff61..1fd0cd11e26 100644 --- a/packages/astro/src/internal/utils/versionSelector.ts +++ b/packages/astro/src/internal/utils/versionSelector.ts @@ -1,16 +1,9 @@ -<<<<<<< HEAD const HARDCODED_LATEST_CLERK_JS_VERSION = '5'; -======= ->>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) export const versionSelector = (clerkJSVersion: string | undefined): string => { if (clerkJSVersion) { return clerkJSVersion; } -<<<<<<< HEAD return HARDCODED_LATEST_CLERK_JS_VERSION; -======= - return '5'; ->>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) -}; +}; \ No newline at end of file diff --git a/packages/astro/src/server/route-matcher.ts b/packages/astro/src/server/route-matcher.ts index e3ba59d8fde..4a820926230 100644 --- a/packages/astro/src/server/route-matcher.ts +++ b/packages/astro/src/server/route-matcher.ts @@ -3,21 +3,11 @@ import { pathToRegexp } from 'path-to-regexp'; type WithPathPatternWildcard = `${T & string}(.*)`; -<<<<<<< HEAD type RouteMatcherRoutes = Autocomplete; export type RouteMatcherParam = Array | RegExp | RouteMatcherRoutes; // TODO-SHARED: This can be moved to @clerk/shared as an identical implementation exists in @clerk/nextjs -======= -type RouteMatcherWithNextTypedRoutes = Autocomplete; - -export type RouteMatcherParam = - | Array - | RegExp - | RouteMatcherWithNextTypedRoutes; - ->>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) /** * Returns a function that accepts a `Request` object and returns whether the request matches the list of * predefined routes that can be passed in as the first argument. @@ -46,4 +36,4 @@ export const paths = { ); } }, -}; +}; \ No newline at end of file diff --git a/packages/astro/src/server/server-redirect-with-auth.ts b/packages/astro/src/server/server-redirect-with-auth.ts index e33c2d01a3f..11267aefb17 100644 --- a/packages/astro/src/server/server-redirect-with-auth.ts +++ b/packages/astro/src/server/server-redirect-with-auth.ts @@ -6,10 +6,7 @@ import { DEV_BROWSER_JWT_KEY, isDevelopmentFromSecretKey, setDevBrowserJWTInURL import { getSafeEnv } from './get-safe-env'; import type { AstroMiddlewareContextParam } from './types'; -<<<<<<< HEAD // TODO-SHARED: This exists in @clerk/nextjs -======= ->>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) /** * Grabs the dev browser JWT from cookies and appends it to the redirect URL when redirecting to cross-origin. */ @@ -34,4 +31,4 @@ export const serverRedirectWithAuth = ( return context.redirect(urlWithDevBrowser.href, 307); } return res; -}; +}; \ No newline at end of file diff --git a/packages/astro/src/stores/external.ts b/packages/astro/src/stores/external.ts index 0cb1e27fe77..b6ee28bed61 100644 --- a/packages/astro/src/stores/external.ts +++ b/packages/astro/src/stores/external.ts @@ -3,7 +3,6 @@ import { computed } from 'nanostores'; import { $clerk, $csrState, $initialState } from './internal'; import { deriveState } from './utils'; -<<<<<<< HEAD /** * A client side store that is prepopulated with the authentication context during SSR. * It is a nanostore, for instructions on how to use nanostores please review the [documentation](https://github.com/nanostores/nanostores) @@ -13,8 +12,6 @@ import { deriveState } from './utils'; * * $authStore.subscribe((auth) => console.log(auth.userId)) */ -======= ->>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) export const $authStore = computed([$csrState, $initialState], (state, initialState) => { return deriveState( state.isLoaded, @@ -28,7 +25,6 @@ export const $authStore = computed([$csrState, $initialState], (state, initialSt ); }); -<<<<<<< HEAD /** * A client side store that is populated after clerk-js has loaded. * The store returns back the authenticated user or `null`. @@ -39,15 +35,12 @@ export const $authStore = computed([$csrState, $initialState], (state, initialSt * * $userStore.subscribe((user) => console.log(user.id)) */ -======= ->>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) export const $userStore = computed([$authStore], auth => auth.user); // TODO: on mounted subscriber log telemetry // onMount($userStore, () => { // // isomorphicClerk.telemetry?.record(eventMethodCalled('useSignIn')); // }); -<<<<<<< HEAD /** * A client side store that is populated after clerk-js has loaded. * The store returns the session of the authenticated user or `null`. @@ -130,12 +123,4 @@ export const $signInStore = computed([$clientStore], client => client?.signIn); * * $signUpStore.subscribe((signUp) => console.log(signUp.status)) */ -======= -export const $sessionStore = computed([$authStore], auth => auth.session); -export const $organizationStore = computed([$authStore], auth => auth.organization); -export const $clientStore = computed([$csrState], csr => csr.client); -export const $clerkStore = computed([$clerk], clerk => clerk); -export const $sessionListStore = computed([$clientStore], client => client?.sessions); -export const $signInStore = computed([$clientStore], client => client?.signIn); ->>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) -export const $signUpStore = computed([$clientStore], client => client?.signUp); +export const $signUpStore = computed([$clientStore], client => client?.signUp); \ No newline at end of file From 4dfc889bea94279661e5526eea78021b9befe07e Mon Sep 17 00:00:00 2001 From: panteliselef Date: Wed, 3 Jul 2024 17:48:28 +0300 Subject: [PATCH 08/13] chore(astro): Add jsdoc and todo comments --- packages/astro/src/client/run-once.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/astro/src/client/run-once.ts b/packages/astro/src/client/run-once.ts index 03e187b8619..2460642cb43 100644 --- a/packages/astro/src/client/run-once.ts +++ b/packages/astro/src/client/run-once.ts @@ -24,16 +24,12 @@ const runOnce = (onFirst: CreateClerkInstanceInternalFn) => { }); } /** -<<<<<<< HEAD * Probably html streaming has delayed the component from mounting immediately. * In Astro, js modules will start executing only after html streaming has ended. -======= - * Probably html streaming has delayed the component from mounting immediately ->>>>>>> 956f8a51b (feat(astro): Introduce Astro SDK) */ hasRun = true; return onFirst(params); }; }; -export { runOnce }; +export { runOnce }; \ No newline at end of file From 27594f0cec85e7630ea02f4d0a15e91df41be492 Mon Sep 17 00:00:00 2001 From: wobsoriano Date: Wed, 3 Jul 2024 15:39:04 -0700 Subject: [PATCH 09/13] chore(astro): remove duplicate logic in interactive components --- .../interactive/InteractiveUI.astro | 42 +++++++++++++++++++ .../interactive/OrganizationList.astro | 37 +--------------- .../interactive/OrganizationProfile.astro | 37 +--------------- .../interactive/OrganizationSwitcher.astro | 37 +--------------- .../astro-components/interactive/SignIn.astro | 40 ++---------------- .../astro-components/interactive/SignUp.astro | 39 ++--------------- .../interactive/UserButton.astro | 35 ++-------------- .../interactive/UserProfile.astro | 35 ++-------------- 8 files changed, 60 insertions(+), 242 deletions(-) create mode 100644 packages/astro/src/astro-components/interactive/InteractiveUI.astro diff --git a/packages/astro/src/astro-components/interactive/InteractiveUI.astro b/packages/astro/src/astro-components/interactive/InteractiveUI.astro new file mode 100644 index 00000000000..51fbe20e816 --- /dev/null +++ b/packages/astro/src/astro-components/interactive/InteractiveUI.astro @@ -0,0 +1,42 @@ +--- +interface Props { + [key: string]: unknown + component: 'sign-in' | 'sign-up' | 'organization-list' | 'organization-profile' | 'organization-switcher' | 'user-button' | 'user-profile' +} + +import { customAlphabet, urlAlphabet } from "nanoid"; + +const safeId = customAlphabet(urlAlphabet, 10)(); + +const props = { + ...Astro.props, +} +--- + +
+ + diff --git a/packages/astro/src/astro-components/interactive/OrganizationList.astro b/packages/astro/src/astro-components/interactive/OrganizationList.astro index 80f79607341..3bdd590480b 100644 --- a/packages/astro/src/astro-components/interactive/OrganizationList.astro +++ b/packages/astro/src/astro-components/interactive/OrganizationList.astro @@ -2,40 +2,7 @@ import type { OrganizationListProps } from "@clerk/types"; type Props = OrganizationListProps -import { customAlphabet, urlAlphabet } from "nanoid"; - -const safeId = customAlphabet(urlAlphabet, 10)(); - -const props = { - ...Astro.props, -} +import InteractiveUI from './InteractiveUI.astro' --- -
- - + diff --git a/packages/astro/src/astro-components/interactive/OrganizationProfile.astro b/packages/astro/src/astro-components/interactive/OrganizationProfile.astro index f8a38199ebd..a9d4e705008 100644 --- a/packages/astro/src/astro-components/interactive/OrganizationProfile.astro +++ b/packages/astro/src/astro-components/interactive/OrganizationProfile.astro @@ -2,40 +2,7 @@ import type { OrganizationProfileProps } from "@clerk/types"; type Props = OrganizationProfileProps -import { customAlphabet, urlAlphabet } from "nanoid"; - -const safeId = customAlphabet(urlAlphabet, 10)(); - -const props = { - ...Astro.props, -} +import InteractiveUI from './InteractiveUI.astro' --- -
- - \ No newline at end of file + \ No newline at end of file diff --git a/packages/astro/src/astro-components/interactive/OrganizationSwitcher.astro b/packages/astro/src/astro-components/interactive/OrganizationSwitcher.astro index a22c0823b85..312785e84aa 100644 --- a/packages/astro/src/astro-components/interactive/OrganizationSwitcher.astro +++ b/packages/astro/src/astro-components/interactive/OrganizationSwitcher.astro @@ -2,40 +2,7 @@ import type { OrganizationSwitcherProps } from "@clerk/types"; type Props = OrganizationSwitcherProps -import { customAlphabet, urlAlphabet } from "nanoid"; - -const safeId = customAlphabet(urlAlphabet, 10)(); - -const props = { - ...Astro.props, -} +import InteractiveUI from './InteractiveUI.astro' --- -
- - \ No newline at end of file + diff --git a/packages/astro/src/astro-components/interactive/SignIn.astro b/packages/astro/src/astro-components/interactive/SignIn.astro index 8b626e221a4..5db927a683e 100644 --- a/packages/astro/src/astro-components/interactive/SignIn.astro +++ b/packages/astro/src/astro-components/interactive/SignIn.astro @@ -1,42 +1,8 @@ --- import type { SignInProps } from "@clerk/types"; -type Props = SignInProps; +type Props = SignInProps -import { customAlphabet, urlAlphabet } from "nanoid"; - -const safeId = customAlphabet(urlAlphabet, 10)(); - -const props = { - ...Astro.props -} +import InteractiveUI from './InteractiveUI.astro' --- -
- - \ No newline at end of file + diff --git a/packages/astro/src/astro-components/interactive/SignUp.astro b/packages/astro/src/astro-components/interactive/SignUp.astro index 1eef4fb9fb1..f5e63d2005e 100644 --- a/packages/astro/src/astro-components/interactive/SignUp.astro +++ b/packages/astro/src/astro-components/interactive/SignUp.astro @@ -1,41 +1,8 @@ --- import type { SignUpProps } from "@clerk/types"; -type Props = SignUpProps; +type Props = SignUpProps -import { customAlphabet, urlAlphabet } from "nanoid"; - -const safeId = customAlphabet(urlAlphabet, 10)(); - -const props = { - ...Astro.props -} +import InteractiveUI from './InteractiveUI.astro' --- -
- - \ No newline at end of file + diff --git a/packages/astro/src/astro-components/interactive/UserButton.astro b/packages/astro/src/astro-components/interactive/UserButton.astro index 1ec10d1d294..6b45303ac4f 100644 --- a/packages/astro/src/astro-components/interactive/UserButton.astro +++ b/packages/astro/src/astro-components/interactive/UserButton.astro @@ -1,37 +1,8 @@ --- import type { UserButtonProps } from "@clerk/types"; -type Props = UserButtonProps; +type Props = UserButtonProps -import { customAlphabet, urlAlphabet } from "nanoid"; - -const safeId = customAlphabet(urlAlphabet, 10)(); +import InteractiveUI from './InteractiveUI.astro' --- -
- - \ No newline at end of file + diff --git a/packages/astro/src/astro-components/interactive/UserProfile.astro b/packages/astro/src/astro-components/interactive/UserProfile.astro index 44470d3a41c..566986c037b 100644 --- a/packages/astro/src/astro-components/interactive/UserProfile.astro +++ b/packages/astro/src/astro-components/interactive/UserProfile.astro @@ -1,37 +1,8 @@ --- import type { UserProfileProps } from "@clerk/types"; -type Props = UserProfileProps; +type Props = UserProfileProps -import { customAlphabet, urlAlphabet } from "nanoid"; - -const safeId = customAlphabet(urlAlphabet, 10)(); +import InteractiveUI from './InteractiveUI.astro' --- -
- - \ No newline at end of file + From 1f2c10464658edda1a0ccac0b6db53ef4e47d10b Mon Sep 17 00:00:00 2001 From: wobsoriano Date: Thu, 4 Jul 2024 08:02:12 -0700 Subject: [PATCH 10/13] chore(astro): fix merge conflicts --- .../react/OrganizationList.astro | 37 +++-------------- .../react/OrganizationProfile.astro | 37 +++-------------- .../react/OrganizationSwitcher.astro | 37 +++-------------- .../src/astro-components/react/Protect.astro | 19 +++++---- .../src/astro-components/react/SignIn.astro | 39 +++--------------- .../src/astro-components/react/SignUp.astro | 38 +++-------------- .../src/astro-components/react/SignedIn.astro | 7 ++-- .../astro-components/react/UserButton.astro | 40 ++++-------------- .../astro-components/react/UserProfile.astro | 41 +++++-------------- packages/astro/src/client/index.ts | 2 +- .../client/mount-clerk-astro-js-components.ts | 2 +- packages/astro/src/client/react/hooks.ts | 2 +- packages/astro/src/client/run-once.ts | 2 +- .../src/integration/create-integration.ts | 2 +- packages/astro/src/integration/index.ts | 2 +- .../internal/merge-env-vars-with-params.ts | 2 +- .../src/internal/utils/loadClerkJSScript.ts | 2 +- .../src/internal/utils/versionSelector.ts | 2 +- packages/astro/src/server/clerk-middleware.ts | 2 +- packages/astro/src/server/get-auth.ts | 2 +- packages/astro/src/server/route-matcher.ts | 2 +- .../src/server/server-redirect-with-auth.ts | 2 +- packages/astro/src/stores/external.ts | 2 +- packages/astro/src/stores/internal.ts | 2 +- 24 files changed, 79 insertions(+), 246 deletions(-) diff --git a/packages/astro/src/astro-components/react/OrganizationList.astro b/packages/astro/src/astro-components/react/OrganizationList.astro index d5165446419..d6d0aae2a4d 100644 --- a/packages/astro/src/astro-components/react/OrganizationList.astro +++ b/packages/astro/src/astro-components/react/OrganizationList.astro @@ -2,40 +2,15 @@ import type { OrganizationListProps } from "@clerk/types"; type Props = OrganizationListProps -import { customAlphabet, urlAlphabet } from "nanoid"; - -const safeId = customAlphabet(urlAlphabet, 10)(); +import type { AstroBuiltinProps } from 'astro'; +import { OrganizationList as OrganizationListReact } from "@clerk/astro/client/react"; const props = { ...Astro.props, } --- -
- - \ No newline at end of file + diff --git a/packages/astro/src/astro-components/react/OrganizationProfile.astro b/packages/astro/src/astro-components/react/OrganizationProfile.astro index f8a38199ebd..261fa459aa5 100644 --- a/packages/astro/src/astro-components/react/OrganizationProfile.astro +++ b/packages/astro/src/astro-components/react/OrganizationProfile.astro @@ -2,40 +2,15 @@ import type { OrganizationProfileProps } from "@clerk/types"; type Props = OrganizationProfileProps -import { customAlphabet, urlAlphabet } from "nanoid"; - -const safeId = customAlphabet(urlAlphabet, 10)(); +import type { AstroBuiltinProps } from 'astro'; +import { OrganizationProfile as OrganizationProfileReact } from "@clerk/astro/client/react"; const props = { ...Astro.props, } --- -
- - \ No newline at end of file + diff --git a/packages/astro/src/astro-components/react/OrganizationSwitcher.astro b/packages/astro/src/astro-components/react/OrganizationSwitcher.astro index a22c0823b85..b8efae096e2 100644 --- a/packages/astro/src/astro-components/react/OrganizationSwitcher.astro +++ b/packages/astro/src/astro-components/react/OrganizationSwitcher.astro @@ -2,40 +2,15 @@ import type { OrganizationSwitcherProps } from "@clerk/types"; type Props = OrganizationSwitcherProps -import { customAlphabet, urlAlphabet } from "nanoid"; - -const safeId = customAlphabet(urlAlphabet, 10)(); +import type { AstroBuiltinProps } from 'astro'; +import { OrganizationSwitcher as OrganizationSwitcherReact } from "@clerk/astro/client/react"; const props = { ...Astro.props, } --- -
- - \ No newline at end of file + diff --git a/packages/astro/src/astro-components/react/Protect.astro b/packages/astro/src/astro-components/react/Protect.astro index 316c3366dbe..d3e18f7492e 100644 --- a/packages/astro/src/astro-components/react/Protect.astro +++ b/packages/astro/src/astro-components/react/Protect.astro @@ -1,13 +1,16 @@ --- -import { ProtectComponentDefaultProps } from "../../types"; +import type { ProtectComponentDefaultProps } from "../../types"; type Props = ProtectComponentDefaultProps +import { Protect as ProtectReact } from "@clerk/astro/client/react"; -const { has, userId } = Astro.locals.auth(); -const isUnauthorized = - !userId || - (typeof Astro.props.condition === "function" && - !Astro.props.condition(has)) || - ((Astro.props.role || Astro.props.permission) && !has(Astro.props)); +const props = { + ...Astro.props, +} --- -{isUnauthorized ? : } \ No newline at end of file + + + + + + diff --git a/packages/astro/src/astro-components/react/SignIn.astro b/packages/astro/src/astro-components/react/SignIn.astro index 8b626e221a4..5fe14ddf570 100644 --- a/packages/astro/src/astro-components/react/SignIn.astro +++ b/packages/astro/src/astro-components/react/SignIn.astro @@ -1,42 +1,15 @@ --- import type { SignInProps } from "@clerk/types"; -type Props = SignInProps; +type Props = SignInProps -import { customAlphabet, urlAlphabet } from "nanoid"; - -const safeId = customAlphabet(urlAlphabet, 10)(); +import { SignIn as SignInReact } from "@clerk/astro/client/react"; const props = { ...Astro.props } --- -
- - \ No newline at end of file + diff --git a/packages/astro/src/astro-components/react/SignUp.astro b/packages/astro/src/astro-components/react/SignUp.astro index 1eef4fb9fb1..ed7bf2dc67d 100644 --- a/packages/astro/src/astro-components/react/SignUp.astro +++ b/packages/astro/src/astro-components/react/SignUp.astro @@ -1,41 +1,15 @@ --- import type { SignUpProps } from "@clerk/types"; -type Props = SignUpProps; +type Props = SignUpProps -import { customAlphabet, urlAlphabet } from "nanoid"; - -const safeId = customAlphabet(urlAlphabet, 10)(); +import { SignUp as SignUpReact } from "@clerk/astro/client/react"; const props = { ...Astro.props } --- -
- - \ No newline at end of file + diff --git a/packages/astro/src/astro-components/react/SignedIn.astro b/packages/astro/src/astro-components/react/SignedIn.astro index c1657391909..c543dca99ca 100644 --- a/packages/astro/src/astro-components/react/SignedIn.astro +++ b/packages/astro/src/astro-components/react/SignedIn.astro @@ -1,6 +1,7 @@ --- -const { userId } = Astro.locals.auth() +import { SignedIn as SignedInReact } from "@clerk/astro/client/react"; --- - -{ userId ? : null } \ No newline at end of file + + + diff --git a/packages/astro/src/astro-components/react/UserButton.astro b/packages/astro/src/astro-components/react/UserButton.astro index 1ec10d1d294..0deff393bd7 100644 --- a/packages/astro/src/astro-components/react/UserButton.astro +++ b/packages/astro/src/astro-components/react/UserButton.astro @@ -1,37 +1,15 @@ --- import type { UserButtonProps } from "@clerk/types"; -type Props = UserButtonProps; +type Props = UserButtonProps -import { customAlphabet, urlAlphabet } from "nanoid"; +import { UserButton as UserButtonReact } from "@clerk/astro/client/react"; -const safeId = customAlphabet(urlAlphabet, 10)(); +const props = { + ...Astro.props, +} --- -
- - \ No newline at end of file + diff --git a/packages/astro/src/astro-components/react/UserProfile.astro b/packages/astro/src/astro-components/react/UserProfile.astro index 44470d3a41c..a836ed34d69 100644 --- a/packages/astro/src/astro-components/react/UserProfile.astro +++ b/packages/astro/src/astro-components/react/UserProfile.astro @@ -1,37 +1,16 @@ --- import type { UserProfileProps } from "@clerk/types"; -type Props = UserProfileProps; +type Props = UserProfileProps -import { customAlphabet, urlAlphabet } from "nanoid"; +import type { AstroBuiltinProps } from 'astro'; +import { UserProfile as UserProfileReact } from "@clerk/astro/client/react"; -const safeId = customAlphabet(urlAlphabet, 10)(); +const props = { + ...Astro.props, +} --- -
- - \ No newline at end of file + diff --git a/packages/astro/src/client/index.ts b/packages/astro/src/client/index.ts index 99c311c9401..ffe5b8c612b 100644 --- a/packages/astro/src/client/index.ts +++ b/packages/astro/src/client/index.ts @@ -56,4 +56,4 @@ export function updateClerkOptions(options: AstroClerkUpdateOptions) { options: { ...initOptions, ...options }, appearance: { ...initOptions?.appearance, ...options.appearance }, }); -} \ No newline at end of file +} diff --git a/packages/astro/src/client/mount-clerk-astro-js-components.ts b/packages/astro/src/client/mount-clerk-astro-js-components.ts index d1d65782825..035bd35ef53 100644 --- a/packages/astro/src/client/mount-clerk-astro-js-components.ts +++ b/packages/astro/src/client/mount-clerk-astro-js-components.ts @@ -25,4 +25,4 @@ const mountAllClerkAstroJSComponents = () => { }); }; -export { mountAllClerkAstroJSComponents }; \ No newline at end of file +export { mountAllClerkAstroJSComponents }; diff --git a/packages/astro/src/client/react/hooks.ts b/packages/astro/src/client/react/hooks.ts index 4feddacb1bc..f7b97e723d7 100644 --- a/packages/astro/src/client/react/hooks.ts +++ b/packages/astro/src/client/react/hooks.ts @@ -268,4 +268,4 @@ function useStore>(store: T): SV { */ return get(); }); -} \ No newline at end of file +} diff --git a/packages/astro/src/client/run-once.ts b/packages/astro/src/client/run-once.ts index 2460642cb43..11ec81768d3 100644 --- a/packages/astro/src/client/run-once.ts +++ b/packages/astro/src/client/run-once.ts @@ -32,4 +32,4 @@ const runOnce = (onFirst: CreateClerkInstanceInternalFn) => { }; }; -export { runOnce }; \ No newline at end of file +export { runOnce }; diff --git a/packages/astro/src/integration/create-integration.ts b/packages/astro/src/integration/create-integration.ts index fb90162b9b3..112f354ac94 100644 --- a/packages/astro/src/integration/create-integration.ts +++ b/packages/astro/src/integration/create-integration.ts @@ -118,4 +118,4 @@ function createIntegration

({ mode }: }; } -export { createIntegration }; \ No newline at end of file +export { createIntegration }; diff --git a/packages/astro/src/integration/index.ts b/packages/astro/src/integration/index.ts index edbd9aaa934..77f3eaaa6b7 100644 --- a/packages/astro/src/integration/index.ts +++ b/packages/astro/src/integration/index.ts @@ -2,4 +2,4 @@ import { createIntegration } from './create-integration'; export default createIntegration({ mode: 'hotload', -}); \ No newline at end of file +}); diff --git a/packages/astro/src/internal/merge-env-vars-with-params.ts b/packages/astro/src/internal/merge-env-vars-with-params.ts index 6f95fb19bec..b8aebfa02fc 100644 --- a/packages/astro/src/internal/merge-env-vars-with-params.ts +++ b/packages/astro/src/internal/merge-env-vars-with-params.ts @@ -25,4 +25,4 @@ const mergeEnvVarsWithParams = (params?: AstroClerkIntegrationParams & { publish }; }; -export { mergeEnvVarsWithParams }; \ No newline at end of file +export { mergeEnvVarsWithParams }; diff --git a/packages/astro/src/internal/utils/loadClerkJSScript.ts b/packages/astro/src/internal/utils/loadClerkJSScript.ts index 8f3b446d406..6d250441339 100644 --- a/packages/astro/src/internal/utils/loadClerkJSScript.ts +++ b/packages/astro/src/internal/utils/loadClerkJSScript.ts @@ -14,4 +14,4 @@ export const waitForClerkScript = () => { resolve(script); }); }); -}; \ No newline at end of file +}; diff --git a/packages/astro/src/internal/utils/versionSelector.ts b/packages/astro/src/internal/utils/versionSelector.ts index 1fd0cd11e26..12b8d4c2fdd 100644 --- a/packages/astro/src/internal/utils/versionSelector.ts +++ b/packages/astro/src/internal/utils/versionSelector.ts @@ -6,4 +6,4 @@ export const versionSelector = (clerkJSVersion: string | undefined): string => { } return HARDCODED_LATEST_CLERK_JS_VERSION; -}; \ No newline at end of file +}; diff --git a/packages/astro/src/server/clerk-middleware.ts b/packages/astro/src/server/clerk-middleware.ts index 8d2dbe46b87..6991c9b732e 100644 --- a/packages/astro/src/server/clerk-middleware.ts +++ b/packages/astro/src/server/clerk-middleware.ts @@ -337,4 +337,4 @@ const handleControlFlowErrors = ( default: throw e; } -}; \ No newline at end of file +}; diff --git a/packages/astro/src/server/get-auth.ts b/packages/astro/src/server/get-auth.ts index cff0cb64372..49d66936fe5 100644 --- a/packages/astro/src/server/get-auth.ts +++ b/packages/astro/src/server/get-auth.ts @@ -63,4 +63,4 @@ const authAuthHeaderMissing = (helperName = 'auth') => export const getAuth = createGetAuth({ noAuthStatusMessage: authAuthHeaderMissing('getAuth'), -}); \ No newline at end of file +}); diff --git a/packages/astro/src/server/route-matcher.ts b/packages/astro/src/server/route-matcher.ts index 4a820926230..c0cfced19da 100644 --- a/packages/astro/src/server/route-matcher.ts +++ b/packages/astro/src/server/route-matcher.ts @@ -36,4 +36,4 @@ export const paths = { ); } }, -}; \ No newline at end of file +}; diff --git a/packages/astro/src/server/server-redirect-with-auth.ts b/packages/astro/src/server/server-redirect-with-auth.ts index 11267aefb17..38d8c33523b 100644 --- a/packages/astro/src/server/server-redirect-with-auth.ts +++ b/packages/astro/src/server/server-redirect-with-auth.ts @@ -31,4 +31,4 @@ export const serverRedirectWithAuth = ( return context.redirect(urlWithDevBrowser.href, 307); } return res; -}; \ No newline at end of file +}; diff --git a/packages/astro/src/stores/external.ts b/packages/astro/src/stores/external.ts index b6ee28bed61..1f129ee2f7c 100644 --- a/packages/astro/src/stores/external.ts +++ b/packages/astro/src/stores/external.ts @@ -123,4 +123,4 @@ export const $signInStore = computed([$clientStore], client => client?.signIn); * * $signUpStore.subscribe((signUp) => console.log(signUp.status)) */ -export const $signUpStore = computed([$clientStore], client => client?.signUp); \ No newline at end of file +export const $signUpStore = computed([$clientStore], client => client?.signUp); diff --git a/packages/astro/src/stores/internal.ts b/packages/astro/src/stores/internal.ts index f42c3255b28..2ac76f464f0 100644 --- a/packages/astro/src/stores/internal.ts +++ b/packages/astro/src/stores/internal.ts @@ -25,4 +25,4 @@ export const $csrState = map<{ export const $initialState = map(); // Use atom instead of `map` to prohibit key changes and allow only replacing the whole object -export const $clerk = atom(null); \ No newline at end of file +export const $clerk = atom(null); From db74a37bb9a661f30c9e01388d764e096a883866 Mon Sep 17 00:00:00 2001 From: Robert Soriano Date: Fri, 5 Jul 2024 09:27:06 -0700 Subject: [PATCH 11/13] chore(astro): add changeset --- .changeset/metal-weeks-dress.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/metal-weeks-dress.md diff --git a/.changeset/metal-weeks-dress.md b/.changeset/metal-weeks-dress.md new file mode 100644 index 00000000000..970638ce6ff --- /dev/null +++ b/.changeset/metal-weeks-dress.md @@ -0,0 +1,5 @@ +--- +"@clerk/astro": patch +--- + +Introduce a shared component for interactive components that handles UI mounting From 067c7285ab21174e4ada88734dda011b3e44f7d1 Mon Sep 17 00:00:00 2001 From: wobsoriano Date: Fri, 5 Jul 2024 12:15:31 -0700 Subject: [PATCH 12/13] chore(astro): use data attributes for UI elements --- .../astro-components/interactive/InteractiveUI.astro | 12 +++++------- .../src/client/mount-clerk-astro-js-components.ts | 5 +++-- 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/packages/astro/src/astro-components/interactive/InteractiveUI.astro b/packages/astro/src/astro-components/interactive/InteractiveUI.astro index 51fbe20e816..d0e89ccc541 100644 --- a/packages/astro/src/astro-components/interactive/InteractiveUI.astro +++ b/packages/astro/src/astro-components/interactive/InteractiveUI.astro @@ -8,14 +8,12 @@ import { customAlphabet, urlAlphabet } from "nanoid"; const safeId = customAlphabet(urlAlphabet, 10)(); -const props = { - ...Astro.props, -} +const { component, ...props } = Astro.props --- -

+
- diff --git a/packages/astro/src/client/mount-clerk-astro-js-components.ts b/packages/astro/src/client/mount-clerk-astro-js-components.ts index 035bd35ef53..ba050907734 100644 --- a/packages/astro/src/client/mount-clerk-astro-js-components.ts +++ b/packages/astro/src/client/mount-clerk-astro-js-components.ts @@ -15,9 +15,10 @@ const mountAllClerkAstroJSComponents = () => { } as const; Object.entries(mountFns).forEach(([category, mountFn]) => { - const elementsOfCategory = document.querySelectorAll(`[id^="clerk-${category}"]`); + const elementsOfCategory = document.querySelectorAll(`[data-clerk-id^="clerk-${category}"]`); elementsOfCategory.forEach(el => { - const props = window.__astro_clerk_component_props?.get(category)?.get(el.id); + const clerkId = el.getAttribute('data-clerk-id'); + const props = window.__astro_clerk_component_props?.get(category)?.get(clerkId!); if (el) { $clerk.get()?.[mountFn](el as HTMLDivElement, props); } From 3205f2c60a7648fabafc835db67b0900003f018e Mon Sep 17 00:00:00 2001 From: wobsoriano Date: Fri, 5 Jul 2024 12:18:43 -0700 Subject: [PATCH 13/13] chore(astro): update internal interactive wrapper component name --- ...{InteractiveUI.astro => InternalUIComponentRenderer.astro} | 0 .../src/astro-components/interactive/OrganizationList.astro | 4 ++-- .../astro-components/interactive/OrganizationProfile.astro | 4 ++-- .../astro-components/interactive/OrganizationSwitcher.astro | 4 ++-- packages/astro/src/astro-components/interactive/SignIn.astro | 4 ++-- packages/astro/src/astro-components/interactive/SignUp.astro | 4 ++-- .../astro/src/astro-components/interactive/UserButton.astro | 4 ++-- .../astro/src/astro-components/interactive/UserProfile.astro | 4 ++-- 8 files changed, 14 insertions(+), 14 deletions(-) rename packages/astro/src/astro-components/interactive/{InteractiveUI.astro => InternalUIComponentRenderer.astro} (100%) diff --git a/packages/astro/src/astro-components/interactive/InteractiveUI.astro b/packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro similarity index 100% rename from packages/astro/src/astro-components/interactive/InteractiveUI.astro rename to packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro diff --git a/packages/astro/src/astro-components/interactive/OrganizationList.astro b/packages/astro/src/astro-components/interactive/OrganizationList.astro index 3bdd590480b..d5515f6c66a 100644 --- a/packages/astro/src/astro-components/interactive/OrganizationList.astro +++ b/packages/astro/src/astro-components/interactive/OrganizationList.astro @@ -2,7 +2,7 @@ import type { OrganizationListProps } from "@clerk/types"; type Props = OrganizationListProps -import InteractiveUI from './InteractiveUI.astro' +import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro' --- - + diff --git a/packages/astro/src/astro-components/interactive/OrganizationProfile.astro b/packages/astro/src/astro-components/interactive/OrganizationProfile.astro index a9d4e705008..b504c003180 100644 --- a/packages/astro/src/astro-components/interactive/OrganizationProfile.astro +++ b/packages/astro/src/astro-components/interactive/OrganizationProfile.astro @@ -2,7 +2,7 @@ import type { OrganizationProfileProps } from "@clerk/types"; type Props = OrganizationProfileProps -import InteractiveUI from './InteractiveUI.astro' +import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro' --- - \ No newline at end of file + diff --git a/packages/astro/src/astro-components/interactive/OrganizationSwitcher.astro b/packages/astro/src/astro-components/interactive/OrganizationSwitcher.astro index 312785e84aa..1a5cab8e11e 100644 --- a/packages/astro/src/astro-components/interactive/OrganizationSwitcher.astro +++ b/packages/astro/src/astro-components/interactive/OrganizationSwitcher.astro @@ -2,7 +2,7 @@ import type { OrganizationSwitcherProps } from "@clerk/types"; type Props = OrganizationSwitcherProps -import InteractiveUI from './InteractiveUI.astro' +import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro' --- - + diff --git a/packages/astro/src/astro-components/interactive/SignIn.astro b/packages/astro/src/astro-components/interactive/SignIn.astro index 5db927a683e..e4e2ab869f8 100644 --- a/packages/astro/src/astro-components/interactive/SignIn.astro +++ b/packages/astro/src/astro-components/interactive/SignIn.astro @@ -2,7 +2,7 @@ import type { SignInProps } from "@clerk/types"; type Props = SignInProps -import InteractiveUI from './InteractiveUI.astro' +import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro' --- - + diff --git a/packages/astro/src/astro-components/interactive/SignUp.astro b/packages/astro/src/astro-components/interactive/SignUp.astro index f5e63d2005e..50eaa548511 100644 --- a/packages/astro/src/astro-components/interactive/SignUp.astro +++ b/packages/astro/src/astro-components/interactive/SignUp.astro @@ -2,7 +2,7 @@ import type { SignUpProps } from "@clerk/types"; type Props = SignUpProps -import InteractiveUI from './InteractiveUI.astro' +import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro' --- - + diff --git a/packages/astro/src/astro-components/interactive/UserButton.astro b/packages/astro/src/astro-components/interactive/UserButton.astro index 6b45303ac4f..acda2cd9258 100644 --- a/packages/astro/src/astro-components/interactive/UserButton.astro +++ b/packages/astro/src/astro-components/interactive/UserButton.astro @@ -2,7 +2,7 @@ import type { UserButtonProps } from "@clerk/types"; type Props = UserButtonProps -import InteractiveUI from './InteractiveUI.astro' +import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro' --- - + diff --git a/packages/astro/src/astro-components/interactive/UserProfile.astro b/packages/astro/src/astro-components/interactive/UserProfile.astro index 566986c037b..1cf962e5d2a 100644 --- a/packages/astro/src/astro-components/interactive/UserProfile.astro +++ b/packages/astro/src/astro-components/interactive/UserProfile.astro @@ -2,7 +2,7 @@ import type { UserProfileProps } from "@clerk/types"; type Props = UserProfileProps -import InteractiveUI from './InteractiveUI.astro' +import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro' --- - +