Development » aiaxio

Description:

Overview¶

The frontend application requires proper basic authentication handling and middleware integration to ensure secure navigation and form submission workflows. This issue addresses the implementation of authentication checks and middleware logic in the Navbar and MultiStepForm components.

Problem¶

• The Navbar currently displays authentication states (Sign In/Sign Up or Sign Out) but lacks middleware to validate user sessions consistently on page reload or navigation.
• The MultiStepForm fetches user data via useSWR and checks authentication with checkAuth, but there’s no centralized middleware to handle redirects or session expiration gracefully.
• On reload, form fields (e.g., toolName) may not populate correctly due to timing issues with authentication and data fetching.

Tasks¶

1. Navbar Authentication Handling

   • Add middleware to validate the user session on each navigation or page load using useUserAuth.
   • Ensure isAuthenticated and userInfo are updated in real-time, avoiding stale states during loading.
   • Fix skeleton loading to persist only during initial auth checks, not on subsequent updates.

2. Middleware Integration

   • Implement a reusable middleware function (e.g., authMiddleware) to:
     • Verify session validity via an API call (e.g., /api/auth/check).
     • Redirect to /auth/signin if the session is invalid or expired, preserving the callback URL.
   • Apply this middleware to protect routes like /submit-ai and ensure seamless redirects.

3. MultiStepForm Fixes

   • Synchronize form initialization with authentication state, ensuring latestSubmission data (e.g., toolName) loads only after auth is confirmed.
   • Adjust useSWR to wait for isAuthenticated before fetching, preventing stale Redux state from overriding form values.
   • Update form.reset logic to conditionally load step-specific fields based on latestSubmission.stepCompleted (Step 1, Step 2, or all from Redux).

Acceptance Criteria¶

• Navbar shows correct buttons (Sign In/Sign Up or Sign Out) based on real-time auth state, with no flicker on reload.
• Middleware redirects unauthenticated users to /auth/signin with a callback URL (e.g., /submit-ai).
• MultiStepForm loads toolName and other fields correctly on reload when latestSubmission exists, respecting stepCompleted logic:
  • Step 1: Only Step 1 fields from latestSubmission, rest from Redux.
  • Step 2: Step 1 and 2 fields from latestSubmission, rest from Redux.
  • Step 3+: All fields from Redux.
• No console errors related to authentication or data fetching.
• Skeleton loading appears only during initial auth/data fetch, not on subsequent updates.

Steps to Reproduce¶

1. Open the app and navigate to /submit-ai.
2. Reload the page while authenticated with a latestSubmission containing toolName.
3. Observe toolName missing in the form and inconsistent Navbar button states.

Technical Notes¶

• Use useUserAuth’s checkAuth and executeWithAuth for session validation.
• Leverage useSWR’s isLoading and error states to manage UI updates.
• Persist Redux state with localStorage to maintain toolState across reloads (if not already implemented).
• Test with edge cases: logged out, session expired, and partial form submissions.