feat: 🎸 sign in

apps/hub/app/auth/signin/page.tsx

@@ -14,23 +14,29 @@ import {
 } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
+import { useToast } from '@/components/ui/use-toast'
 
 export default function SignInPage() {
+    const { toast } = useToast()
+
     const [username, setUsername] = useState('')
     const [password, setPassword] = useState('')
 
     const handleSignIn = async () => {
         const result = await signIn('credentials', {
-            redirect: false,
             username,
             password,
         })
 
-        // TODO update status
         if (result?.ok) {
-            console.log('Sign in successful')
+            toast({
+                title: 'Sign in successful',
+            })
         } else {
-            console.error('Sign in failed')
+            toast({
+                title: 'Sign in failed',
+                description: 'Please try again',
+            })
         }
     }
 

apps/hub/app/auth/signout/page.tsx

@@ -0,0 +1,19 @@
+'use client'
+
+import { LogOut } from 'lucide-react'
+import { signOut } from 'next-auth/react'
+
+import { Button } from '@/components/ui/button'
+
+export default function SignOutPage() {
+    return (
+        <Button
+            variant="outline"
+            className="w-full max-w-[200px] m-auto"
+            onClick={() => signOut()}
+        >
+            <LogOut className="mr-2 size-4" />
+            <span>Log out</span>
+        </Button>
+    )
+}

apps/hub/components/header/user-nav.tsx

@@ -1,11 +1,9 @@
 import Link from 'next/link'
 import { DISCUSSION_URL, ISSUE_URL } from '@/constant/github'
 import { getServerAuthSession } from '@/server/auth'
-import { Bug, Cloud, Github, LifeBuoy, LogOut } from 'lucide-react'
+import { Bug, Cloud, Github, LifeBuoy } from 'lucide-react'
 
-import { cn } from '@/lib/utils'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
-import { buttonVariants } from '@/components/ui/button'
 import {
     DropdownMenu,
     DropdownMenuContent,
@@ -14,6 +12,7 @@ import {
     DropdownMenuSeparator,
     DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
+import SignOutPage from '@/app/auth/signout/page'
 
 export async function UserNav() {
     const session = await getServerAuthSession()
@@ -70,19 +69,7 @@ export async function UserNav() {
                 </DropdownMenuItem>
                 <DropdownMenuSeparator />
                 <DropdownMenuItem className="focus:bg-transparent">
-                    <Link
-                        href="/api/auth/signout"
-                        rel="noreferrer"
-                        className={cn(
-                            'w-full',
-                            buttonVariants({
-                                variant: 'outline',
-                            })
-                        )}
-                    >
-                        <LogOut className="mr-2 size-4" />
-                        <span>Log out</span>
-                    </Link>
+                    <SignOutPage />
                 </DropdownMenuItem>
             </DropdownMenuContent>
         </DropdownMenu>

apps/hub/server/auth.ts

@@ -58,9 +58,15 @@ export const authOptions: NextAuthOptions = {
         newUser: '/auth/new-user', // New users will be directed here on first sign in (leave the property out if not of interest)
     },
     callbacks: {
-        async signIn({ user }) {
+        signIn: async ({ user }) => {
             return !!user?.id
         },
+        redirect: async ({ url, baseUrl }) => {
+            if (url.startsWith('/')) {
+                return `${baseUrl}${url}`
+            }
+            return baseUrl
+        },
         jwt: async ({ token, user }) => {
             if (user) {
                 token = { ...user }