Konstantin/rka 25 add auth protection (#3)

* rka-25: move the api to the root * rka-25: add auth
konstrybakov · Jun 9, 2024 · bd51337 · bd51337
1 parent 0c20739
commit bd51337
Show file tree

Hide file tree

Showing 9 changed files with 95 additions and 36 deletions.
diff --git a/app/add/page.tsx b/app/add/page.tsx
@@ -1,25 +1,34 @@
 import { Box, Heading, Section, Separator } from '@radix-ui/themes'
 
+import { isAdmin } from '@/lib/auth/is-admin'
+import { type User, currentUser } from '@clerk/nextjs/server'
 import { Provider } from 'jotai'
+import { redirect } from 'next/navigation'
 import { CompanyName } from './company/company-data'
 import { VariantPicker } from './variant/picker'
 import { VariantRenderer } from './variant/renderer'
 
-export default function Add() {
+export default async function Add() {
+  const user = (await currentUser()) as User
+
+  if (!isAdmin(user)) {
+    redirect('/')
+  }
+
   return (
     <Provider>
-      <Section size="2">
+      <Section size="1">
         <Box>
           <Heading>Add a company</Heading>
         </Box>
       </Section>
-      <Section size="2">
+      <Section size="1">
         <VariantPicker />
       </Section>
 
       <Separator size="3" />
 
-      <Section size="2">
+      <Section size="1">
         <VariantRenderer />
       </Section>
       <Section size="1">

diff --git a/app/companies/api/route.ts → app/api/companies/process/route.ts b/app/companies/api/route.ts → app/api/companies/process/route.ts
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,4 +1,11 @@
-import { Container, Flex, Theme } from '@radix-ui/themes'
+import {
+  ClerkProvider,
+  SignInButton,
+  SignedIn,
+  SignedOut,
+  UserButton,
+} from '@clerk/nextjs'
+import { Box, Container, Flex, Section, Theme } from '@radix-ui/themes'
 import type { Metadata } from 'next'
 
 import '@radix-ui/themes/styles.css'
@@ -15,17 +22,35 @@ export default function RootLayout({
   children: React.ReactNode
 }>) {
   return (
-    <html lang="en">
-      <body>
-        <Theme accentColor="amber" grayColor="sand" radius="small">
-          <Container>
-            <Flex direction="column" gap="4">
-              <Navigation />
-              {children}
-            </Flex>
-          </Container>
-        </Theme>
-      </body>
-    </html>
+    <ClerkProvider>
+      <html lang="en">
+        <body>
+          <Theme accentColor="amber" grayColor="sand" radius="small">
+            <Section size="1">
+              <Container>
+                <Flex align="center" justify="between">
+                  <Navigation />
+                  <Flex align="center" asChild>
+                    <Box>
+                      <SignedOut>
+                        <SignInButton />
+                      </SignedOut>
+                      <SignedIn>
+                        <UserButton />
+                      </SignedIn>
+                    </Box>
+                  </Flex>
+                </Flex>
+              </Container>
+            </Section>
+            <Container>
+              <Flex direction="column" gap="4">
+                {children}
+              </Flex>
+            </Container>
+          </Theme>
+        </body>
+      </html>
+    </ClerkProvider>
   )
 }
diff --git a/app/navigation.tsx b/app/navigation.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import * as NavigationMenu from '@radix-ui/react-navigation-menu'
-import { Reset, Section } from '@radix-ui/themes'
+import { Flex, Reset } from '@radix-ui/themes'
 import type { Route } from 'next'
 import NextLink, { type LinkProps } from 'next/link'
 import { usePathname } from 'next/navigation'
@@ -23,9 +23,9 @@ const Link: FC<LinkProps<Route> & HTMLProps<HTMLAnchorElement>> = ({
 
 export const Navigation = () => {
   return (
-    <Section asChild>
-      <NavigationMenu.Root>
-        <Reset>
+    <NavigationMenu.Root>
+      <Reset>
+        <Flex gap="3" asChild>
           <NavigationMenu.List>
             <NavigationMenu.Item>
               <Link href="/">Home</Link>
@@ -34,8 +34,8 @@ export const Navigation = () => {
               <Link href="/companies">Companies</Link>
             </NavigationMenu.Item>
           </NavigationMenu.List>
-        </Reset>
-      </NavigationMenu.Root>
-    </Section>
+        </Flex>
+      </Reset>
+    </NavigationMenu.Root>
   )
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,27 +1,35 @@
+import { isAdmin } from '@/lib/auth/is-admin'
+import { type User, currentUser } from '@clerk/nextjs/server'
 import { PlusIcon } from '@radix-ui/react-icons'
 import { Box, Button, Heading, Section } from '@radix-ui/themes'
 import Link from 'next/link'
 import { JobList } from './job-list'
 
-export default function Home() {
+export default async function Home() {
+  // TODO: Fix user management
+  // TODO: eliminate type assertion
+  const user = (await currentUser()) as User
+
   return (
     <>
-      <Section size="2">
+      <Section size="1">
         <Box mb="4">
           <Heading>Oh! What a tracker!</Heading>
         </Box>
       </Section>
+      {isAdmin(user) && (
+        <Section size="1">
+          <Box>
+            <Link href="/add">
+              <Button>
+                <PlusIcon />
+                Add a company
+              </Button>
+            </Link>
+          </Box>
+        </Section>
+      )}
       <Section size="1">
-        <Box>
-          <Link href="/add">
-            <Button>
-              <PlusIcon />
-              Add a company
-            </Button>
-          </Link>
-        </Box>
-      </Section>
-      <Section size="2">
         <JobList />
       </Section>
     </>

diff --git a/bun.lockb b/bun.lockb
diff --git a/lib/auth/is-admin.ts b/lib/auth/is-admin.ts
@@ -0,0 +1,3 @@
+import type { User } from '@clerk/nextjs/server'
+
+export const isAdmin = (user: User) => user.id === process.env.ADMIN_USER_ID
diff --git a/middleware.ts b/middleware.ts
@@ -0,0 +1,13 @@
+import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server'
+
+const isPublic = createRouteMatcher([])
+
+export default clerkMiddleware((auth, request) => {
+  if (!isPublic(request)) {
+    auth().protect()
+  }
+})
+
+export const config = {
+  matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'],
+}
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "db:reset": "bun run lib/db/reset.ts | pino-pretty"
   },
   "dependencies": {
+    "@clerk/nextjs": "^5.1.4",
     "@hookform/resolvers": "^3.4.2",
     "@neondatabase/serverless": "^0.9.3",
     "@radix-ui/colors": "^3.0.0",
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import type { User } from '@clerk/nextjs/server'

		export const isAdmin = (user: User) => user.id === process.env.ADMIN_USER_ID