feat(elements): Remove direct reliance on next and clerk-react by brkalow · Pull Request #4064 · clerk/javascript

brkalow · 2024-08-30T22:17:50Z

Description

Removes the direct dependency and reliance on next and clerk-react from @cerk/elements. This is a step to allowing elements to render in clerk-js. Also introduces ClerkHostRouterContext into @clerk/next's ClerkProvider. Elements will pull the router from the context.

Checklist

npm test runs as expected.
npm run build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

changeset-bot · 2024-08-30T22:17:55Z

🦋 Changeset detected

Latest commit: 0967c8a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 15 packages

Name	Type
@clerk/elements	Minor
@clerk/nextjs	Minor
@clerk/shared	Minor
@clerk/astro	Patch
@clerk/backend	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-js	Patch
@clerk/clerk-expo	Patch
@clerk/express	Patch
@clerk/fastify	Patch
@clerk/clerk-react	Patch
@clerk/remix	Patch
@clerk/clerk-sdk-node	Patch
@clerk/tanstack-start	Patch
@clerk/testing	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

brkalow · 2024-09-04T19:37:27Z

+// TODO: remove reliance on next-specific variables here
+export const SIGN_IN_DEFAULT_BASE_PATH = safeAccess(
+ () => process.env.CLERK_SIGN_IN_URL ?? process.env.NEXT_PUBLIC_CLERK_SIGN_IN_URL,
+ '/sign-in',
+);
+export const SIGN_UP_DEFAULT_BASE_PATH = safeAccess(
+ () => process.env.CLERK_SIGN_UP_URL ?? process.env.NEXT_PUBLIC_CLERK_SIGN_UP_URL,
+ '/sign-up',
+);


This realistically should be coming from the clerk provider / core clerk object instead of deriving it from environment variables. To maintain compat, I've just made this pull the env vars in a non-erroring way.

brkalow · 2024-09-04T19:37:54Z

+// The version that Next added support for the window.history.pushState and replaceState APIs.
+// ref: https://nextjs.org/blog/next-14-1#windowhistorypushstate-and-windowhistoryreplacestate
+export const NEXT_WINDOW_HISTORY_SUPPORT_VERSION = '14.1.0';
+
+/**
+ * Clerk router integration with Next.js's router.
+ */
+export const useNextRouter = (): ClerkHostRouter => {
+ const router = useRouter();
+ const pathname = usePathname();
+ // eslint-disable-next-line react-hooks/rules-of-hooks -- The order doesn't differ between renders as we're checking the execution environment.
+ const searchParams = typeof window === 'undefined' ? new URLSearchParams() : useSearchParams();
+
+ // The window.history APIs seem to prevent Next.js from triggering a full page re-render, allowing us to
+ // preserve internal state between steps.
+ const canUseWindowHistoryAPIs =
+ typeof window !== 'undefined' && window.next && window.next.version >= NEXT_WINDOW_HISTORY_SUPPORT_VERSION;
+
+ return {
+ mode: 'path',
+ name: 'NextRouter',
+ push: (path: string) => router.push(path),
+ replace: (path: string) =>
+ canUseWindowHistoryAPIs ? window.history.replaceState(null, '', path) : router.replace(path),
+ shallowPush(path: string) {
+ canUseWindowHistoryAPIs ? window.history.pushState(null, '', path) : router.push(path, {});
+ },
+ pathname: () => pathname,
+ searchParams: () => searchParams,
+ };
+};


I've shifted the useNextRouter() hook from elements into the Next SDK.

brkalow · 2024-09-04T19:38:19Z

+ router?: ClerkHostRouter;
 }) {
- const clerkRouter = createClerkRouter(router, basePath);
+ const hostRouter = useClerkHostRouter();


pull host router by default from the provider.

brkalow · 2024-09-04T19:39:20Z

- "@clerk/clerk-react": "^5.0.0",
 "@clerk/shared": "^2.0.0",
- "next": "^13.5.4 || ^14.0.3 || ^15.0.0-rc",


brkalow · 2024-08-30T22:17:50Z

Description

Removes the direct dependency and reliance on next and clerk-react from @cerk/elements. This is a step to allowing elements to render in clerk-js. Also introduces ClerkHostRouterContext into @clerk/next's ClerkProvider. Elements will pull the router from the context.

Checklist

npm test runs as expected.
npm run build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

changeset-bot · 2024-08-30T22:17:55Z

🦋 Changeset detected

Latest commit: 0967c8a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 15 packages

Name	Type
@clerk/elements	Minor
@clerk/nextjs	Minor
@clerk/shared	Minor
@clerk/astro	Patch
@clerk/backend	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-js	Patch
@clerk/clerk-expo	Patch
@clerk/express	Patch
@clerk/fastify	Patch
@clerk/clerk-react	Patch
@clerk/remix	Patch
@clerk/clerk-sdk-node	Patch
@clerk/tanstack-start	Patch
@clerk/testing	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

brkalow · 2024-09-04T19:37:27Z

+// TODO: remove reliance on next-specific variables here
+export const SIGN_IN_DEFAULT_BASE_PATH = safeAccess(
+ () => process.env.CLERK_SIGN_IN_URL ?? process.env.NEXT_PUBLIC_CLERK_SIGN_IN_URL,
+ '/sign-in',
+);
+export const SIGN_UP_DEFAULT_BASE_PATH = safeAccess(
+ () => process.env.CLERK_SIGN_UP_URL ?? process.env.NEXT_PUBLIC_CLERK_SIGN_UP_URL,
+ '/sign-up',
+);


This realistically should be coming from the clerk provider / core clerk object instead of deriving it from environment variables. To maintain compat, I've just made this pull the env vars in a non-erroring way.

brkalow · 2024-09-04T19:37:54Z

+// The version that Next added support for the window.history.pushState and replaceState APIs.
+// ref: https://nextjs.org/blog/next-14-1#windowhistorypushstate-and-windowhistoryreplacestate
+export const NEXT_WINDOW_HISTORY_SUPPORT_VERSION = '14.1.0';
+
+/**
+ * Clerk router integration with Next.js's router.
+ */
+export const useNextRouter = (): ClerkHostRouter => {
+ const router = useRouter();
+ const pathname = usePathname();
+ // eslint-disable-next-line react-hooks/rules-of-hooks -- The order doesn't differ between renders as we're checking the execution environment.
+ const searchParams = typeof window === 'undefined' ? new URLSearchParams() : useSearchParams();
+
+ // The window.history APIs seem to prevent Next.js from triggering a full page re-render, allowing us to
+ // preserve internal state between steps.
+ const canUseWindowHistoryAPIs =
+ typeof window !== 'undefined' && window.next && window.next.version >= NEXT_WINDOW_HISTORY_SUPPORT_VERSION;
+
+ return {
+ mode: 'path',
+ name: 'NextRouter',
+ push: (path: string) => router.push(path),
+ replace: (path: string) =>
+ canUseWindowHistoryAPIs ? window.history.replaceState(null, '', path) : router.replace(path),
+ shallowPush(path: string) {
+ canUseWindowHistoryAPIs ? window.history.pushState(null, '', path) : router.push(path, {});
+ },
+ pathname: () => pathname,
+ searchParams: () => searchParams,
+ };
+};


I've shifted the useNextRouter() hook from elements into the Next SDK.

brkalow · 2024-09-04T19:38:19Z

+ router?: ClerkHostRouter;
 }) {
- const clerkRouter = createClerkRouter(router, basePath);
+ const hostRouter = useClerkHostRouter();


pull host router by default from the provider.

brkalow · 2024-09-04T19:39:20Z

- "@clerk/clerk-react": "^5.0.0",
 "@clerk/shared": "^2.0.0",
- "next": "^13.5.4 || ^14.0.3 || ^15.0.0-rc",


brkalow · 2024-08-30T22:17:50Z

Description

Removes the direct dependency and reliance on next and clerk-react from @cerk/elements. This is a step to allowing elements to render in clerk-js. Also introduces ClerkHostRouterContext into @clerk/next's ClerkProvider. Elements will pull the router from the context.

Checklist

npm test runs as expected.
npm run build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

changeset-bot · 2024-08-30T22:17:55Z

🦋 Changeset detected

Latest commit: 0967c8a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 15 packages

Name	Type
@clerk/elements	Minor
@clerk/nextjs	Minor
@clerk/shared	Minor
@clerk/astro	Patch
@clerk/backend	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-js	Patch
@clerk/clerk-expo	Patch
@clerk/express	Patch
@clerk/fastify	Patch
@clerk/clerk-react	Patch
@clerk/remix	Patch
@clerk/clerk-sdk-node	Patch
@clerk/tanstack-start	Patch
@clerk/testing	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

brkalow · 2024-09-04T19:37:27Z

+// TODO: remove reliance on next-specific variables here
+export const SIGN_IN_DEFAULT_BASE_PATH = safeAccess(
+ () => process.env.CLERK_SIGN_IN_URL ?? process.env.NEXT_PUBLIC_CLERK_SIGN_IN_URL,
+ '/sign-in',
+);
+export const SIGN_UP_DEFAULT_BASE_PATH = safeAccess(
+ () => process.env.CLERK_SIGN_UP_URL ?? process.env.NEXT_PUBLIC_CLERK_SIGN_UP_URL,
+ '/sign-up',
+);


This realistically should be coming from the clerk provider / core clerk object instead of deriving it from environment variables. To maintain compat, I've just made this pull the env vars in a non-erroring way.

brkalow · 2024-09-04T19:37:54Z

+// The version that Next added support for the window.history.pushState and replaceState APIs.
+// ref: https://nextjs.org/blog/next-14-1#windowhistorypushstate-and-windowhistoryreplacestate
+export const NEXT_WINDOW_HISTORY_SUPPORT_VERSION = '14.1.0';
+
+/**
+ * Clerk router integration with Next.js's router.
+ */
+export const useNextRouter = (): ClerkHostRouter => {
+ const router = useRouter();
+ const pathname = usePathname();
+ // eslint-disable-next-line react-hooks/rules-of-hooks -- The order doesn't differ between renders as we're checking the execution environment.
+ const searchParams = typeof window === 'undefined' ? new URLSearchParams() : useSearchParams();
+
+ // The window.history APIs seem to prevent Next.js from triggering a full page re-render, allowing us to
+ // preserve internal state between steps.
+ const canUseWindowHistoryAPIs =
+ typeof window !== 'undefined' && window.next && window.next.version >= NEXT_WINDOW_HISTORY_SUPPORT_VERSION;
+
+ return {
+ mode: 'path',
+ name: 'NextRouter',
+ push: (path: string) => router.push(path),
+ replace: (path: string) =>
+ canUseWindowHistoryAPIs ? window.history.replaceState(null, '', path) : router.replace(path),
+ shallowPush(path: string) {
+ canUseWindowHistoryAPIs ? window.history.pushState(null, '', path) : router.push(path, {});
+ },
+ pathname: () => pathname,
+ searchParams: () => searchParams,
+ };
+};


I've shifted the useNextRouter() hook from elements into the Next SDK.

brkalow · 2024-09-04T19:38:19Z

+ router?: ClerkHostRouter;
 }) {
- const clerkRouter = createClerkRouter(router, basePath);
+ const hostRouter = useClerkHostRouter();


pull host router by default from the provider.

brkalow · 2024-09-04T19:39:20Z

- "@clerk/clerk-react": "^5.0.0",
 "@clerk/shared": "^2.0.0",
- "next": "^13.5.4 || ^14.0.3 || ^15.0.0-rc",


brkalow · 2024-08-30T22:17:50Z

Description

Removes the direct dependency and reliance on next and clerk-react from @cerk/elements. This is a step to allowing elements to render in clerk-js. Also introduces ClerkHostRouterContext into @clerk/next's ClerkProvider. Elements will pull the router from the context.

Checklist

npm test runs as expected.
npm run build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

changeset-bot · 2024-08-30T22:17:55Z

🦋 Changeset detected

Latest commit: 0967c8a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 15 packages

Name	Type
@clerk/elements	Minor
@clerk/nextjs	Minor
@clerk/shared	Minor
@clerk/astro	Patch
@clerk/backend	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-js	Patch
@clerk/clerk-expo	Patch
@clerk/express	Patch
@clerk/fastify	Patch
@clerk/clerk-react	Patch
@clerk/remix	Patch
@clerk/clerk-sdk-node	Patch
@clerk/tanstack-start	Patch
@clerk/testing	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

brkalow · 2024-09-04T19:37:27Z

+// TODO: remove reliance on next-specific variables here
+export const SIGN_IN_DEFAULT_BASE_PATH = safeAccess(
+ () => process.env.CLERK_SIGN_IN_URL ?? process.env.NEXT_PUBLIC_CLERK_SIGN_IN_URL,
+ '/sign-in',
+);
+export const SIGN_UP_DEFAULT_BASE_PATH = safeAccess(
+ () => process.env.CLERK_SIGN_UP_URL ?? process.env.NEXT_PUBLIC_CLERK_SIGN_UP_URL,
+ '/sign-up',
+);


This realistically should be coming from the clerk provider / core clerk object instead of deriving it from environment variables. To maintain compat, I've just made this pull the env vars in a non-erroring way.

brkalow · 2024-09-04T19:37:54Z

+// The version that Next added support for the window.history.pushState and replaceState APIs.
+// ref: https://nextjs.org/blog/next-14-1#windowhistorypushstate-and-windowhistoryreplacestate
+export const NEXT_WINDOW_HISTORY_SUPPORT_VERSION = '14.1.0';
+
+/**
+ * Clerk router integration with Next.js's router.
+ */
+export const useNextRouter = (): ClerkHostRouter => {
+ const router = useRouter();
+ const pathname = usePathname();
+ // eslint-disable-next-line react-hooks/rules-of-hooks -- The order doesn't differ between renders as we're checking the execution environment.
+ const searchParams = typeof window === 'undefined' ? new URLSearchParams() : useSearchParams();
+
+ // The window.history APIs seem to prevent Next.js from triggering a full page re-render, allowing us to
+ // preserve internal state between steps.
+ const canUseWindowHistoryAPIs =
+ typeof window !== 'undefined' && window.next && window.next.version >= NEXT_WINDOW_HISTORY_SUPPORT_VERSION;
+
+ return {
+ mode: 'path',
+ name: 'NextRouter',
+ push: (path: string) => router.push(path),
+ replace: (path: string) =>
+ canUseWindowHistoryAPIs ? window.history.replaceState(null, '', path) : router.replace(path),
+ shallowPush(path: string) {
+ canUseWindowHistoryAPIs ? window.history.pushState(null, '', path) : router.push(path, {});
+ },
+ pathname: () => pathname,
+ searchParams: () => searchParams,
+ };
+};


I've shifted the useNextRouter() hook from elements into the Next SDK.

brkalow · 2024-09-04T19:38:19Z

+ router?: ClerkHostRouter;
 }) {
- const clerkRouter = createClerkRouter(router, basePath);
+ const hostRouter = useClerkHostRouter();


pull host router by default from the provider.

brkalow · 2024-09-04T19:39:20Z

- "@clerk/clerk-react": "^5.0.0",
 "@clerk/shared": "^2.0.0",
- "next": "^13.5.4 || ^14.0.3 || ^15.0.0-rc",


brkalow · 2024-08-30T22:17:50Z

Description

Removes the direct dependency and reliance on next and clerk-react from @cerk/elements. This is a step to allowing elements to render in clerk-js. Also introduces ClerkHostRouterContext into @clerk/next's ClerkProvider. Elements will pull the router from the context.

Checklist

npm test runs as expected.
npm run build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

changeset-bot · 2024-08-30T22:17:55Z

🦋 Changeset detected

Latest commit: 0967c8a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 15 packages

Name	Type
@clerk/elements	Minor
@clerk/nextjs	Minor
@clerk/shared	Minor
@clerk/astro	Patch
@clerk/backend	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-js	Patch
@clerk/clerk-expo	Patch
@clerk/express	Patch
@clerk/fastify	Patch
@clerk/clerk-react	Patch
@clerk/remix	Patch
@clerk/clerk-sdk-node	Patch
@clerk/tanstack-start	Patch
@clerk/testing	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

brkalow · 2024-09-04T19:37:27Z

+// TODO: remove reliance on next-specific variables here
+export const SIGN_IN_DEFAULT_BASE_PATH = safeAccess(
+ () => process.env.CLERK_SIGN_IN_URL ?? process.env.NEXT_PUBLIC_CLERK_SIGN_IN_URL,
+ '/sign-in',
+);
+export const SIGN_UP_DEFAULT_BASE_PATH = safeAccess(
+ () => process.env.CLERK_SIGN_UP_URL ?? process.env.NEXT_PUBLIC_CLERK_SIGN_UP_URL,
+ '/sign-up',
+);


This realistically should be coming from the clerk provider / core clerk object instead of deriving it from environment variables. To maintain compat, I've just made this pull the env vars in a non-erroring way.

brkalow · 2024-09-04T19:37:54Z

+// The version that Next added support for the window.history.pushState and replaceState APIs.
+// ref: https://nextjs.org/blog/next-14-1#windowhistorypushstate-and-windowhistoryreplacestate
+export const NEXT_WINDOW_HISTORY_SUPPORT_VERSION = '14.1.0';
+
+/**
+ * Clerk router integration with Next.js's router.
+ */
+export const useNextRouter = (): ClerkHostRouter => {
+ const router = useRouter();
+ const pathname = usePathname();
+ // eslint-disable-next-line react-hooks/rules-of-hooks -- The order doesn't differ between renders as we're checking the execution environment.
+ const searchParams = typeof window === 'undefined' ? new URLSearchParams() : useSearchParams();
+
+ // The window.history APIs seem to prevent Next.js from triggering a full page re-render, allowing us to
+ // preserve internal state between steps.
+ const canUseWindowHistoryAPIs =
+ typeof window !== 'undefined' && window.next && window.next.version >= NEXT_WINDOW_HISTORY_SUPPORT_VERSION;
+
+ return {
+ mode: 'path',
+ name: 'NextRouter',
+ push: (path: string) => router.push(path),
+ replace: (path: string) =>
+ canUseWindowHistoryAPIs ? window.history.replaceState(null, '', path) : router.replace(path),
+ shallowPush(path: string) {
+ canUseWindowHistoryAPIs ? window.history.pushState(null, '', path) : router.push(path, {});
+ },
+ pathname: () => pathname,
+ searchParams: () => searchParams,
+ };
+};


I've shifted the useNextRouter() hook from elements into the Next SDK.

brkalow · 2024-09-04T19:38:19Z

+ router?: ClerkHostRouter;
 }) {
- const clerkRouter = createClerkRouter(router, basePath);
+ const hostRouter = useClerkHostRouter();


pull host router by default from the provider.

brkalow · 2024-09-04T19:39:20Z

- "@clerk/clerk-react": "^5.0.0",
 "@clerk/shared": "^2.0.0",
- "next": "^13.5.4 || ^14.0.3 || ^15.0.0-rc",


brkalow · 2024-08-30T22:17:50Z

Description

Removes the direct dependency and reliance on next and clerk-react from @cerk/elements. This is a step to allowing elements to render in clerk-js. Also introduces ClerkHostRouterContext into @clerk/next's ClerkProvider. Elements will pull the router from the context.

Checklist

npm test runs as expected.
npm run build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

changeset-bot · 2024-08-30T22:17:55Z

🦋 Changeset detected

Latest commit: 0967c8a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 15 packages

Name	Type
@clerk/elements	Minor
@clerk/nextjs	Minor
@clerk/shared	Minor
@clerk/astro	Patch
@clerk/backend	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-js	Patch
@clerk/clerk-expo	Patch
@clerk/express	Patch
@clerk/fastify	Patch
@clerk/clerk-react	Patch
@clerk/remix	Patch
@clerk/clerk-sdk-node	Patch
@clerk/tanstack-start	Patch
@clerk/testing	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

brkalow · 2024-09-04T19:37:27Z

+// TODO: remove reliance on next-specific variables here
+export const SIGN_IN_DEFAULT_BASE_PATH = safeAccess(
+ () => process.env.CLERK_SIGN_IN_URL ?? process.env.NEXT_PUBLIC_CLERK_SIGN_IN_URL,
+ '/sign-in',
+);
+export const SIGN_UP_DEFAULT_BASE_PATH = safeAccess(
+ () => process.env.CLERK_SIGN_UP_URL ?? process.env.NEXT_PUBLIC_CLERK_SIGN_UP_URL,
+ '/sign-up',
+);


This realistically should be coming from the clerk provider / core clerk object instead of deriving it from environment variables. To maintain compat, I've just made this pull the env vars in a non-erroring way.

brkalow · 2024-09-04T19:37:54Z

+// The version that Next added support for the window.history.pushState and replaceState APIs.
+// ref: https://nextjs.org/blog/next-14-1#windowhistorypushstate-and-windowhistoryreplacestate
+export const NEXT_WINDOW_HISTORY_SUPPORT_VERSION = '14.1.0';
+
+/**
+ * Clerk router integration with Next.js's router.
+ */
+export const useNextRouter = (): ClerkHostRouter => {
+ const router = useRouter();
+ const pathname = usePathname();
+ // eslint-disable-next-line react-hooks/rules-of-hooks -- The order doesn't differ between renders as we're checking the execution environment.
+ const searchParams = typeof window === 'undefined' ? new URLSearchParams() : useSearchParams();
+
+ // The window.history APIs seem to prevent Next.js from triggering a full page re-render, allowing us to
+ // preserve internal state between steps.
+ const canUseWindowHistoryAPIs =
+ typeof window !== 'undefined' && window.next && window.next.version >= NEXT_WINDOW_HISTORY_SUPPORT_VERSION;
+
+ return {
+ mode: 'path',
+ name: 'NextRouter',
+ push: (path: string) => router.push(path),
+ replace: (path: string) =>
+ canUseWindowHistoryAPIs ? window.history.replaceState(null, '', path) : router.replace(path),
+ shallowPush(path: string) {
+ canUseWindowHistoryAPIs ? window.history.pushState(null, '', path) : router.push(path, {});
+ },
+ pathname: () => pathname,
+ searchParams: () => searchParams,
+ };
+};


I've shifted the useNextRouter() hook from elements into the Next SDK.

brkalow · 2024-09-04T19:38:19Z

+ router?: ClerkHostRouter;
 }) {
- const clerkRouter = createClerkRouter(router, basePath);
+ const hostRouter = useClerkHostRouter();


pull host router by default from the provider.

brkalow · 2024-09-04T19:39:20Z

- "@clerk/clerk-react": "^5.0.0",
 "@clerk/shared": "^2.0.0",
- "next": "^13.5.4 || ^14.0.3 || ^15.0.0-rc",


brkalow · 2024-08-30T22:17:50Z

Description

Removes the direct dependency and reliance on next and clerk-react from @cerk/elements. This is a step to allowing elements to render in clerk-js. Also introduces ClerkHostRouterContext into @clerk/next's ClerkProvider. Elements will pull the router from the context.

Checklist

npm test runs as expected.
npm run build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

changeset-bot · 2024-08-30T22:17:55Z

🦋 Changeset detected

Latest commit: 0967c8a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 15 packages

Name	Type
@clerk/elements	Minor
@clerk/nextjs	Minor
@clerk/shared	Minor
@clerk/astro	Patch
@clerk/backend	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-js	Patch
@clerk/clerk-expo	Patch
@clerk/express	Patch
@clerk/fastify	Patch
@clerk/clerk-react	Patch
@clerk/remix	Patch
@clerk/clerk-sdk-node	Patch
@clerk/tanstack-start	Patch
@clerk/testing	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

brkalow · 2024-09-04T19:37:27Z

+// TODO: remove reliance on next-specific variables here
+export const SIGN_IN_DEFAULT_BASE_PATH = safeAccess(
+ () => process.env.CLERK_SIGN_IN_URL ?? process.env.NEXT_PUBLIC_CLERK_SIGN_IN_URL,
+ '/sign-in',
+);
+export const SIGN_UP_DEFAULT_BASE_PATH = safeAccess(
+ () => process.env.CLERK_SIGN_UP_URL ?? process.env.NEXT_PUBLIC_CLERK_SIGN_UP_URL,
+ '/sign-up',
+);


This realistically should be coming from the clerk provider / core clerk object instead of deriving it from environment variables. To maintain compat, I've just made this pull the env vars in a non-erroring way.

brkalow · 2024-09-04T19:37:54Z

+// The version that Next added support for the window.history.pushState and replaceState APIs.
+// ref: https://nextjs.org/blog/next-14-1#windowhistorypushstate-and-windowhistoryreplacestate
+export const NEXT_WINDOW_HISTORY_SUPPORT_VERSION = '14.1.0';
+
+/**
+ * Clerk router integration with Next.js's router.
+ */
+export const useNextRouter = (): ClerkHostRouter => {
+ const router = useRouter();
+ const pathname = usePathname();
+ // eslint-disable-next-line react-hooks/rules-of-hooks -- The order doesn't differ between renders as we're checking the execution environment.
+ const searchParams = typeof window === 'undefined' ? new URLSearchParams() : useSearchParams();
+
+ // The window.history APIs seem to prevent Next.js from triggering a full page re-render, allowing us to
+ // preserve internal state between steps.
+ const canUseWindowHistoryAPIs =
+ typeof window !== 'undefined' && window.next && window.next.version >= NEXT_WINDOW_HISTORY_SUPPORT_VERSION;
+
+ return {
+ mode: 'path',
+ name: 'NextRouter',
+ push: (path: string) => router.push(path),
+ replace: (path: string) =>
+ canUseWindowHistoryAPIs ? window.history.replaceState(null, '', path) : router.replace(path),
+ shallowPush(path: string) {
+ canUseWindowHistoryAPIs ? window.history.pushState(null, '', path) : router.push(path, {});
+ },
+ pathname: () => pathname,
+ searchParams: () => searchParams,
+ };
+};


I've shifted the useNextRouter() hook from elements into the Next SDK.

brkalow · 2024-09-04T19:38:19Z

+ router?: ClerkHostRouter;
 }) {
- const clerkRouter = createClerkRouter(router, basePath);
+ const hostRouter = useClerkHostRouter();


pull host router by default from the provider.

brkalow · 2024-09-04T19:39:20Z

- "@clerk/clerk-react": "^5.0.0",
 "@clerk/shared": "^2.0.0",
- "next": "^13.5.4 || ^14.0.3 || ^15.0.0-rc",


brkalow · 2024-08-30T22:17:50Z

Description

Removes the direct dependency and reliance on next and clerk-react from @cerk/elements. This is a step to allowing elements to render in clerk-js. Also introduces ClerkHostRouterContext into @clerk/next's ClerkProvider. Elements will pull the router from the context.

Checklist

npm test runs as expected.
npm run build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

changeset-bot · 2024-08-30T22:17:55Z

🦋 Changeset detected

Latest commit: 0967c8a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 15 packages

Name	Type
@clerk/elements	Minor
@clerk/nextjs	Minor
@clerk/shared	Minor
@clerk/astro	Patch
@clerk/backend	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-js	Patch
@clerk/clerk-expo	Patch
@clerk/express	Patch
@clerk/fastify	Patch
@clerk/clerk-react	Patch
@clerk/remix	Patch
@clerk/clerk-sdk-node	Patch
@clerk/tanstack-start	Patch
@clerk/testing	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

brkalow · 2024-09-04T19:37:27Z

+// TODO: remove reliance on next-specific variables here
+export const SIGN_IN_DEFAULT_BASE_PATH = safeAccess(
+ () => process.env.CLERK_SIGN_IN_URL ?? process.env.NEXT_PUBLIC_CLERK_SIGN_IN_URL,
+ '/sign-in',
+);
+export const SIGN_UP_DEFAULT_BASE_PATH = safeAccess(
+ () => process.env.CLERK_SIGN_UP_URL ?? process.env.NEXT_PUBLIC_CLERK_SIGN_UP_URL,
+ '/sign-up',
+);


This realistically should be coming from the clerk provider / core clerk object instead of deriving it from environment variables. To maintain compat, I've just made this pull the env vars in a non-erroring way.

brkalow · 2024-09-04T19:37:54Z

+// The version that Next added support for the window.history.pushState and replaceState APIs.
+// ref: https://nextjs.org/blog/next-14-1#windowhistorypushstate-and-windowhistoryreplacestate
+export const NEXT_WINDOW_HISTORY_SUPPORT_VERSION = '14.1.0';
+
+/**
+ * Clerk router integration with Next.js's router.
+ */
+export const useNextRouter = (): ClerkHostRouter => {
+ const router = useRouter();
+ const pathname = usePathname();
+ // eslint-disable-next-line react-hooks/rules-of-hooks -- The order doesn't differ between renders as we're checking the execution environment.
+ const searchParams = typeof window === 'undefined' ? new URLSearchParams() : useSearchParams();
+
+ // The window.history APIs seem to prevent Next.js from triggering a full page re-render, allowing us to
+ // preserve internal state between steps.
+ const canUseWindowHistoryAPIs =
+ typeof window !== 'undefined' && window.next && window.next.version >= NEXT_WINDOW_HISTORY_SUPPORT_VERSION;
+
+ return {
+ mode: 'path',
+ name: 'NextRouter',
+ push: (path: string) => router.push(path),
+ replace: (path: string) =>
+ canUseWindowHistoryAPIs ? window.history.replaceState(null, '', path) : router.replace(path),
+ shallowPush(path: string) {
+ canUseWindowHistoryAPIs ? window.history.pushState(null, '', path) : router.push(path, {});
+ },
+ pathname: () => pathname,
+ searchParams: () => searchParams,
+ };
+};


I've shifted the useNextRouter() hook from elements into the Next SDK.

brkalow · 2024-09-04T19:38:19Z

+ router?: ClerkHostRouter;
 }) {
- const clerkRouter = createClerkRouter(router, basePath);
+ const hostRouter = useClerkHostRouter();


pull host router by default from the provider.

brkalow · 2024-09-04T19:39:20Z

- "@clerk/clerk-react": "^5.0.0",
 "@clerk/shared": "^2.0.0",
- "next": "^13.5.4 || ^14.0.3 || ^15.0.0-rc",


clerk-cookie added clerk-js nextjs elements and removed clerk-js labels Aug 30, 2024

brkalow commented Sep 4, 2024
View reviewed changes

Comment threadpackages/nextjs/src/app-router/client/ClerkProvider.tsx Outdated

brkalow marked this pull request as ready for review September 4, 2024 15:44

brkalow added 8 commits September 4, 2024 10:44

wip: elements rendering in clerk-js
358f30d

safely access env vars
8df5c46

Add ClerkHostRouter provider for elements usage in next.js
6323900

undo clerk-js change for now
234f0f5

adds changeset
cc4e2d1

Add missing contest, remove unused export
796465f

remove next as a peer dep
502bd8b

Update packages/nextjs/src/app-router/client/ClerkProvider.tsx
c5c5c9b

brkalow force-pushed the brk.feat/elements-remove-deps branch from cd8caf3 to c5c5c9bCompare September 4, 2024 15:51

lint fixes
0967c8a

brkalow requested review from alexcarpenter, dstaley and tmilewski September 4, 2024 19:36

brkalow commented Sep 4, 2024
View reviewed changes

tmilewski approved these changes Sep 4, 2024
View reviewed changes

brkalow merged commit 95ac67a into mainSep 4, 2024

brkalow deleted the brk.feat/elements-remove-deps branch September 4, 2024 20:35

wobsoriano pushed a commit that referenced this pull request Feb 8, 2025
feat(elements): Remove direct reliance on next and clerk-react (#4064)
7a00920

clerk-cookie added clerk-js nextjs elements and removed clerk-js labels Aug 30, 2024

brkalow commented Sep 4, 2024
View reviewed changes

Comment threadpackages/nextjs/src/app-router/client/ClerkProvider.tsx Outdated

brkalow marked this pull request as ready for review September 4, 2024 15:44

brkalow added 8 commits September 4, 2024 10:44

wip: elements rendering in clerk-js
358f30d

safely access env vars
8df5c46

Add ClerkHostRouter provider for elements usage in next.js
6323900

undo clerk-js change for now
234f0f5

adds changeset
cc4e2d1

Add missing contest, remove unused export
796465f

remove next as a peer dep
502bd8b

Update packages/nextjs/src/app-router/client/ClerkProvider.tsx
c5c5c9b

brkalow force-pushed the brk.feat/elements-remove-deps branch from cd8caf3 to c5c5c9bCompare September 4, 2024 15:51

lint fixes
0967c8a

brkalow requested review from alexcarpenter, dstaley and tmilewski September 4, 2024 19:36

brkalow commented Sep 4, 2024
View reviewed changes

tmilewski approved these changes Sep 4, 2024
View reviewed changes

brkalow merged commit 95ac67a into mainSep 4, 2024

brkalow deleted the brk.feat/elements-remove-deps branch September 4, 2024 20:35

wobsoriano pushed a commit that referenced this pull request Feb 8, 2025
feat(elements): Remove direct reliance on next and clerk-react (#4064)
7a00920

clerk-cookie added clerk-js nextjs elements and removed clerk-js labels Aug 30, 2024

brkalow commented Sep 4, 2024
View reviewed changes

Comment threadpackages/nextjs/src/app-router/client/ClerkProvider.tsx Outdated

brkalow marked this pull request as ready for review September 4, 2024 15:44

brkalow added 8 commits September 4, 2024 10:44

wip: elements rendering in clerk-js
358f30d

safely access env vars
8df5c46

Add ClerkHostRouter provider for elements usage in next.js
6323900

undo clerk-js change for now
234f0f5

adds changeset
cc4e2d1

Add missing contest, remove unused export
796465f

remove next as a peer dep
502bd8b

Update packages/nextjs/src/app-router/client/ClerkProvider.tsx
c5c5c9b

brkalow force-pushed the brk.feat/elements-remove-deps branch from cd8caf3 to c5c5c9bCompare September 4, 2024 15:51

lint fixes
0967c8a

brkalow requested review from alexcarpenter, dstaley and tmilewski September 4, 2024 19:36

brkalow commented Sep 4, 2024
View reviewed changes

tmilewski approved these changes Sep 4, 2024
View reviewed changes

brkalow merged commit 95ac67a into mainSep 4, 2024

brkalow deleted the brk.feat/elements-remove-deps branch September 4, 2024 20:35

wobsoriano pushed a commit that referenced this pull request Feb 8, 2025
feat(elements): Remove direct reliance on next and clerk-react (#4064)
7a00920

clerk-cookie added clerk-js nextjs elements and removed clerk-js labels Aug 30, 2024

brkalow commented Sep 4, 2024
View reviewed changes

Comment threadpackages/nextjs/src/app-router/client/ClerkProvider.tsx Outdated

brkalow marked this pull request as ready for review September 4, 2024 15:44

brkalow added 8 commits September 4, 2024 10:44

wip: elements rendering in clerk-js
358f30d

safely access env vars
8df5c46

Add ClerkHostRouter provider for elements usage in next.js
6323900

undo clerk-js change for now
234f0f5

adds changeset
cc4e2d1

Add missing contest, remove unused export
796465f

remove next as a peer dep
502bd8b

Update packages/nextjs/src/app-router/client/ClerkProvider.tsx
c5c5c9b

brkalow force-pushed the brk.feat/elements-remove-deps branch from cd8caf3 to c5c5c9bCompare September 4, 2024 15:51

lint fixes
0967c8a

brkalow requested review from alexcarpenter, dstaley and tmilewski September 4, 2024 19:36

brkalow commented Sep 4, 2024
View reviewed changes

tmilewski approved these changes Sep 4, 2024
View reviewed changes

brkalow merged commit 95ac67a into mainSep 4, 2024

brkalow deleted the brk.feat/elements-remove-deps branch September 4, 2024 20:35

wobsoriano pushed a commit that referenced this pull request Feb 8, 2025
feat(elements): Remove direct reliance on next and clerk-react (#4064)
7a00920

clerk-cookie added clerk-js nextjs elements and removed clerk-js labels Aug 30, 2024

brkalow commented Sep 4, 2024
View reviewed changes

Comment threadpackages/nextjs/src/app-router/client/ClerkProvider.tsx Outdated

brkalow marked this pull request as ready for review September 4, 2024 15:44

brkalow added 8 commits September 4, 2024 10:44

wip: elements rendering in clerk-js
358f30d

safely access env vars
8df5c46

Add ClerkHostRouter provider for elements usage in next.js
6323900

undo clerk-js change for now
234f0f5

adds changeset
cc4e2d1

Add missing contest, remove unused export
796465f

remove next as a peer dep
502bd8b

Update packages/nextjs/src/app-router/client/ClerkProvider.tsx
c5c5c9b

brkalow force-pushed the brk.feat/elements-remove-deps branch from cd8caf3 to c5c5c9bCompare September 4, 2024 15:51

lint fixes
0967c8a

brkalow requested review from alexcarpenter, dstaley and tmilewski September 4, 2024 19:36

brkalow commented Sep 4, 2024
View reviewed changes

tmilewski approved these changes Sep 4, 2024
View reviewed changes

brkalow merged commit 95ac67a into mainSep 4, 2024

brkalow deleted the brk.feat/elements-remove-deps branch September 4, 2024 20:35

wobsoriano pushed a commit that referenced this pull request Feb 8, 2025
feat(elements): Remove direct reliance on next and clerk-react (#4064)
7a00920

clerk-cookie added clerk-js nextjs elements and removed clerk-js labels Aug 30, 2024

brkalow commented Sep 4, 2024
View reviewed changes

Comment threadpackages/nextjs/src/app-router/client/ClerkProvider.tsx Outdated

brkalow marked this pull request as ready for review September 4, 2024 15:44

brkalow added 8 commits September 4, 2024 10:44

wip: elements rendering in clerk-js
358f30d

safely access env vars
8df5c46

Add ClerkHostRouter provider for elements usage in next.js
6323900

undo clerk-js change for now
234f0f5

adds changeset
cc4e2d1

Add missing contest, remove unused export
796465f

remove next as a peer dep
502bd8b

Update packages/nextjs/src/app-router/client/ClerkProvider.tsx
c5c5c9b

brkalow force-pushed the brk.feat/elements-remove-deps branch from cd8caf3 to c5c5c9bCompare September 4, 2024 15:51

lint fixes
0967c8a

brkalow requested review from alexcarpenter, dstaley and tmilewski September 4, 2024 19:36

brkalow commented Sep 4, 2024
View reviewed changes

tmilewski approved these changes Sep 4, 2024
View reviewed changes

brkalow merged commit 95ac67a into mainSep 4, 2024

brkalow deleted the brk.feat/elements-remove-deps branch September 4, 2024 20:35

wobsoriano pushed a commit that referenced this pull request Feb 8, 2025
feat(elements): Remove direct reliance on next and clerk-react (#4064)
7a00920

clerk-cookie added clerk-js nextjs elements and removed clerk-js labels Aug 30, 2024

brkalow commented Sep 4, 2024
View reviewed changes

Comment threadpackages/nextjs/src/app-router/client/ClerkProvider.tsx Outdated

brkalow marked this pull request as ready for review September 4, 2024 15:44

brkalow added 8 commits September 4, 2024 10:44

wip: elements rendering in clerk-js
358f30d

safely access env vars
8df5c46

Add ClerkHostRouter provider for elements usage in next.js
6323900

undo clerk-js change for now
234f0f5

adds changeset
cc4e2d1

Add missing contest, remove unused export
796465f

remove next as a peer dep
502bd8b

Update packages/nextjs/src/app-router/client/ClerkProvider.tsx
c5c5c9b

brkalow force-pushed the brk.feat/elements-remove-deps branch from cd8caf3 to c5c5c9bCompare September 4, 2024 15:51

lint fixes
0967c8a

brkalow requested review from alexcarpenter, dstaley and tmilewski September 4, 2024 19:36

brkalow commented Sep 4, 2024
View reviewed changes

tmilewski approved these changes Sep 4, 2024
View reviewed changes

brkalow merged commit 95ac67a into mainSep 4, 2024

brkalow deleted the brk.feat/elements-remove-deps branch September 4, 2024 20:35

wobsoriano pushed a commit that referenced this pull request Feb 8, 2025
feat(elements): Remove direct reliance on next and clerk-react (#4064)
7a00920

clerk-cookie added clerk-js nextjs elements and removed clerk-js labels Aug 30, 2024

brkalow commented Sep 4, 2024
View reviewed changes

Comment threadpackages/nextjs/src/app-router/client/ClerkProvider.tsx Outdated

brkalow marked this pull request as ready for review September 4, 2024 15:44

brkalow added 8 commits September 4, 2024 10:44

wip: elements rendering in clerk-js
358f30d

safely access env vars
8df5c46

Add ClerkHostRouter provider for elements usage in next.js
6323900

undo clerk-js change for now
234f0f5

adds changeset
cc4e2d1

Add missing contest, remove unused export
796465f

remove next as a peer dep
502bd8b

Update packages/nextjs/src/app-router/client/ClerkProvider.tsx
c5c5c9b

brkalow force-pushed the brk.feat/elements-remove-deps branch from cd8caf3 to c5c5c9bCompare September 4, 2024 15:51

lint fixes
0967c8a

brkalow requested review from alexcarpenter, dstaley and tmilewski September 4, 2024 19:36

brkalow commented Sep 4, 2024
View reviewed changes

tmilewski approved these changes Sep 4, 2024
View reviewed changes

brkalow merged commit 95ac67a into mainSep 4, 2024

brkalow deleted the brk.feat/elements-remove-deps branch September 4, 2024 20:35

wobsoriano pushed a commit that referenced this pull request Feb 8, 2025
feat(elements): Remove direct reliance on next and clerk-react (#4064)
7a00920

Uh oh!

Conversation

brkalow commented Aug 30, 2024• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Type of change

Uh oh!

changeset-botBot commented Aug 30, 2024• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

brkalow commented Aug 30, 2024• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Type of change

Uh oh!

changeset-botBot commented Aug 30, 2024• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

brkalow commented Aug 30, 2024• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Type of change

Uh oh!

changeset-botBot commented Aug 30, 2024• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

brkalow commented Aug 30, 2024•
edited
Loading

changeset-botBot commented Aug 30, 2024•
edited
Loading

brkalow commented Aug 30, 2024•
edited
Loading

changeset-botBot commented Aug 30, 2024•
edited
Loading

brkalow commented Aug 30, 2024•
edited
Loading

changeset-botBot commented Aug 30, 2024•
edited
Loading

brkalow commented Aug 30, 2024•
edited
Loading

changeset-botBot commented Aug 30, 2024•
edited
Loading