CODEWITHSUNDEEP
next.jsconvex.dev
Leeen Mr
Leeen Mr

Reputation: 1

How can Convex perform authentication only once?

import Loading from "@/components/auth/loading";
import { zhCN } from "@clerk/localizations";
import { ClerkProvider, useAuth } from "@clerk/nextjs";
import { ConvexProviderWithClerk } from "convex/react-clerk";
import { AuthLoading, Authenticated, ConvexReactClient } from 
"convex/react";

interface ConvexClientProviderProps {
  children: React.ReactNode;
}

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

export const ConvexClientProvider = ({
  children,
}: ConvexClientProviderProps) => {
  return (
    <ClerkProvider localization={zhCN}>
      <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
        {/* <AuthComponents>{children}</AuthComponents> */}
        <AuthLoading>
          <Loading />
        </AuthLoading>
        <Authenticated>{children}</Authenticated>
      </ConvexProviderWithClerk>
    </ClerkProvider>
  );
};

This is the provider file

import "./globals.css";
import type { Metadata } from "next";
import localFont from "next/font/local";
import { ConvexClientProvider } from "@/providers/convex-client- 
provider";

const geistSans = localFont({
  src: "./fonts/GeistVF.woff",
  variable: "--font-geist-sans",
  weight: "100 900",
});
const geistMono = localFont({


 src: "./fonts/GeistMonoVF.woff",
  variable: "--font-geist-mono",
  weight: "100 900",
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
        <ConvexClientProvider>{children}</ConvexClientProvider>
      </body>
    </html>
  );
}

This is the layout file

This is Next.js, and I am using Convex and Clerk for authentication. I created a provider file to handle authentication, but every time I switch routes, AuthLoading runs again, which is very frequent and not user-friendly. My idea is whether it is possible to perform authentication only once, so that subsequent route transitions do not require re-authentication.

Upvotes: 0

Views: 55

Answers (0)

Related Questions