Improve Accessibility: Move Theme Toggle to Navbar (#274)

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

@@ -1,3 +1,5 @@
+// Ensure this route is accessible at /api/auth/[...nextauth] and both GET and POST are exported for NextAuth to work properly.
+// If you see 405 errors, check your deployment and NEXTAUTH_URL configuration.
 import NextAuth from "next-auth"
 
 import { authOptions } from "@/lib/auth"

components/main-nav.tsx

@@ -9,6 +9,7 @@ import { siteConfig } from "@/config/site"
 import { cn } from "@/lib/utils"
 import { Icons } from "@/components/icons"
 import { MobileNav } from "@/components/mobile-nav"
+import { ModeToggle } from "@/components/mode-toggle"
 
 interface MainNavProps {
   items?: MainNavItem[]
@@ -20,7 +21,7 @@ export function MainNav({ items, children }: MainNavProps) {
   const [showMobileMenu, setShowMobileMenu] = React.useState<boolean>(false)
 
   return (
-    <div className="flex gap-6 md:gap-10">
+    <div className="flex gap-6 md:gap-10 items-center">
       <Link href="/" className="hidden items-center space-x-2 md:flex">
         <Icons.logo />
         <span className="hidden font-bold sm:inline-block">
@@ -46,13 +47,21 @@ export function MainNav({ items, children }: MainNavProps) {
           ))}
         </nav>
       ) : null}
+      {/* Theme toggle button for desktop */}
+      <div className="hidden md:flex">
+        <ModeToggle />
+      </div>
       <button
         className="flex items-center space-x-2 md:hidden"
         onClick={() => setShowMobileMenu(!showMobileMenu)}
       >
         {showMobileMenu ? <Icons.close /> : <Icons.logo />}
         <span className="font-bold">Menu</span>
       </button>
+      {/* Theme toggle button for mobile, next to menu button */}
+      <div className="md:hidden">
+        <ModeToggle />
+      </div>
       {showMobileMenu && items && (
         <MobileNav items={items}>{children}</MobileNav>
       )}

components/user-auth-form.tsx

@@ -34,20 +34,37 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
   async function onSubmit(data: FormData) {
     setIsLoading(true)
 
-    const signInResult = await signIn("email", {
-      email: data.email.toLowerCase(),
-      redirect: false,
-      callbackUrl: searchParams?.get("from") || "/dashboard",
-    })
+    let signInResult: any = null;
+    try {
+      signInResult = await signIn("email", {
+        email: data.email.toLowerCase(),
+        redirect: false,
+        callbackUrl: searchParams?.get("from") || "/dashboard",
+      });
+    } catch (err) {
+      setIsLoading(false);
+      return toast({
+        title: "Something went wrong.",
+        description: "Could not reach the authentication server. Please try again later.",
+        variant: "destructive",
+      });
+    }
 
     setIsLoading(false)
 
-    if (!signInResult?.ok) {
+    // Handle empty or invalid response
+    if (!signInResult || signInResult.error || !signInResult.ok) {
+      let description = "Your sign in request failed. Please try again.";
+      if (signInResult && signInResult.error === "Callback") {
+        description = "Authentication server returned an error. Please check your configuration or try again later.";
+      } else if (signInResult && signInResult.status === 405) {
+        description = "Authentication method not allowed. Please contact support or try again later.";
+      }
       return toast({
         title: "Something went wrong.",
-        description: "Your sign in request failed. Please try again.",
+        description,
         variant: "destructive",
-      })
+      });
     }
 
     return toast({

env.mjs

@@ -1,3 +1,6 @@
+// IMPORTANT: Set NEXTAUTH_URL to your local or production domain to avoid 405 errors and authentication issues.
+// For local dev: NEXTAUTH_URL=http://localhost:3000
+// For prod:     NEXTAUTH_URL=https://yourdomain.com
 import { createEnv } from "@t3-oss/env-nextjs"
 import { z } from "zod"