Try Fair Enhancements

frontend/.env.sample

@@ -6,7 +6,12 @@ VITE_BASE_API_URL = "http://localhost:8000/api/v1/"
 
 # Authentication: "legacy" or "hanko"
 VITE_AUTH_PROVIDER = "legacy"
-# VITE_HANKO_URL = "https://dev.login.hotosm.org"
+
+
+# The Hanko authentication URL for user authentication.
+# Data type: String (e.g., "https://dev.login.hotosm.org").
+# Default value: "https://dev.login.hotosm.org".
+VITE_HANKO_URL = "https://dev.login.hotosm.org"
 
 # The matomo application ID.
 # Data type: Positive Integer (e.g., 0).
@@ -225,35 +230,35 @@ VITE_MAXIMUM_ORTHO_SKEW_TOLEARANCE_AND_MAX_ANGLE_CHANGE_IN_DEGREES = 45
 # Data type: String (e.g., "#247DCACC").
 # Note: Colors must be hex codes or valid colors. e.g red, green, #fff.
 # Default value: "#D73434".
-PREDICTIONS_RESULTS_POINT_FILL_COLOR = "#34D77C"
+VITE_PREDICTIONS_RESULTS_POINT_FILL_COLOR = "#34D77C"
 
 # The outline color for the prediction requests points.
 # Data type: String (e.g., "#247DCACC").
 # Note: Colors must be hex codes or valid colors. e.g red, green, #fff.
 # Default value: "#D73434".
-PREDICTIONS_RESULTS_POINT_OUTLINE_COLOR = "#34D77C"
+VITE_PREDICTIONS_RESULTS_POINT_OUTLINE_COLOR = "#34D77C"
 
 
 #The URL to fetch the latest fair updates.
 # Data type: String
 # Default value: "https://raw.githubusercontent.com/hotosm/fAIr/develop/docs/assets/fair-updates.json".
-FAIR_VIDEO_UPDATES_URL = "https://raw.githubusercontent.com/hotosm/fAIr/develop/docs/assets/fair-updates.json";
+VITE_FAIR_VIDEO_UPDATES_URL = "https://raw.githubusercontent.com/hotosm/fAIr/develop/docs/assets/fair-updates.json";
 
 #FAIR Youtube Backup Video URL to use when invalid youtube url is returned.
 # Data type: String
 # Default value: "https://www.youtube.com/embed/N2_9Bvm05_0?si=to_2aoeRCW3APmmZ".
-FAIR_VIDEO_BACKUP_URL = "https://www.youtube.com/embed/N2_9Bvm05_0?si=to_2aoeRCW3APmmZ"
+VITE_FAIR_VIDEO_BACKUP_URL = "https://www.youtube.com/embed/N2_9Bvm05_0?si=to_2aoeRCW3APmmZ"
 
 
 # The number of required MapSwipe validations for a prediction to be considered valid.
 # Data type: Positive Integer (e.g., 4).
 # Default value: 4.
-MAPSWIPE_VERIFICATION_NUMBER = 4
+VITE_MAPSWIPE_VERIFICATION_NUMBER = 4
 
 # The group size for MapSwipe projects.
 # Data type: Positive Integer (e.g., 25).
 # Default value: 25.
-MAPSWIPE_GROUP_SIZE = 25
+VITE_MAPSWIPE_GROUP_SIZE = 25
 
 
 # The Hanko authentication token for user authentication. ####### ONLY NEEDED IN DEVELOPMENT ENVIRONMENT. ########
@@ -277,3 +282,9 @@ VITE_TRY_FAIR_GRID_SIZE = 5
 # Data type: String
 # Default value: "https://fair.hotosm.org/".
 VITE_FAIR_PROD_URL = "https://fair.hotosm.org/"
+
+# When set to "true", bypasses authentication checks on the Try fAIr page,
+# allowing access to imagery/location flows without signing in.
+# Data type: Boolean string ("true" / "false")
+# Default value: "false".
+VITE_DISABLE_AUTH_ON_TRY_FAIR = "true"

frontend/package.json

@@ -15,6 +15,7 @@
     "prepare": "cd .. && husky frontend/.husky"
   },
   "dependencies": {
+    "@hookform/resolvers": "^5.4.0",
     "@hotosm/hanko-auth": "^0.5.2",
     "@hotosm/tool-menu": "0.2.7",
     "@reactour/tour": "^3.7.0",
@@ -41,6 +42,7 @@
     "react-dom": "19.1.0",
     "react-dropzone": "^14.2.10",
     "react-error-boundary": "^4.0.13",
+    "react-hook-form": "^7.82.0",
     "react-markdown": "^10.1.0",
     "react-medium-image-zoom": "^5.2.11",
     "react-router-dom": "^6.26.2",
@@ -50,6 +52,7 @@
     "terra-draw-maplibre-gl-adapter": "^1.0.1",
     "vaul": "^1.1.2",
     "xmlbuilder2": "^3.1.1",
+    "zod": "^4.4.3",
     "zustand": "^5.0.3"
   },
   "devDependencies": {

frontend/src/app/providers/auth-provider.tsx

@@ -4,6 +4,7 @@ import { authService } from "@/services";
 import {
   AUTH_PROVIDER,
   BASE_API_URL,
+  DISABLE_AUTH_ON_TRY_FAIR,
   HOT_FAIR_LOCAL_STORAGE_ACCESS_TOKEN_KEY,
   HOT_FAIR_LOGIN_SUCCESSFUL_SESSION_KEY,
   HOT_FAIR_SESSION_REDIRECT_KEY,
@@ -165,6 +166,7 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
   };
 
   useEffect(() => {
+    if (DISABLE_AUTH_ON_TRY_FAIR) return;
     if (AUTH_PROVIDER === "hanko") {
       fetchUserProfile();
     } else if (token) {
@@ -234,6 +236,7 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
 
   useEffect(() => {
     if (AUTH_PROVIDER !== "hanko") return;
+    if (DISABLE_AUTH_ON_TRY_FAIR) return;
 
     const handleLogin = (e: Event) => {
       const user = (e as CustomEvent).detail?.user;
@@ -261,6 +264,7 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
    * This is majorly to keep the user profile information up to date, especially when the user is logged in.
    */
   useEffect(() => {
+    if (DISABLE_AUTH_ON_TRY_FAIR) return;
     const intervalId = setInterval(() => {
       if (AUTH_PROVIDER === "hanko" && !IS_DEV) {
         fetch(`${BASE_API_URL}auth/me/`, { credentials: "include" })

frontend/src/app/router.tsx

@@ -1,4 +1,5 @@
 import { APPLICATION_ROUTES } from "@/constants";
+import { isNavigationRouteEnabled } from "@/constants/general";
 import { MainErrorFallback } from "@/components/errors";
 import {
   ModelFormsLayout,
@@ -10,13 +11,34 @@ import {
   Navigate,
   RouterProvider,
   createBrowserRouter,
+  useLocation,
 } from "react-router-dom";
 import { ModelsProvider } from "@/app/providers/models-provider";
 import { NuqsAdapter } from "nuqs/adapters/react-router/v6";
 
+const RouteAvailabilityGuard = ({ children }: React.PropsWithChildren) => {
+  const location = useLocation();
+
+  if (!isNavigationRouteEnabled(location.pathname)) {
+    return (
+      <Navigate
+        to={APPLICATION_ROUTES.NOTFOUND}
+        replace
+        state={{ from: location.pathname }}
+      />
+    );
+  }
+
+  return children;
+};
+
 const router = createBrowserRouter([
   {
-    element: <RootLayout />,
+    element: (
+      <RouteAvailabilityGuard>
+        <RootLayout />
+      </RouteAvailabilityGuard>
+    ),
     children: [
       /**
        * Landing page route starts