What is the cause of hydration mismatch here?
I'm trying to create an authentication check which redirects the user to the login page when they aren't authenticated, however I am encountering a hydration mismatch when trying to show a loading page in the flow.
export default function AuthProvider({ children }) {
const [user, setUser] = createSignal(null);
const [isLoading, setIsLoading] = createSignal(true);
const location = useLocation();
const navigate = useNavigate();
const apiUrl = import.meta.env.VITE_API_URL;
const secret = import.meta.env.AES_SECRET;
const isAuthenticated = !!user();
createEffect(() => {
const checkAuth = async () => {
try {
const response = await fetch(
`${apiUrl}/token/validate`,
{
method: "POST"
}
);
if (response.status != 200) {
console.error("Failed to validate token");
localStorage.removeItem("account_details");
}
} catch (error) {
console.error("Failed to validate token", error);
localStorage.removeItem("account_details");
} finally {
setIsLoading(false);
}
};
checkAuth();
});
createEffect(() => {
if (!isLoading()) {
if (!isAuthenticated && location.pathname !== "/login") {
navigate("/login");
} else if (isAuthenticated && location.pathname === "/login") {
navigate("/");
}
}
});
const context = { user, isAuthenticated, login, logout, isLoading };
const loading = () => {
return (
<div>
<div>
<p>Loading...</p>
</div>
</div>
);
};
return (
<AuthContext.Provider value={context}>
<Show when={!isLoading()} fallback={loading()}>
<div>
<Sidebar />
<div>
<Header />
<main>
{children}
</main>
</div>
</div>
</Show>
</AuthContext.Provider>
);
}export default function AuthProvider({ children }) {
const [user, setUser] = createSignal(null);
const [isLoading, setIsLoading] = createSignal(true);
const location = useLocation();
const navigate = useNavigate();
const apiUrl = import.meta.env.VITE_API_URL;
const secret = import.meta.env.AES_SECRET;
const isAuthenticated = !!user();
createEffect(() => {
const checkAuth = async () => {
try {
const response = await fetch(
`${apiUrl}/token/validate`,
{
method: "POST"
}
);
if (response.status != 200) {
console.error("Failed to validate token");
localStorage.removeItem("account_details");
}
} catch (error) {
console.error("Failed to validate token", error);
localStorage.removeItem("account_details");
} finally {
setIsLoading(false);
}
};
checkAuth();
});
createEffect(() => {
if (!isLoading()) {
if (!isAuthenticated && location.pathname !== "/login") {
navigate("/login");
} else if (isAuthenticated && location.pathname === "/login") {
navigate("/");
}
}
});
const context = { user, isAuthenticated, login, logout, isLoading };
const loading = () => {
return (
<div>
<div>
<p>Loading...</p>
</div>
</div>
);
};
return (
<AuthContext.Provider value={context}>
<Show when={!isLoading()} fallback={loading()}>
<div>
<Sidebar />
<div>
<Header />
<main>
{children}
</main>
</div>
</div>
</Show>
</AuthContext.Provider>
);
}
