ハロー！プロジェクトファンクラブのデジタル会員証があまりに杜撰なので、正しい実装を考える

import "server-only";
import { getIronSession, IronSession } from "iron-session";
import { cookies } from "next/headers";

export type SessionData =
  | {
      id: string;
      name: string;
      membershipExpiry: string;
    }
  | {
      id: undefined;
      name: undefined;
      membershipExpiry: undefined;
    };

const COOKIE_NAME = "dummy-session";
const SESSION_PASSWORD = "dummy-password-12345678901234567890";

export async function getSession(): Promise<IronSession<SessionData>> {
  const cookieStore = await cookies();

  const session = await getIronSession<SessionData>(cookieStore, {
    cookieName: COOKIE_NAME,
    password: SESSION_PASSWORD,
    cookieOptions: {
      secure: process.env.NODE_ENV === "production",
    },
  });

  return session;
}

"use server";

import * as v from "valibot";
import { redirect } from "next/navigation";
import { getSession } from "@/lib/session";

const ValueSchema = v.object({
  name: v.string("氏名を入力してください"),
  id: v.string("会員番号を入力してください"),
  membershipExpiry: v.string("有効期限を入力してください"),
});

export async function registerUser(formData: FormData) {
  const name = formData.get("name");
  const id = formData.get("id");
  const membershipExpiry = formData.get("membershipExpiry");

  const inputValues = v.parse(ValueSchema, {
    name,
    id,
    membershipExpiry,
  });

  const session = await getSession();

  session.destroy();

  session.id = inputValues.id;
  session.name = inputValues.name;
  session.membershipExpiry = inputValues.membershipExpiry;

  await session.save();

  redirect("/membership-card");
}

import * as jose from "jose";
import fs from "fs/promises";

const { privateKey, publicKey } = await jose.generateKeyPair("RS256", {
  extractable: true,
});

const privateJWK = await jose.exportJWK(privateKey);
const publicJWK = await jose.exportJWK(publicKey);

await fs.writeFile("src/private-key.json", JSON.stringify(privateJWK, null, 2));
await fs.writeFile("src/public-key.json", JSON.stringify(publicJWK, null, 2));

import * as jose from "jose";
import privateKey from "./private-key.json";
import { SessionData } from "./session";

export async function generateMembershipToken(payload: SessionData): Promise<string> {
  return new jose.SignJWT(payload)
    .setProtectedHeader({ alg: "RS256" })
    .setIssuedAt()
    .setExpirationTime("1m")
    .sign(privateKey);
}

import * as jose from "jose";
import publicKey from "./public-key.json";
import { SessionData } from "./session";

export type MembershipTokenResult =
  | {
      success: true;
      data: SessionData;
    }
  | {
      success: false;
    };

export async function verifyMembershipToken(
  token: string,
): Promise<MembershipTokenResult> {
  try {
    const result = await jose.jwtVerify<SessionData>(
      token,
      await jose.importJWK(publicKey, "RS256"),
    );

    return {
      success: true,
      data: result.payload,
    };
  } catch (error) {
    return {
      success: false,
    };
  }
}

"use server";

import { generateMembershipToken } from "@/lib/membership-token";
import { getSession } from "@/lib/session";

export async function fetchMembershipToken() {
  const session = await getSession();
  if (!session.id) {
    throw new Error("Session not found");
  }

  return await generateMembershipToken(session);
}

"use client";

import * as QRCode from "qrcode";
import { Suspense, use, useCallback, useEffect, useState } from "react";
import { fetchMembershipToken } from "./fetch-membership-token";

function toQRCodeSvgString(token: string): Promise<string> {
  return QRCode.toString(token, {
    errorCorrectionLevel: "L",
    type: "svg",
  });
}

const QRCodeViewInner: React.FC<{ defaultSvgString: Promise<string> }> = ({
  defaultSvgString,
}) => {
  const [svgString, setSvgString] = useState(use(defaultSvgString));

  const resetSvgString = useCallback(async () => {
    const token = await fetchMembershipToken();
    const svgString = await toQRCodeSvgString(token);
    setSvgString(svgString);
  }, []);

  useEffect(() => {
    const timerId = setInterval(() => {
      resetSvgString();
    }, 1000 * 55);
    return () => clearInterval(timerId);
  }, [resetSvgString]);

  return (
    <img
      className="w-96"
      src={`data:image/svg+xml;utf8,${encodeURIComponent(svgString)}`}
      alt="QRコード"
    />
  );
};

"use client";

import { MembershipTokenResult, verifyMembershipToken } from "@/lib/membership-token";
import { useEffect, useState } from "react";
import { QrReader } from "react-qr-reader";

export const QrReaderPage: React.FC = () => {
  const [token, setToken] = useState<string | null>(null);
  const [verifiedResult, setVerifiedResult] = useState<MembershipTokenResult | null>(
    null,
  );

  useEffect(() => {
    if (token) {
      verifyMembershipToken(token).then((result) => setVerifiedResult(result));
    }
  }, [token]);

  return (
    <div>
      <div className="max-w-2xl mx-auto">
        <QrReader
          constraints={{ facingMode: "environment" }}
          onResult={(result, error) => {
            if (result) {
              const text = result.getText();
              setToken(text);
            }
          }}
          videoId="qr-reader"
        />
        {verifiedResult && (
          <div>
            {verifiedResult.success ? (
              <>
                <p>会員番号: {verifiedResult.data.id}</p>
                <p>氏名: {verifiedResult.data.name}</p>
                <p>有効期限: {verifiedResult.data.membershipExpiry}</p>
              </>
            ) : (
              <p className="text-danger-500">無効なQRコードです!!!!!!!!!!</p>
            )}
          </div>
        )}
      </div>
    </div>
  );
};