hono.js + shadcnUI, ログイン画面の例

概要:

hono.js + shadcnUI ログイン画面の例になります。

• 前の、cookie認証方式になります。
• Middlewareで、ログイン完了を検証します。

[ 公開日: 2024/10/04 ]

---

構成

• hono 4
• shadcnUI
• React
• typescript

---

作成したコード

• https://github.com/kuc-arc-f/hono_64shadcn/tree/main/example/login_test

---

dev-start

bun run dev

---

• Middleware 検証
• example/login_test/src/index.tsx
• https://github.com/kuc-arc-f/hono_64shadcn/blob/main/example/login_test/src/index.tsx

app.use("/*", async (c, next) => {
  const key = import.meta.env.VITE_APP_NAME + "_auth";
  const valid = await Common.validUser(c);
  if(!valid) {
    console.log("nothing, user-cookie");
    return c.redirect("/login");
    //await next();
  } else {
    await next();
  }
});

---

• ログイン検証
• example/login_test/src/routes/userRouter.ts
• https://github.com/kuc-arc-f/hono_64shadcn/blob/main/example/login_test/src/routes/userRouter.ts

....

  login: async function(c: any) :any
  {
    const retObj = {ret: 500, message: ""};
    try{    
      const body = await c.req.json();
console.log(body);
console.log("VITE_APP_NAME=" , import.meta.env.VITE_APP_NAME);
console.log("VITE_AUTH_USER_ID=" , import.meta.env.VITE_AUTH_USER_ID);
console.log("VITE_AUTH_USER_MAIL= ", import.meta.env.VITE_AUTH_USER_MAIL);
//console.log("VITE_AUTH_PASSWORD= ", import.meta.env.VITE_AUTH_PASSWORD);
      if(!body){
        throw new Error("nothing, body");
      }
      if(import.meta.env.VITE_AUTH_USER_MAIL === body.email
        && import.meta.env.VITE_AUTH_PASSWORD === body.password
      ) {
        const key = import.meta.env.VITE_APP_NAME + "_auth"
        setCookie(c, key, import.meta.env.VITE_AUTH_USER_ID, 
        {
          maxAge: 60 * 60 * 12,
          httpOnly: true,       // JavaScriptからアクセス不可にしてセキュリティ向上
          secure: true,         // HTTPSのみで送信
          sameSite: "Strict",   // クロスサイトリクエストを防ぐ
        });
        retObj.ret = 200;
        return retObj;
      }
      retObj.ret = 400;
      return retObj;
    } catch (e) {
      console.error(e);
      return retObj;
    } 
  },