Recently, I added a simple login feature using remix-auth and prisma. However, in an unusual manner, within my action function, the correct credentials trigger a catch block error with a Response. Everything works fine when incorrect credentials are entered or there is a CSRF issue (using remix-utils). Here's how it's implemented:
/services/session.server.ts
import { createCookieSessionStorage } from "@remix-run/node";
if (!process.env.SESSION_SECRET) {
throw new Error("SESSION_SECRET is not set");
}
// export the entire sessionStorage object
export const sessionStorage = createCookieSessionStorage({
cookie: {
name: "_vSession",
sameSite: "lax",
path: "/",
httpOnly: true,
secrets: [process.env.SESSION_SECRET],
secure: process.env.NODE_ENV === "production",
},
});
export const { getSession, commitSession, destroySession } = sessionStorage;
/services/auth-strategies/form.strategy.server.ts
import type { UserSession } from "types/auth";
import { FormStrategy } from "remix-auth-form";
import prisma from "lib/prisma";
import { AuthorizationError } from "remix-auth";
import { compare } from "bcrypt";
export const formStrategy = new FormStrategy<UserSession>(async ({ form }) => {
const username = form.get("username") as string;
const password = form.get("password") as string;
//more code here...
});
More implementation details can be found in various service files. The setup is being utilized normally.
root.tsx:
// More code here...
and in the _index.tsx, I redirect to the dashboard page.
// More code here...
The login page contains components for loader, page layout, and actions triggering the authentication flow.
// More code here...
The Form component handles user input during the login process.
// More code here...
In the login page code where the issue occurs, marked by @!@ FLOWS HERE @!@, strange behavior happens that triggers the ErrorBoundary. Why does this happen? When the authenticator function is removed from the try/catch block, the redirection works correctly even on wrong credentials.