remix-hono auth middleware usage #38

diurivj · 2024-12-21T06:51:03Z

diurivj
Dec 21, 2024

Is this the intended way to implement the remix-hono middleware?

// server.ts

import {
  createCookieSessionStorage,
  type AppLoadContext,
  type Session,
  type SessionStorage,
} from "react-router";
import { createHonoServer } from "react-router-hono-server/node";
import { getSession, getSessionStorage, session } from "remix-hono/session";
import { db } from "~/db/index";

declare module "react-router" {
  interface AppLoadContext {
    sessionStorage: SessionStorage;
    session: Session;
    db: typeof db;
  }
}

export default await createHonoServer({
  configure: (server) => {
    server.use(
      session({
        autoCommit: true,
        createSessionStorage() {
          const sessionStorage = createCookieSessionStorage({
            cookie: {
              name: "__session",
              httpOnly: true,
              path: "/",
              sameSite: "lax",
              secrets: [process.env.SESSION_SECRET!],
              secure: process.env.NODE_ENV === "production",
            },
          });

          return {
            ...sessionStorage,
            async commitSession(session) {
              return sessionStorage.commitSession(session, {
                maxAge: 60 * 60 * 24 * 30, // 30 days
              });
            },
          };
        },
      })
    );
  },
  getLoadContext(c): AppLoadContext {
    const sessionStorage = getSessionStorage(c);
    const session = getSession(c);

    return { ...c.env, sessionStorage, session, db };
  },
});

// routes/index.tsx

import { Form, redirect } from "react-router";
import { authenticator } from "~/auth/auth.server";
import type { Route } from "./+types/home";

export default function Screen() {
  return (
    <Form method="post">
      <input type="email" name="email" required />
      <input
        type="password"
        name="password"
        autoComplete="current-password"
        required
      />
      <button>Sign In</button>
    </Form>
  );
}

export async function action({ request, context }: Route.ActionArgs) {
  let user = await authenticator.authenticate("user-pass", request);
  context.session.set("user", user);
  throw redirect("/", {
    headers: {
      "Set-Cookie": await context.sessionStorage.commitSession(context.session),
    },
  });
}

export async function loader({ context }: Route.LoaderArgs) {
  let user = context.session.get("user");
  if (user) throw redirect("/dashboard");
  return null;
}