Agee•12mo ago

sign-in and sign-up pages with convex, clerk and nextjs

Hey, im trying to setup custom sign-up page following this clerk doc page https://clerk.com/docs/references/nextjs/custom-signup-signin-pages but I keep getting this issue:

node_modules\@clerk\nextjs\dist\esm\client-boundary\NextOptionsContext.js (6:0) @ useClerkNextOptions
Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'value')

Call Stack
useClerkNextOptions
(app-pages-browser)\node_modules\@clerk\nextjs\dist\esm\client-boundary\NextOptionsContext.js (6:0)
useClerkNextOptions
node_modules\@clerk\nextjs\dist\esm\client-boundary\uiComponents.js (32:63)
renderWithHooks
(app-pages-browser)\node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (11021:0)
updateFunctionComponent
(app-pages-browser)\node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (16184:0)

node_modules\@clerk\nextjs\dist\esm\client-boundary\NextOptionsContext.js (6:0) @ useClerkNextOptions
Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'value')

Call Stack
useClerkNextOptions
(app-pages-browser)\node_modules\@clerk\nextjs\dist\esm\client-boundary\NextOptionsContext.js (6:0)
useClerkNextOptions
node_modules\@clerk\nextjs\dist\esm\client-boundary\uiComponents.js (32:63)
renderWithHooks
(app-pages-browser)\node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (11021:0)
updateFunctionComponent
(app-pages-browser)\node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (16184:0)

It happens with either <SignIn> or <Signup> components.

Build your own sign-in and sign-up pages for your Next.js app with ...

Learn how to add custom sign-in and sign-up pages to your Next.js app with Clerk's prebuilt components and custom flows.

5 Replies

Abhishek•12mo ago

IF possible code you share the code too it can help in debugging

AgeeOP•12mo ago

I have standard setup: Provider

"use client";

import { ReactNode } from "react";
import { ConvexReactClient } from "convex/react";
import { ConvexProviderWithClerk } from "convex/react-clerk";
import { ClerkProvider, useAuth } from "@clerk/clerk-react";

const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!);

export const ConvexClientProvider = ({ children }: { children: ReactNode }) => {
  return (
    <ClerkProvider
      publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY!}
    >
      <ConvexProviderWithClerk useAuth={useAuth} client={convex}>
        {children}
      </ConvexProviderWithClerk>
    </ClerkProvider>
  );
};

"use client";

import { ReactNode } from "react";
import { ConvexReactClient } from "convex/react";
import { ConvexProviderWithClerk } from "convex/react-clerk";
import { ClerkProvider, useAuth } from "@clerk/clerk-react";

const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!);

export const ConvexClientProvider = ({ children }: { children: ReactNode }) => {
  return (
    <ClerkProvider
      publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY!}
    >
      <ConvexProviderWithClerk useAuth={useAuth} client={convex}>
        {children}
      </ConvexProviderWithClerk>
    </ClerkProvider>
  );
};

root layout

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <ConvexClientProvider>
        <body className={inter.className}>{children}</body>
      </ConvexClientProvider>
    </html>
  );
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <ConvexClientProvider>
        <body className={inter.className}>{children}</body>
      </ConvexClientProvider>
    </html>
  );
}

middleware

import { authMiddleware } from "@clerk/nextjs";

export default authMiddleware({

  publicRoutes: ["/"],
});

export const config = {
  matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/", "/(api|trpc)(.*)"],
};

import { authMiddleware } from "@clerk/nextjs";

export default authMiddleware({

  publicRoutes: ["/"],
});

export const config = {
  matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/", "/(api|trpc)(.*)"],
};

It basically crashes whenever I pass clerk sing in or sign up url envs: NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up

Abhishek•12mo ago

I feel like its more of clerk issue here

erquhart•12mo ago

@Agee similar issue in the Clerk Discord, check out this post: https://discord.com/channels/856971667393609759/1203054868600856596/1203054868600856596

AgeeOP•12mo ago

Fixed, thx a lot @erquhart

sign-in and sign-up pages with convex, clerk and nextjs

Did you find this page helpful?