Keycloakが使用できないときにメールとパスワードでの認証を追加

view-admin/package.json

@@ -16,6 +16,7 @@
     "@types/node": "20.3.1",
     "@types/react": "18.2.13",
     "@types/react-dom": "18.2.6",
+    "bcryptjs": "^2.4.3",
     "classnames": "^2.3.2",
     "dotenv": "^16.4.5",
     "eslint": "8.43.0",
@@ -41,6 +42,7 @@
     "@graphql-codegen/typescript-graphql-request": "^6.2.0",
     "@graphql-codegen/typescript-operations": "^4.2.3",
     "@graphql-codegen/typescript-react-apollo": "^4.3.0",
+    "@types/bcryptjs": "^2.4.6",
     "@types/minio": "^7.1.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",

view-admin/src/components/common/Button/Button.module.css

@@ -12,6 +12,16 @@
   box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
 }
 
+.fullWidth {
+  width: 100%;
+}
+
+.disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+  filter: grayscale(0.3);
+}
+
 .l {
   font-size: x-large;
   padding: 0.8rem 1.5rem;
@@ -40,6 +50,11 @@
   transition: 0.25s;
 }
 
+.primary:disabled:hover {
+  background-color: white;
+  color: var(--main-color);
+}
+
 @media screen and (min-width: 1224px) {
   .m {
     font-size: medium;

view-admin/src/components/common/Button/Button.tsx

@@ -7,6 +7,8 @@ interface ButtonProps {
   size: string;
   shape: string;
   onClick: () => void;
+  disabled?: boolean;
+  fullWidth?: boolean;
 }
 const Button = (props: ButtonProps) => {
   return (
@@ -17,8 +19,11 @@ const Button = (props: ButtonProps) => {
             styles.primary,
             styles[props.size],
             styles[props.shape],
+            props.fullWidth && styles.fullWidth,
+            props.disabled && styles.disabled,
           )}
           onClick={props.onClick}
+          disabled={props.disabled}
         >
           {props.children}
         </button>

view-admin/src/pages/_app.tsx

@@ -37,7 +37,7 @@ export default function App({
   router,
 }: AppProps) {
   useEffect(() => {
-    if (!session) {
+    if (!session && router.pathname !== "/") {
       router.push("/");
     }
   }, [router, session]);

view-admin/src/pages/api/auth/[...nextauth].ts

@@ -1,12 +1,83 @@
 import NextAuth from "next-auth";
+import type { NextAuthOptions } from "next-auth";
 import KeycloakProvider from "next-auth/providers/keycloak";
+import CredentialsProvider from "next-auth/providers/credentials";
+import bcrypt from "bcryptjs";
 
-export default NextAuth({
-  providers: [
-    KeycloakProvider({
-      clientId: process.env.KEYCLOAK_ID!,
-      clientSecret: process.env.KEYCLOAK_SECRET!,
-      issuer: process.env.KEYCLOAK_ISSUER!,
-    }),
-  ],
+const authMode = process.env.AUTH_MODE || "keycloak";
+
+const credentialsProvider = CredentialsProvider({
+  name: "Credentials",
+  credentials: {
+    email: { label: "Email", type: "text" },
+    password: { label: "Password", type: "password" },
+  },
+  async authorize(credentials) {
+    if (!credentials?.email || !credentials?.password) return null;
+
+    const multi = process.env.ADMIN_USERS;
+    let allowed: Record<string, string> = {};
+    if (multi) {
+      multi
+        .split(",")
+        .map((pair) => pair.trim())
+        .forEach((pair) => {
+          const [e, h] = pair.split(":");
+          if (e && h) allowed[e.toLowerCase()] = h;
+        });
+    } else if (process.env.ADMIN_EMAIL && process.env.ADMIN_PASSWORD_HASH) {
+      allowed[process.env.ADMIN_EMAIL.toLowerCase()] =
+        process.env.ADMIN_PASSWORD_HASH;
+    }
+
+    const hash = allowed[credentials.email.toLowerCase()];
+    if (!hash) return null;
+    const ok = await bcrypt.compare(credentials.password, hash);
+    if (!ok) return null;
+    return { id: credentials.email, email: credentials.email };
+  },
 });
+
+const providers = [] as NextAuthOptions["providers"];
+
+if (authMode === "keycloak") {
+  if (
+    !process.env.KEYCLOAK_ID ||
+    !process.env.KEYCLOAK_SECRET ||
+    !process.env.KEYCLOAK_ISSUER
+  ) {
+    console.warn(
+      "[auth] AUTH_MODE=keycloak but Keycloak env vars missing → fallback to credentials if available.",
+    );
+  } else {
+    providers.push(
+      KeycloakProvider({
+        clientId: process.env.KEYCLOAK_ID,
+        clientSecret: process.env.KEYCLOAK_SECRET,
+        issuer: process.env.KEYCLOAK_ISSUER,
+      }),
+    );
+  }
+}
+
+if (authMode === "credentials" || providers.length === 0) {
+  providers.push(credentialsProvider);
+}
+
+export const authOptions: NextAuthOptions = {
+  providers,
+  session: { strategy: "jwt" },
+  callbacks: {
+    async session({ session, token }) {
+      if (token?.email)
+        session.user = { ...(session.user || {}), email: token.email } as any;
+      return session;
+    },
+    async jwt({ token, user }) {
+      if (user?.email) token.email = user.email;
+      return token;
+    },
+  },
+};
+
+export default NextAuth(authOptions);