add sign in

front/src/app/Header.tsx

@@ -1,11 +1,18 @@
 import Image from "next/image";
 import Link from "next/link";
 import { LoginButton, LogoutButton } from "./authbuttons";
-export function Header() {
+
+import { getServerSession } from "next-auth/next";
+import { authOptions } from "./api/auth/[...nextauth]/options";
+
+export async function Header() {
+  const session = await getServerSession(authOptions);
+  const user = session?.user;
+
   return (
     <>
-      <header className="fixed top-0 z-50 w-full ">
-        <div className="flex justify-center w-full h-20">
+      <header className="fixed top-0 z-50 w-full">
+        <div className="flex justify-center w-full h-20 bg-white">
           <div className="w-11/12 flex items-center justify-between   text-black font-bold font-Nunito text-2xl px-1 space-x-1">
             <div className="flex items-center">
               <Image
@@ -21,14 +28,14 @@ export function Header() {
               </Link>
             </div>
             <div className="flex items-center space-x-2 font-Noto font-semibold text-xl">
-              <LoginButton />
-              <LogoutButton />
+              {user ? <LogoutButton /> : <LoginButton />}
             </div>
           </div>
         </div>
-        <div className="flex justify-center w-full bg-white border-0 ">
-          <div className="w-11/12 h-[3px] bg-gray-200 px-20"></div>
+        <div className="flex justify-center w-full border-0 bg-white">
+          <div className="w-11/12 h-[3px] bg-gray-300 px-20 rounded-full"></div>
         </div>
+        {/*<div className="flex justify-center w-full border-0 bg-gradient-to-b from-white to-transparent h-1"></div>*/}
       </header>
     </>
   );

front/src/app/api/auth/[...nextauth]/route.tsx → front/src/app/api/auth/[...nextauth]/options.ts

@@ -1,13 +1,8 @@
-import NextAuth from "next-auth";
 import { JWT } from "next-auth/jwt";
 import ZitadelProvider from "next-auth/providers/zitadel";
-import { custom } from "openid-client";
+import { NextAuthOptions } from "next-auth";
 
-custom.setHttpOptionsDefaults({
-  timeout: 10000,
-});
-
-const authOptions = {
+export const authOptions: NextAuthOptions = {
   providers: [
     ZitadelProvider({
       clientId: process.env.ZITADEL_CLIENT_ID as string,
@@ -50,8 +45,7 @@ const authOptions = {
       };
     },
   },
+  pages: {
+    signIn: '/signin',
+  },
 };
-
-const handler = NextAuth(authOptions);
-
-export { handler as GET, handler as POST };

front/src/app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,11 @@
+import NextAuth from "next-auth";
+import { custom } from "openid-client";
+import { authOptions } from "./options";
+
+custom.setHttpOptionsDefaults({
+  timeout: 10000,
+});
+
+const handler = NextAuth(authOptions);
+
+export { handler as GET, handler as POST };

front/src/app/authbuttons.tsx

@@ -8,7 +8,7 @@ export const LoginButton = () => {
       style={{ marginRight: 10 }}
       onClick={() => signIn()}
     >
-      ログイン
+      ログイン / 新規登録
     </button>
   );
 };

front/src/app/page.tsx

@@ -1,4 +1,6 @@
 import Image from "next/image";
+import { getServerSession } from "next-auth/next";
+import { authOptions } from "./api/auth/[...nextauth]/options";
 
 export default function Home() {
   return (

front/src/app/signin/Zitadelform.tsx

@@ -0,0 +1,31 @@
+import { getCsrfToken, getProviders } from "next-auth/react";
+
+export default async function ZitadelForm({
+  callbackUrl,
+}: {
+  callbackUrl: string | string[] | undefined;
+}) {
+  const csrfToken = await getCsrfToken();
+  const providers = await getProviders();
+  var signinUrl = "";
+  var hasZitadel = providers?.hasOwnProperty("zitadel") ?? providers !== null;
+  if (providers !== null && hasZitadel) {
+    signinUrl = providers.zitadel.signinUrl;
+  }
+
+  return (
+    <>
+      {callbackUrl !== null && csrfToken !== undefined && hasZitadel ? (
+        <form action={signinUrl} method="POST">
+          <input type="hidden" name="csrfToken" value={csrfToken} />
+          <input type="hidden" name="callbackUrl" value={callbackUrl} />
+          <button type="submit" className="button">
+            <span>Sign in with ZITADEL</span>
+          </button>
+        </form>
+      ) : (
+        <div>no zitadel</div>
+      )}
+    </>
+  );
+}

front/src/app/signin/page.tsx

@@ -1,19 +1,23 @@
-import { LoginButton, LogoutButton } from "../authbuttons";
+"use client";
+import ZitadelForm from "./Zitadelform";
+
+export default function Page({
+  searchParams,
+}: {
+  searchParams: { [key: string]: string | string[] | undefined };
+}) {
+  const callbackUrl = searchParams.callbackUrl;
 
-export default async function Home() {
   return (
-    <main
-      style={{
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        height: "70vh",
-      }}
-    >
-      <div>
-        <LoginButton />
-        <LogoutButton />
+    <div className="page h-screen text-black bg-white flex flex-col">
+      <div className="header-space h-20" />
+      <div className="signin">
+        <div className="card">
+          <div className="provider">
+            <ZitadelForm callbackUrl={callbackUrl} />
+          </div>
+        </div>
       </div>
-    </main>
+    </div>
   );
 }

front/src/middleware.ts

@@ -0,0 +1,5 @@
+export { default } from "next-auth/middleware";
+
+export const config = {
+  matcher: ["/test"],
+};