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
Below is my layout structure:
Thanks in advance.
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;
"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={export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={${inter.className}}>
<ConvexClerkProvider>
{children}
<Toaster />
</ConvexClerkProvider>
</body>
</html>
);
}}>
<ConvexClerkProvider>
{children}
<Toaster />
</ConvexClerkProvider>
</body>
</html>
);
}Thanks in advance.
