feat: wire up clerk

+ Add convex provider with clerk + Add clerk provider + Add account page + Add login page + Add sign up page + Add clerk middleware + Add Navbar component
2023-09-09 20:05:10 -05:00
parent 8025858815
commit 9416bbaa05
9 changed files with 122 additions and 4 deletions
@@ -1,3 +1,4 @@
 {
-  "css.lint.unknownAtRules": "ignore"
+  "css.lint.unknownAtRules": "ignore",
+  "cSpell.words": ["nextjs", "signup"]
 }
@@ -0,0 +1,10 @@
+const config = {
+  providers: [
+    {
+      domain: process.env.CLERK_JWT_ISSUER_DOMAIN,
+      applicationID: 'convex',
+    },
+  ],
+};
+
+export default config;
@@ -0,0 +1,9 @@
+import { UserProfile } from '@clerk/nextjs';
+
+export default function AccountPage() {
+  return (
+    <main className='flex flex-col items-center'>
+      <UserProfile />
+    </main>
+  );
+}
@@ -1,3 +1,6 @@
+import Navbar from '@/components/Navbar';
+import ConvexProvider from '@/providers';
+import { ClerkProvider } from '@clerk/nextjs';
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import './globals.css';
@@ -14,8 +17,20 @@ export default function RootLayout({
  children: React.ReactNode;
 }) {
  return (
-    <html lang='en'>
-      <body className={inter.className}>{children}</body>
-    </html>
+    <ClerkProvider
+      publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}
+    >
+      <ConvexProvider>
+        <html
+          lang='en'
+          className='w-full h-full'
+        >
+          <body className={`w-full h-full flex flex-col ${inter.className}`}>
+            <Navbar />
+            <div className='p-4'>{children}</div>
+          </body>
+        </html>
+      </ConvexProvider>
+    </ClerkProvider>
  );
 }
@@ -0,0 +1,9 @@
+import { SignIn } from '@clerk/nextjs/app-beta';
+
+export default function LoginPage() {
+  return (
+    <main className='flex flex-col items-center'>
+      <SignIn appearance={{ elements: { card: 'shadow-md' } }} />
+    </main>
+  );
+}
@@ -0,0 +1,9 @@
+import { SignUp } from '@clerk/nextjs';
+
+export default function SignUpPage() {
+  return (
+    <main className='flex flex-col items-center'>
+      <SignUp />
+    </main>
+  );
+}
@@ -0,0 +1,31 @@
+import { SignedIn, SignedOut, UserButton } from '@clerk/nextjs';
+import Link from 'next/link';
+
+export default function Navbar() {
+  return (
+    <nav className='flex items-center justify-between p-5 shadow-md'>
+      <ul className='flex items-center gap-4'></ul>
+      <ul className='flex items-center gap-4'>
+        <SignedIn>
+          <li>
+            <UserButton
+              showName
+              userProfileMode='navigation'
+              userProfileUrl='/account'
+              signInUrl='/login'
+              afterSignOutUrl='/'
+            />
+          </li>
+        </SignedIn>
+        <SignedOut>
+          <li>
+            <Link href='/login'>Sign in</Link>
+          </li>
+          <li>
+            <Link href='/signup'>Sign up</Link>
+          </li>
+        </SignedOut>
+      </ul>
+    </nav>
+  );
+}
@@ -0,0 +1,9 @@
+import { authMiddleware } from '@clerk/nextjs';
+
+export default authMiddleware({
+  publicRoutes: [],
+});
+
+export const config = {
+  matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'],
+};
@@ -0,0 +1,25 @@
+'use client';
+
+import { useAuth } from '@clerk/nextjs';
+import { ConvexReactClient } from 'convex/react';
+import { ConvexProviderWithClerk } from 'convex/react-clerk';
+import { ReactNode } from 'react';
+
+const CONVEX_URL = process.env.NEXT_PUBLIC_CONVEX_URL;
+
+if (CONVEX_URL === undefined) {
+  throw Error('NEXT_PUBLIC_CONVEX_URL is undefined');
+}
+
+const client = new ConvexReactClient(CONVEX_URL);
+
+export default function ConvexProvider({ children }: { children: ReactNode }) {
+  return (
+    <ConvexProviderWithClerk
+      client={client}
+      useAuth={useAuth}
+    >
+      {children}
+    </ConvexProviderWithClerk>
+  );
+}