How a tiny if (user) broke my Next.js login page

Recently I shipped a small auth change that completely broke my Next.js login page and showed only a blank screen. This is a quick debugging story of how a simple if (user) { return null; } caused the issue in a Firebase + API token setup, and how I fixed it by checking both user and token together. [conversation_history:38]

My auth flow setup

In my app, Firebase handles authentication and a separate backend API issues a token that I store in localStorage. That means just having a Firebase user object is not enough to access protected pages like /dashboard—the API token is also required. [conversation_history:38]

The intended flow is: user logs in, Firebase returns a user, my API returns a token, I store that token, and all protected routes check both user and token before allowing access. [conversation_history:38]

The strange behavior I noticed

Before fixing the bug, my onboarding and authentication pages started behaving strangely. Even without a proper login and token, the app was redirecting to /onboarding, and from there it refused to move to /dashboard. [conversation_history:38]

In Firebase, the user existed, but in localStorage the token was missing, so my backend could not authenticate any API calls, which explains why /dashboard was effectively blocked. [conversation_history:38]

The original redirect logic

My login page is a client component using the useAuth context, useRouter, and useSearchParams from next/navigation to handle redirects based on the auth state. [web:81]

"use client";
import React, { useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { useAuth } from "@/contexts/AuthContext";
export default function LoginPage() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const { login, signInWithGoogle, user, loading: authLoading, token } = useAuth();
  const router = useRouter();
  const searchParams = useSearchParams();
  const redirect = searchParams.get("redirect");
  React.useEffect(() => {
    if (!authLoading && user && token) {
      if (user.onboardingCompleted) {
        router.replace(redirect || "/dashboard");
      } else {
        router.replace("/onboarding");
      }
    }
  }, [user, authLoading, router, redirect, token]);
}

The idea was simple: if the user is already authenticated and has a token, do not show the login form, just redirect them to the right page based on onboardingCompleted. [conversation_history:38]

The tiny condition that broke everything

At one point, I added a small guard to avoid showing the login form to logged-in users:

if (authLoading) {
  return null;
}
if (user) {
  return null;
}

This looked harmless, but it created a big problem: as soon as user became truthy (even without a valid API token), the login page returned null, which meant React rendered nothing and the screen went completely blank while my redirects still depended on both user and token. [conversation_history:38]

How I finally debugged it

After deploying, I tried opening /onboarding. It correctly redirected me to /auth/login, but there I saw only a blank screen in the browser. No error message, just a white page. [conversation_history:38]

I added temporary logs and carefully checked my conditions. That is when I noticed that the login page was returning null whenever user was set, even though token was still missing, which explained the blank screen and the stuck navigation. [conversation_history:38]

The actual fix: check user and token together

The correct behavior for my setup is to hide the login page only when both user and token are present, because that means the user is fully authenticated for Firebase and the backend API. [conversation_history:38]

if (authLoading) {
  return null; // or a spinner
}
if (user && token) {
  return null;
}

After changing if (user) to if (user && token), the blank screen disappeared, the login page rendered correctly for unauthenticated users, and authenticated users with a token were redirected as expected. [conversation_history:38]

What this bug taught me

This small bug reminded me that in real-world apps, “logged in” is rarely just a single boolean; it is often a combination of different states like user, token, roles, or onboardingCompleted. [web:90]

Whenever I write conditions like if (user) now, I double-check what “user” actually means in that context and whether I also need to validate tokens or other flags to avoid subtle bugs like blank screens and broken redirects. [conversation_history:38]