rka-64: remove clerk (#16)

app/add/page.tsx

@@ -1,18 +1,18 @@
 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 { isAdmin } from '@/lib/utils/is-admin'
 import { Provider } from 'jotai'
 import { redirect } from 'next/navigation'
+import { auth } from '../auth'
 import { CompanyName } from './components/company/company-data'
 import { VariantPicker } from './components/variant/picker'
 import { VariantRenderer } from './components/variant/renderer'
 
 export default async function Add() {
-  const user = (await currentUser()) as User
+  const session = await auth()
 
-  if (!isAdmin(user)) {
-    redirect('/')
+  if (!isAdmin(session?.user)) {
+    return redirect('/')
   }
 
   return (

app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,4 @@
+import { handlers } from '@/app/auth'
+
+export const { GET, POST } = handlers
+export const runtime = 'edge'

app/auth.ts

@@ -0,0 +1,6 @@
+import NextAuth from 'next-auth'
+import GitHub from 'next-auth/providers/github'
+
+export const { handlers, signIn, signOut, auth } = NextAuth({
+  providers: [GitHub],
+})

app/components/list/job-card.tsx

@@ -1,6 +1,7 @@
-import { isAdmin } from '@/lib/auth/is-admin'
 import type { QueryGetJobsResult } from '@/lib/db/queries'
-import { type User, currentUser } from '@clerk/nextjs/server'
+
+import { auth } from '@/app/auth'
+import { isAdmin } from '@/lib/utils/is-admin'
 import { ExternalLinkIcon } from '@radix-ui/react-icons'
 import {
   AccessibleIcon,
@@ -21,12 +22,12 @@ type JobCardProps = {
 
 // TODO: design, refactor
 export const JobCard = async ({ job }: JobCardProps) => {
-  const user = (await currentUser()) as User
+  const session = await auth()
 
   return (
-    <Card>
-      <Grid columns="auto 1fr" rows="repeat(2, minmax(22px, auto))" gap="2">
-        <Flex gap="2" align="center">
+    <Card size="2">
+      <Grid columns="auto 1fr" rows="repeat(3, 24px)" align="center" gap="3">
+        <Flex gap="3" align="center">
           <Text size="2" weight="medium" color="gray">
             {job.departments.join(' > ')}
           </Text>
@@ -48,20 +49,20 @@ export const JobCard = async ({ job }: JobCardProps) => {
         <Text size="2" weight="medium">
           {job.company.name}
         </Text>
-        <Flex gap="2" justify="end">
+        <Flex gap="3" justify="end">
           <Text size="2">
             {new Intl.DateTimeFormat('en-UK', {
               dateStyle: 'medium',
               timeStyle: 'short',
             }).format(new Date(job.lastUpdatedAt))}
           </Text>
         </Flex>
-        <Flex justify="between" gridColumn="1/-1">
+        <Flex align="center" justify="between" gridColumn="1/-1">
           <Text size="2" color="gray">
             {job.compensationSummary}
           </Text>
-          {isAdmin(user) && (
-            <Flex align="center" gap="2" justify="between">
+          {isAdmin(session?.user) && (
+            <Flex align="center" gap="3" justify="between">
               <JobCardActions job={job} />
             </Flex>
           )}

app/components/nav/auth/auth.tsx

@@ -0,0 +1,22 @@
+import { auth, signIn } from '@/app/auth'
+import { Button } from '@radix-ui/themes'
+import { UserAuth } from './user'
+
+export const Auth = async () => {
+  const session = await auth()
+
+  if (!session?.user) {
+    return (
+      <form
+        action={async () => {
+          'use server'
+          await signIn()
+        }}
+      >
+        <Button type="submit">Sign in</Button>
+      </form>
+    )
+  }
+
+  return <UserAuth user={session.user} />
+}

app/components/nav/auth/user.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import { Avatar, Button, DropdownMenu, Flex } from '@radix-ui/themes'
+import type { User } from 'next-auth'
+import { signOut } from 'next-auth/react'
+
+export const UserAuth = ({ user }: { user: User }) => {
+  return (
+    <Flex align="center" gap="3">
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger>
+          <Button variant="soft">
+            {user.name}
+            <DropdownMenu.TriggerIcon />
+          </Button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content variant="soft">
+          <DropdownMenu.Item
+            onSelect={async () => {
+              await signOut()
+            }}
+          >
+            Sign out
+          </DropdownMenu.Item>
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+      <Avatar
+        src={user.image ?? undefined}
+        alt={user.name ?? 'User profile picture'}
+        fallback={user.name?.charAt(0).toUpperCase() ?? '😕'}
+      />
+    </Flex>
+  )
+}

app/components/nav/navigation.tsx

@@ -1,41 +1,43 @@
-'use client'
+import { Box, Flex, Link, Reset } from '@radix-ui/themes'
+import NextLink from 'next/link'
 
-import * as NavigationMenu from '@radix-ui/react-navigation-menu'
-import { Flex, Reset } from '@radix-ui/themes'
-import type { Route } from 'next'
-import NextLink, { type LinkProps } from 'next/link'
-import { usePathname } from 'next/navigation'
-import type { FC, HTMLProps } from 'react'
-
-const Link: FC<LinkProps<Route> & HTMLProps<HTMLAnchorElement>> = ({
-  href,
-  ...props
-}) => {
-  const pathname = usePathname()
-  const isActive = pathname === href
-
-  return (
-    <NavigationMenu.Link asChild active={isActive}>
-      <NextLink href={href} className="NavigationMenuLink" {...props} />
-    </NavigationMenu.Link>
-  )
-}
+import type {} from 'react'
+import { Auth } from './auth/auth'
 
 export const Navigation = () => {
   return (
-    <NavigationMenu.Root>
-      <Reset>
-        <Flex gap="3" asChild>
-          <NavigationMenu.List>
-            <NavigationMenu.Item>
-              <Link href="/">Home</Link>
-            </NavigationMenu.Item>
-            <NavigationMenu.Item>
-              <Link href="/companies">Companies</Link>
-            </NavigationMenu.Item>
-          </NavigationMenu.List>
-        </Flex>
-      </Reset>
-    </NavigationMenu.Root>
+    <Reset>
+      <Flex
+        width="100%"
+        align="center"
+        p="3"
+        px="4"
+        gap="3"
+        asChild
+        style={{
+          borderRadius: 'var(--radius-4)',
+          background: 'var(--accent-2)',
+          border: '3px solid var(--accent-3)',
+        }}
+      >
+        <ul>
+          <li>
+            <Link underline="hover" asChild>
+              <NextLink href="/">Home</NextLink>
+            </Link>
+          </li>
+          <li>
+            <Link underline="hover" asChild>
+              <NextLink href="/companies">Companies</NextLink>
+            </Link>
+          </li>
+          <Box ml="auto" asChild>
+            <li>
+              <Auth />
+            </li>
+          </Box>
+        </ul>
+      </Flex>
+    </Reset>
   )
 }

app/layout.tsx

@@ -1,14 +1,8 @@
-import {
-  ClerkProvider,
-  SignInButton,
-  SignedIn,
-  SignedOut,
-  UserButton,
-} from '@clerk/nextjs'
-import { Box, Container, Flex, Section, Theme } from '@radix-ui/themes'
+import { Container, Flex, Section, Theme } from '@radix-ui/themes'
 import type { Metadata } from 'next'
 
 import '@radix-ui/themes/styles.css'
+
 import { Navigation } from './components/nav/navigation'
 
 export const metadata: Metadata = {
@@ -22,37 +16,25 @@ export default function RootLayout({
   children: React.ReactNode
 }>) {
   return (
-    <ClerkProvider>
-      <html lang="en">
-        <body>
-          <Theme accentColor="amber" grayColor="sand" radius="small">
-            <Section size="1">
-              <Container>
-                <Flex height="28px" align="center" justify="between">
-                  <Navigation />
-                  <Flex align="center" asChild>
-                    <Box>
-                      <SignedOut>
-                        <SignInButton />
-                      </SignedOut>
-                      <SignedIn>
-                        <UserButton />
-                      </SignedIn>
-                    </Box>
-                  </Flex>
-                </Flex>
-              </Container>
-            </Section>
-            <Section size="1">
-              <Container>
-                <Flex direction="column" gap="4">
-                  {children}
-                </Flex>
-              </Container>
-            </Section>
-          </Theme>
-        </body>
-      </html>
-    </ClerkProvider>
+    <html lang="en">
+      <body>
+        <Theme accentColor="amber" grayColor="sand" radius="small">
+          <Section size="1">
+            <Container>
+              <Flex height="28px" align="center" justify="between">
+                <Navigation />
+              </Flex>
+            </Container>
+          </Section>
+          <Section size="1">
+            <Container>
+              <Flex direction="column" gap="4">
+                {children}
+              </Flex>
+            </Container>
+          </Section>
+        </Theme>
+      </body>
+    </html>
   )
 }

app/page.tsx

@@ -1,9 +1,9 @@
-import { isAdmin } from '@/lib/auth/is-admin'
 import type { GetJobsFilter } from '@/lib/db/queries'
-import { type User, currentUser } from '@clerk/nextjs/server'
+import { isAdmin } from '@/lib/utils/is-admin'
 import { PlusIcon } from '@radix-ui/react-icons'
 import { Box, Button, Flex, Heading, Section } from '@radix-ui/themes'
 import Link from 'next/link'
+import { auth } from './auth'
 import { JobList } from './components/list/job-list'
 import type { PageSearchParams } from './types'
 
@@ -12,16 +12,14 @@ type HomeProps = {
 }
 
 export default async function Home(props: HomeProps) {
-  // TODO: Fix user management
-  // TODO: eliminate type assertion
-  const user = (await currentUser()) as User
+  const session = await auth()
 
   return (
     <>
       <Section size="1">
         <Flex align="center" justify="between">
           <Heading>Oh! What a tracker!</Heading>
-          {isAdmin(user) && (
+          {isAdmin(session?.user) && (
             <Box>
               <Link href="/add">
                 <Button>

lib/utils/is-admin.ts

@@ -0,0 +1,5 @@
+import type { User } from 'next-auth'
+
+export const isAdmin = (user?: User) => {
+  return user && user.email === process.env.PERSONAL_EMAIL
+}

package.json

@@ -16,7 +16,6 @@
     "email:dev": "email dev"
   },
   "dependencies": {
-    "@clerk/nextjs": "^5.1.4",
     "@hookform/resolvers": "^3.4.2",
     "@logtail/pino": "^0.4.22",
     "@neondatabase/serverless": "^0.9.3",
@@ -29,6 +28,7 @@
     "http-status-codes": "^2.3.0",
     "jotai": "^2.8.1",
     "next": "14.2.3",
+    "next-auth": "beta",
     "normalize-url": "^8.0.1",
     "pino": "^9.1.0",
     "pino-pretty": "^11.1.0",