Convex Clerk Authentication
Hello guys!
I have an issue with my Convex-Clerk Authentication. The issue is obvious during the sign in and sign up process when sending verification codes.
The page loads twice therefore causing the otp to be sent 2x during sign-in and sign-up.
This behaviour also occurs when a form is submitted. It reloads the page.
Below is my code for ConvexClerkProvider.tsx
"use client";
import Loading from "@/app/components/auth/Loading";
import { ClerkProvider, useAuth } from "@clerk/clerk-react";
import {
AuthLoading,
Authenticated,
ConvexReactClient,
Unauthenticated,
} from "convex/react";
import { ConvexProviderWithClerk } from "convex/react-clerk";
type ConvexClerkProviderProps = {
children: React.ReactNode;
};
const clerkPublishableKey = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY;
if (!clerkPublishableKey) {
throw new Error("Missing Clerk Publishable Key");
}
const convexUrl = process.env.NEXT_PUBLIC_CONVEX_URL!;
const convex = new ConvexReactClient(convexUrl);
const ConvexClerkProvider = ({ children }: ConvexClerkProviderProps) => {
return (
<ClerkProvider publishableKey={clerkPublishableKey}>
<ConvexProviderWithClerk client={convex} useAuth={useAuth}>
<AuthLoading>
<Loading />
</AuthLoading>
<Authenticated>{children}</Authenticated>
<Unauthenticated>{children}</Unauthenticated>
</ConvexProviderWithClerk>
</ClerkProvider>
);
};
export default ConvexClerkProvider;
Below is my layout structure:
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={${inter.className}}>
<ConvexClerkProvider>
{children}
<Toaster />
</ConvexClerkProvider>
</body>
</html>
);
}
Thanks in advance.13 Replies
https://react.dev/reference/react/StrictMode
Hi, this is completely normal react behaviour and should be dev mode only.
But this shouldnt cause any issues.
– React
The library for web and native user interfaces
When forms are submitted it's normal too that the Page reloads.
The event.preventDefault(); is key here
Yes i use this but the page reloading is a minor issue.
This is where I am having issues because it's the same issue in production.
My web app is currently in production and still exhibits the same issue
The page loads twice therefore causing the otp to be sent 2x during sign-in and sign-up.I haven't used OTPs with Clerk, but I would assume Clerk does this after a button click, not on page load? Can you record a video of what's going on? (this could be also unrelated to Convex, in which case you can reach out to Clerk on their Discord)
After registeration...The code is sent 2x to both email and phone
I thought so and i have also reached out to them on their Discord.
But since I am using the ConvexClerkProvider, I thought it could be me doing something wrong with the ConvexClerkProvider which is why I opened a request here
The AuthLoading state renders a loading component which basically shows a loader. During the registration, once the register button is clicked, the request is sent and then the loader appears which means the page refreshed. And then the code is otp request is resent again.
return (
<ClerkProvider publishableKey={clerkPublishableKey}>
<ConvexProviderWithClerk client={convex} useAuth={useAuth}>
<AuthLoading>
<Loading />
</AuthLoading>
<Authenticated>{children}</Authenticated>
<Unauthenticated>{children}</Unauthenticated>
</ConvexProviderWithClerk>
</ClerkProvider>
);I'd recommend removing Convex quickly, and checking whether you still have the same issue
You can do that easily by replacing the AuthLoading etc. components with the ones exported from "@clerk/clerk-react"
Here is a video
You will notice that the otp component is displayed shortly before the AuthLoading loader shows up and then renders the component again
Is this bug in the video with only using Clerk or Convex and Clerk?
I will confirm and let you know