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

5 messages · Page 1 of 1 (latest)

wide tulip
#

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)

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.

rancid verge
#

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

wide tulip
#

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>
  );
};

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>
  );
}

middleware

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

crash.PNG
rancid verge
#

I feel like its more of clerk issue here

night widget
#

@wide tulip similar issue in the Clerk Discord, check out this post: #1203054868600856596 message