add clerk as convex auth provider

This commit is contained in:
Nayan Sawyer
2025-06-17 12:07:13 -04:00
parent c18410e243
commit c519ee69a7
4 changed files with 61 additions and 7 deletions

8
convex/auth.config.ts Normal file
View File

@@ -0,0 +1,8 @@
export default {
providors: [
{
domain: process.env.NEXT_PUBLIC_CLERK_FRONTEND_API_URL,
applicationId: process.env.NEXTAUTH_ID,
}
]
}

View File

@@ -1,6 +1,8 @@
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import { ClerkProvider } from "@clerk/nextjs";
import ConvexClientProvider from "@/providors/ConvexClientProvider";
const geistSans = Geist({
variable: "--font-geist-sans",
@@ -23,6 +25,8 @@ export default function RootLayout({
children: React.ReactNode;
}>) {
return (
<ClerkProvider>
<ConvexClientProvider>
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
@@ -30,5 +34,7 @@ export default function RootLayout({
{children}
</body>
</html>
</ConvexClientProvider>
</ClerkProvider>
);
}

18
src/middleware.ts Normal file
View File

@@ -0,0 +1,18 @@
import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server'
const isPublicRoute = createRouteMatcher(['/'])
export default clerkMiddleware(async ( auth, req ) => {
if (!isPublicRoute(req)) {
await auth.protect()
}
})
export const config = {
matcher: [
// Skip Next.js internals and all static files, unless found in search params
'/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
// Always run for API routes
'/(api|trpc)(.*)',
],
}

View File

@@ -0,0 +1,22 @@
"use client"
'use client'
import { ReactNode } from 'react'
import { ConvexReactClient } from 'convex/react'
import { ConvexProviderWithClerk } from 'convex/react-clerk'
import { useAuth } from '@clerk/nextjs'
if (!process.env.NEXT_PUBLIC_CONVEX_URL) {
throw new Error('Missing NEXT_PUBLIC_CONVEX_URL in your .env file')
}
const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL)
export default function ConvexClientProvider({ children }: { children: ReactNode }) {
return (
<ConvexProviderWithClerk client={convex} useAuth={useAuth}>
{children}
</ConvexProviderWithClerk>
)
}