feat: implement sign out button and redirect to sign in page when log…

…ging out

src/app/(auth)/dashboard/layout.tsx

@@ -44,14 +44,7 @@ export default function DashboardLayout({
             <nav>
               <ul className="flex flex-wrap text-xl">
                 <li className="mr-6">
-                  <SignOutButton>
-                    <button
-                      className="border-none text-gray-700 hover:text-gray-900"
-                      type="button"
-                    >
-                      Sign out
-                    </button>
-                  </SignOutButton>
+                  <SignOutButton />
                 </li>
               </ul>
             </nav>

src/components/SignOutButton.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import { SignOutButton as SignOutButtonClerk } from '@clerk/nextjs';
+import { redirect } from 'next/navigation';
+
+const SignOutButton = () => (
+  <SignOutButtonClerk signOutCallback={() => redirect('/')}>
+    <button
+      className="border-none text-gray-700 hover:text-gray-900"
+      type="button"
+    >
+      Sign out
+    </button>
+  </SignOutButtonClerk>
+);
+
+export { SignOutButton };

src/middleware.ts

@@ -1,9 +1,16 @@
-import { authMiddleware } from '@clerk/nextjs';
-import type { NextRequest } from 'next/server';
+import { authMiddleware, redirectToSignIn } from '@clerk/nextjs';
+import { type NextRequest } from 'next/server';
 
 export default authMiddleware({
   publicRoutes: (req: NextRequest) =>
     !req.nextUrl.pathname.startsWith('/dashboard'),
+  // eslint-disable-next-line consistent-return
+  afterAuth(auth, req) {
+    // handle users who aren't authenticated
+    if (!auth.userId && !auth.isPublicRoute) {
+      return redirectToSignIn({ returnBackUrl: req.url });
+    }
+  },
 });
 
 export const config = {