Solved Bug: Authentication Redirect Issue in Sanicle-AI Platform

Discussions
1

Executive Summary

This report documents a critical authentication redirect issue in the Sanicle-AI FemTech Health Platform. The bug prevented users from being redirected to their personal dashboards after successful login in the production environment, despite working correctly in local development. Through systematic troubleshooting and multiple fix attempts, we identified the root cause as a combination of middleware conflicts, authentication state synchronization issues, and routing complications. The issue was resolved with a multi-stage solution that ensures reliable navigation to user dashboards.

Project Introduction

Sanicle-AI is a comprehensive FemTech health management platform designed for professional women. The application provides features including:

  • Period tracking with smart cycle prediction
  • Health consultations with AI assistants
  • Medical appointment scheduling
  • Personalized health data analysis

The platform is built using Next.js 15.0.0-canary.152 with NextAuth 5.0.0-beta.22 for authentication, deployed on Vercel. It includes role-based access control with separate dashboards for employees and HR personnel.

Bug Description

Symptoms

  • Users could successfully log in to the platform (authentication tokens were properly set)
  • User avatars and names appeared in the navigation bar, confirming successful authentication
  • However, the browser remained on the login page instead of redirecting to the user’s personal dashboard
  • The issue only occurred in the Vercel production environment; local development functioned correctly

Expected Behavior

Upon successful authentication, users should be automatically redirected to their personal dashboard:

  • HR users to: /hr-dashboard/{userId}
  • Employee users to: /employee-dashboard/{userId}

Actual Behavior

After successful login, users remained on the login page (/login), despite authentication tokens being properly set. Network logs showed attempts to access the dashboard pages, but the browser never completed the navigation.

Environment Details

  • Development (Working): Local environment using Next.js development server
  • Production (Failing): Vercel deployment
  • Browser: Issue consistent across Chrome, Firefox, and other modern browsers

Root Cause Analysis

After extensive investigation, we identified several contributing factors:

  1. Middleware Redirect Conflicts

    • The middleware.ts file contained redirect logic that potentially conflicted with NextAuth’s internal redirect mechanisms
    • Multiple redirect rules created race conditions where one redirect could interrupt another

  2. Authentication State Synchronization Timing

    • After successful authentication, there was a brief window where the client had the auth token but the server might not recognize it yet
    • Immediate redirects to protected routes failed during this synchronization window

  3. Next.js App Router & Dynamic Routes

    • The project uses Next.js 15 with the App Router and dynamic routes ([userId])
    • These dynamic routes appeared to have authentication verification that sometimes failed during immediate post-login redirects

  4. Client-Side Navigation Limitations

    • Browser security policies limited certain types of automatic redirects following authentication state changes
    • window.location redirects were inconsistently applied after the auth state change

Fix Attempts

Attempt 1: Environment Variable Configuration

  • Added and verified NEXTAUTH_URL and other environment variables in Vercel
  • Result: No improvement, still stuck on login page

Attempt 2: Middleware Modification

  • Updated redirect logic in middleware.ts
  • Added extensive logging
  • Normalized role names to lowercase
  • Result: Minimal improvement, brief flicker of dashboard before returning to login

Attempt 3: Client-Side Redirect Enhancement

  • Modified the login hook to use different redirect methods
  • Implemented window.location.href and router.push() with fallbacks
  • Result: Some users saw brief redirection before returning to login page

Attempt 4: TypeScript Error Fixes

  • Fixed type errors in form handling with never types
  • Changed direct property access to state monitoring pattern
  • Result: Build errors resolved, but redirect issue persisted

Attempt 5: Middleware Simplification

  • Completely disabled middleware redirects to prevent conflicts
  • Result: Improved stability but didn’t fully resolve the issue

Final Fix Solution

The issue was resolved with a multi-stage approach that maximizes reliability:

  1. Simplified Authentication Flow

    • Disabled conflicting middleware redirects
    • Created a staged navigation process with fallback options
    • Added multiple navigation methods to ensure at least one would succeed

  2. Two-Step Login Process

    • After successful authentication, briefly show a success page with navigation options
    • Attempt automatic redirect after a short delay (800ms)
    • Provide manual navigation buttons as fallback

  3. Multiple Navigation Methods

    • Direct window location navigation
    • Form-based navigation
    • Direct link navigation
    • Each targeting the user’s specific dashboard

  4. Static Fallback Pages

    • Created static dashboard pages that don’t rely on dynamic routing
    • These pages served as reliable intermediate navigation points

The final solution prioritizes reliability over the ideal UX of an immediate redirect, ensuring users can always reach their dashboard while minimizing friction.

Code Changes Detail

1. Middleware Simplification (middleware.ts)

// Before:
export async function middleware(request: NextRequest) {
  console.log("Middleware executing, path:", request.nextUrl.pathname);
  
  const token = await getToken({ 
    req: request, 
    secret: process.env.NEXTAUTH_SECRET 
  }) as Token | null;
  if (token) {
    console.log("Middleware Token exists:", token.id, "role:", token.role);
  } else {
    console.log("Middleware Token does not exist");
  }
  const path = request.nextUrl.pathname;
  const origin = request.nextUrl.origin;
  
  // Multiple redirect rules based on path and auth state
  // ...
}
// After:
export async function middleware(request: NextRequest) {
  // Only log access, no redirects
  console.log("[Middleware] Access path:", request.nextUrl.pathname);
  
  // Return without redirecting
  return NextResponse.next();
}
export const config = {
  matcher: [
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ]
};

2. Login Form Component (app/(auth)/login/components/LoginForm.tsx)

// Key modifications:
useEffect(() => {
  if (state.status === 'success' && state.userId) {
    console.log('Login successful:', state);
    setLoginSuccess(true);
    setUserId(state.userId);
    toast.success("Login successful!");
    
    // Try auto-redirect but preserve fallback UI
    const timer = setTimeout(() => {
      try {
        window.location.href = `/employee-dashboard/${state.userId}`;
      } catch (error) {
        console.error("Auto-redirect failed, waiting for user to choose manually:", error);
        // If fails, user will see manual options
      }
    }, 800);
    
    return () => clearTimeout(timer);
  } else if (state.status === 'failed') {
    toast.error("Invalid email or password");
    setIsSubmitting(false);
  }
}, [state]);
// Navigation handler with fallbacks
const handleDirectNavigation = () => {
  try {
    if (window.top) {
      window.top.location.href = `/employee-dashboard/${userId}`;
    } else {
      window.location.href = `/employee-dashboard/${userId}`;
    }
  } catch (error) {
    // Backup form submission method
    const form = document.createElement('form');
    form.method = 'GET';
    form.action = `/employee-dashboard/${userId}`;
    form.target = '_top';
    document.body.appendChild(form);
    form.submit();
  }
};

3. Dashboard Page (app/dashboard/page.tsx)

// Added direct navigation button:
<button
  onClick={handleDirectNavigation}
  disabled={isRedirecting}
  className="w-full bg-blue-600 text-white px-6 py-3 rounded text-center hover:bg-blue-700 transition-colors disabled:bg-blue-400"
>
  {isRedirecting ? 'Redirecting...' : 'Go to My Dashboard'}
</button>
// And supporting navigation handler:
const handleDirectNavigation = () => {
  if (!session?.user?.id) return;
  
  setIsRedirecting(true);
  
  try {
    window.location.href = `/employee-dashboard/${session.user.id}`;
  } catch (error) {
    console.error("Navigation failed:", error);
    setIsRedirecting(false);
  }
};

4. Static Employee Dashboard (app/employee-dashboard/static/page.tsx)

Created a new static dashboard page that doesn’t rely on dynamic routes, serving as a reliable intermediate page when needed.

Lessons Learned

  1. Authentication & Routing Complexity

    • Modern authentication frameworks and advanced routing systems can create complex interactions
    • Always implement fallback navigation options for critical paths

  2. Environment Differences

    • Local development and production environments can behave differently with auth redirects
    • Test auth flows specifically in the production environment

  3. Middleware Caution

    • Be cautious with middleware that manipulates routing, especially with authentication
    • Consider disabling custom middleware when using auth frameworks with built-in redirect logic

  4. Progressive Enhancement

    • Design critical user flows with progressive enhancement in mind
    • Provide multiple ways to complete important actions (auto-redirect, buttons, links, forms)

Recommendations

  1. Consider NextAuth Version Downgrade

    • The beta version of NextAuth 5 may have compatibility issues with Next.js 15
    • A more stable version might eliminate the need for workarounds

  2. Traditional Pages Directory

    • Consider migrating critical auth flows to the traditional Next.js pages directory
    • The App Router’s complexity may be contributing to the routing issues

  3. Comprehensive Redirect Testing

    • Add specific tests for authentication redirects in the CI/CD pipeline
    • Test auth flows in production-like environments before deployment

  4. Monitoring

    • Implement detailed client-side logging for authentication flows
    • Monitor failed redirects to catch regression issues
1 Like
2

Thanks for sharing your debugging process and solution!

This could help lots of people facing similar auth issues, or trying to avoid them in the first place.

1 Like