working dex auth flow

Signed-off-by: Paul Hildebrandt <[email protected]>

.env.example

@@ -1 +1,6 @@
-API_URL=https://capi-jsgen.moin.k8s.scs.community
+API_URL=https://capi-jsgen.moin.k8s.scs.community
+
+AUTH_SECRET=
+DEX_URL=https://dex.k8s.scs.community
+DEX_CLIENT_ID=
+DEX_CLIENT_SECRET=

README.md

@@ -31,7 +31,6 @@ Web UI for creating Cluster objects based on SCS Cluster Stacks.
 
 - [pnpm](https://pnpm.io/installation)
 
-
 ```bash
 pnpm i
 pnpm dev

package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.0",
+    "@radix-ui/react-avatar": "^1.1.1",
     "@radix-ui/react-checkbox": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-icons": "^1.3.0",
@@ -34,6 +35,7 @@
     "js-yaml": "^4.1.0",
     "lucide-react": "^0.452.0",
     "next": "14.2.15",
+    "next-auth": "5.0.0-beta.22",
     "next-themes": "^0.3.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

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

@@ -0,0 +1,2 @@
+import { handlers } from "@/app/auth";
+export const { GET, POST } = handlers;

src/app/auth.ts

@@ -0,0 +1,52 @@
+import NextAuth from "next-auth";
+import type { NextAuthConfig } from "next-auth";
+
+declare module "next-auth" {
+  interface Session {
+    accessToken?: string;
+    profile?: any;
+  }
+}
+
+const config = {
+  providers: [
+    {
+      id: "dex",
+      name: "SCS Dex",
+      type: "oidc",
+      authorization: {
+        params: { scope: ["openid profile email groups"] },
+      },
+      issuer: process.env.DEX_URL,
+      clientId: process.env.DEX_CLIENT_ID,
+      client: {
+        token_endpoint_auth_method: "none",
+      },
+      profile(profile) {
+        return {
+          id: profile.sub,
+          name: profile.name,
+          email: profile.email,
+          groups: profile.groups,
+          username: profile.preferred_username,
+        };
+      },
+    },
+  ],
+  basePath: "/api/auth",
+  session: { strategy: "jwt" },
+  callbacks: {
+    jwt({ token, user, profile }) {
+      if (user) token.user = user;
+      if (profile) token.profile = profile;
+      return token;
+    },
+    async session({ session, token, user }) {
+      if (session.user) session.profile = token.profile;
+      return session;
+    },
+  },
+  debug: process.env.NODE_ENV !== "production" ? true : false,
+} satisfies NextAuthConfig;
+
+export const { handlers, auth, signIn, signOut } = NextAuth(config);

src/app/layout.tsx

@@ -2,10 +2,11 @@ import "./globals.css";
 import { Metadata, Viewport } from "next";
 import { cn } from "@/lib/utils";
 import { fontSans } from "@/lib/utils";
-import { ThemeProvider } from "@/components/theme-provider";
 import { siteConfig } from "@/config/site";
-import { Navbar } from "@/components/navbar";
+
+import { ThemeProvider } from "@/components/theme-provider";
 import { TailwindIndicator } from "@/components/tailwind-indicator";
+import Header from "@/components/header";
 
 export const metadata: Metadata = {
   title: {
@@ -55,7 +56,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
             disableTransitionOnChange
           >
             <div className="relative flex min-h-screen flex-col bg-background">
-              <Navbar />
+              <Header />
               <main className="flex-1">{children}</main>
             </div>
           </ThemeProvider>