Tested code

Author: Rajat Saxena

apps/web/app/(with-contexts)/(with-layout)/login/login-form.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ThemeContext } from "@components/contexts";
+import { ServerConfigContext, ThemeContext } from "@components/contexts";
 import {
     Button,
     Caption,
@@ -33,7 +33,7 @@ import {
 import Link from "next/link";
 import { TriangleAlert } from "lucide-react";
 import { useRecaptcha } from "@/hooks/use-recaptcha";
-import { useRouter } from "next/navigation";
+import RecaptchaScriptLoader from "@/components/recaptcha-script-loader";
 
 export default function LoginForm({ redirectTo }: { redirectTo?: string }) {
     const { theme } = useContext(ThemeContext);
@@ -43,55 +43,77 @@ export default function LoginForm({ redirectTo }: { redirectTo?: string }) {
     const [error, setError] = useState("");
     const [loading, setLoading] = useState(false);
     const { toast } = useToast();
+    const serverConfig = useContext(ServerConfigContext);
     const { executeRecaptcha } = useRecaptcha();
-    const router = useRouter();
 
     const requestCode = async function (e: FormEvent) {
         e.preventDefault();
         setLoading(true);
         setError("");
 
-        if (!executeRecaptcha) {
-            toast({
-                title: TOAST_TITLE_ERROR,
-                description: "reCAPTCHA service not available. Please try again later.",
-                variant: "destructive",
-            });
-            setLoading(false);
-            return;
-        }
-
-        const recaptchaToken = await executeRecaptcha("login_code_request");
-        if (!recaptchaToken) {
-            toast({
-                title: TOAST_TITLE_ERROR,
-                description: "reCAPTCHA validation failed. Please try again.",
-                variant: "destructive",
-            });
-            setLoading(false);
-            return;
-        }
+        if (serverConfig.recaptchaSiteKey) {
+            if (!executeRecaptcha) {
+                toast({
+                    title: TOAST_TITLE_ERROR,
+                    description:
+                        "reCAPTCHA service not available. Please try again later.",
+                    variant: "destructive",
+                });
+                setLoading(false);
+                return;
+            }
 
-        try {
-            const recaptchaVerificationResponse = await fetch("/api/recaptcha", {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({ token: recaptchaToken }),
-            });
+            const recaptchaToken = await executeRecaptcha("login_code_request");
+            if (!recaptchaToken) {
+                toast({
+                    title: TOAST_TITLE_ERROR,
+                    description:
+                        "reCAPTCHA validation failed. Please try again.",
+                    variant: "destructive",
+                });
+                setLoading(false);
+                return;
+            }
+            try {
+                const recaptchaVerificationResponse = await fetch(
+                    "/api/recaptcha",
+                    {
+                        method: "POST",
+                        headers: { "Content-Type": "application/json" },
+                        body: JSON.stringify({ token: recaptchaToken }),
+                    },
+                );
 
-            const recaptchaData = await recaptchaVerificationResponse.json();
+                const recaptchaData =
+                    await recaptchaVerificationResponse.json();
 
-            if (!recaptchaVerificationResponse.ok || !recaptchaData.success || (recaptchaData.score && recaptchaData.score < 0.5)) {
+                if (
+                    !recaptchaVerificationResponse.ok ||
+                    !recaptchaData.success ||
+                    (recaptchaData.score && recaptchaData.score < 0.5)
+                ) {
+                    toast({
+                        title: TOAST_TITLE_ERROR,
+                        description: `reCAPTCHA verification failed. ${recaptchaData.score ? `Score: ${recaptchaData.score.toFixed(2)}.` : ""} Please try again.`,
+                        variant: "destructive",
+                    });
+                    setLoading(false);
+                    return;
+                }
+            } catch (err) {
+                console.error("Error during reCAPTCHA verification:", err);
                 toast({
                     title: TOAST_TITLE_ERROR,
-                    description: `reCAPTCHA verification failed. ${recaptchaData.score ? `Score: ${recaptchaData.score.toFixed(2)}.` : ''} Please try again.`,
+                    description:
+                        "reCAPTCHA verification failed. Please try again.",
                     variant: "destructive",
                 });
                 setLoading(false);
                 return;
             }
+        }
 
-            // Proceed with code generation if reCAPTCHA is successful
+        try {
             const url = `/api/auth/code/generate?email=${encodeURIComponent(
                 email,
             )}`;
@@ -113,8 +135,7 @@ export default function LoginForm({ redirectTo }: { redirectTo?: string }) {
                 description: "An unexpected error occurred. Please try again.",
                 variant: "destructive",
             });
-        }
-        finally {
+        } finally {
             setLoading(false);
         }
     };
@@ -131,11 +152,6 @@ export default function LoginForm({ redirectTo }: { redirectTo?: string }) {
             if (response?.error) {
                 setError(`Can't sign you in at this time`);
             } else {
-                // toast({
-                //     title: TOAST_TITLE_SUCCESS,
-                //     description: LOGIN_SUCCESS,
-                // });
-                // router.replace(redirectTo || "/dashboard/my-content");
                 window.location.href = redirectTo || "/dashboard/my-content";
             }
         } finally {
@@ -151,7 +167,8 @@ export default function LoginForm({ redirectTo }: { redirectTo?: string }) {
                         {error && (
                             <div
                                 style={{
-                                    color: theme?.theme?.colors?.error,
+                                    color: theme?.theme?.colors?.light
+                                        ?.destructive,
                                 }}
                                 className="flex items-center gap-2 mb-4"
                             >
@@ -270,6 +287,7 @@ export default function LoginForm({ redirectTo }: { redirectTo?: string }) {
                     </div>
                 </div>
             </div>
+            <RecaptchaScriptLoader />
         </Section>
     );
 }

apps/web/app/(with-contexts)/layout-with-context.tsx

@@ -16,7 +16,6 @@ import { Session } from "next-auth";
 import { Theme } from "@courselit/page-models";
 import { ThemeProvider as NextThemesProvider } from "@components/next-theme-provider";
 import { defaultState } from "@components/default-state";
-import RecaptchaScriptLoader from "@components/recaptcha-script-loader";
 
 function LayoutContent({
     address,
@@ -110,7 +109,6 @@ function LayoutContent({
                             >
                                 <Suspense fallback={null}>{children}</Suspense>
                             </ProfileContext.Provider>
-                            <RecaptchaScriptLoader />
                         </NextThemesProvider>
                     </ServerConfigContext.Provider>
                 </ThemeContext.Provider>

apps/web/app/api/recaptcha/route.ts

@@ -1,19 +1,12 @@
 import { NextRequest, NextResponse } from "next/server";
 
-/**
- * API route handler for verifying a Google reCAPTCHA v3 token.
- * Expects a POST request with a JSON body containing a `token` property.
- *
- * @param {NextRequest} request - The incoming Next.js API request object.
- * @returns {Promise<NextResponse>} A Next.js API response object.
- */
 export async function POST(request: NextRequest) {
     const secretKey = process.env.RECAPTCHA_SECRET_KEY;
     if (!secretKey) {
         console.error("reCAPTCHA secret key not found.");
         return NextResponse.json(
             { error: "Internal server error" },
-            { status: 500 }
+            { status: 500 },
         );
     }
 
@@ -23,7 +16,7 @@ export async function POST(request: NextRequest) {
     } catch (error) {
         return NextResponse.json(
             { error: "Invalid request body" },
-            { status: 400 }
+            { status: 400 },
         );
     }
 
@@ -32,7 +25,7 @@ export async function POST(request: NextRequest) {
     if (!token) {
         return NextResponse.json(
             { error: "reCAPTCHA token not found" },
-            { status: 400 }
+            { status: 400 },
         );
     }
 
@@ -47,14 +40,14 @@ export async function POST(request: NextRequest) {
                     "Content-Type": "application/x-www-form-urlencoded",
                 },
                 body: formData,
-            }
+            },
         );
 
         if (!response.ok) {
             console.error("Failed to verify reCAPTCHA token with Google");
             return NextResponse.json(
                 { error: "Failed to verify reCAPTCHA token" },
-                { status: 500 }
+                { status: 500 },
             );
         }
 
@@ -71,7 +64,7 @@ export async function POST(request: NextRequest) {
         console.error("Error verifying reCAPTCHA token:", error);
         return NextResponse.json(
             { error: "Error verifying reCAPTCHA token" },
-            { status: 500 }
+            { status: 500 },
         );
     }
 }

apps/web/components/recaptcha-script-loader.tsx

@@ -4,13 +4,8 @@ import { useContext } from "react";
 import Script from "next/script";
 import { ServerConfigContext } from "@components/contexts";
 
-/**
- * RecaptchaScriptLoader component.
- * This client component loads the Google reCAPTCHA v3 script if the site key is available in ServerConfigContext.
- */
 const RecaptchaScriptLoader = () => {
-    const { config } = useContext(ServerConfigContext);
-    const recaptchaSiteKey = config?.recaptchaSiteKey;
+    const { recaptchaSiteKey } = useContext(ServerConfigContext);
 
     if (recaptchaSiteKey) {
         return (

apps/web/hooks/use-recaptcha.ts

@@ -12,16 +12,10 @@ export const useRecaptcha = () => {
     const recaptchaSiteKey = serverConfig?.recaptchaSiteKey;
 
     const executeRecaptcha = useCallback(
-        /**
-         * Executes the reCAPTCHA challenge.
-         *
-         * @param {string} action - The action to perform.
-         * @returns {Promise<string | null>} A promise that resolves with the reCAPTCHA token, or null if reCAPTCHA is not available or the site key is not set.
-         */
         async (action: string): Promise<string | null> => {
             if (!recaptchaSiteKey) {
                 console.error(
-                    "reCAPTCHA site key not found in ServerConfigContext."
+                    "reCAPTCHA site key not found in ServerConfigContext.",
                 );
                 return null;
             }
@@ -36,26 +30,26 @@ export const useRecaptcha = () => {
                         if (!recaptchaSiteKey) {
                             // Double check, though already checked above
                             console.error(
-                                "reCAPTCHA site key became unavailable before execution."
+                                "reCAPTCHA site key became unavailable before execution.",
                             );
                             resolve(null);
                             return;
                         }
                         const token = await window.grecaptcha.execute(
                             recaptchaSiteKey,
-                            { action }
+                            { action },
                         );
                         resolve(token);
                     });
                 });
             } else {
                 console.error(
-                    "reCAPTCHA (window.grecaptcha) not available. Ensure the script is loaded."
+                    "reCAPTCHA (window.grecaptcha) not available. Ensure the script is loaded.",
                 );
                 return null;
             }
         },
-        [recaptchaSiteKey] // Dependency array includes recaptchaSiteKey
+        [recaptchaSiteKey], // Dependency array includes recaptchaSiteKey
     );
 
     return { executeRecaptcha };

deployment/docker/docker-compose.yml

@@ -57,7 +57,11 @@ services:
             # checking the logs for the API key.
             # - MEDIALIT_APIKEY=${MEDIALIT_APIKEY}
             # - MEDIALIT_SERVER=http://medialit
-
+            # 
+            # Google reCAPTCHA v3 is used to prevent abuse of the login functionality.
+            # Uncomment the following lines to use reCAPTCHA.
+            # - RECAPTCHA_SITE_KEY=${RECAPTCHA_SITE_KEY}
+            # - RECAPTCHA_SECRET_KEY=${RECAPTCHA_SECRET_KEY}
         expose:
             - "${PORT:-80}"