Migration frontend to Zitadel

apps/auth-service/src/server.ts

@@ -18,7 +18,6 @@ import axios from "axios";
 import { environment } from "./util.js";
 
 import { Unkey } from "@unkey/api";
-import { Issuer, generators } from "openid-client";
 import { object, optional, parse, string } from "valibot";
 import type { GetScopedTokenResponse } from "../../../packages/api-types/dist/responses.js";
 import { createLoginIntent } from "./handlers/intents/create.js";
@@ -40,15 +39,11 @@ type ZitadelUserInfo = {
 const unkey = new Unkey({ rootKey: process.env.UNKEY_ROOT_KEY as string });
 const apiId = process.env.UNKEY_API_ID as string;
 
-const getUserId = async (key: string) => {
-  const response = await unkey.keys.verify({ apiId, key });
-
-  if (response.error) {
-    throw new Error(response.error.message);
-  }
+import { Issuer, generators } from "openid-client";
 
-  return response.result.identity?.externalId ?? response.result.ownerId;
-};
+const AUTH_OPENID_ISSUER =
+  process.env.AUTH_OPENID_ISSUER ?? "http://codemod-zitadel:52000";
+const CLIENT_ID = process.env.CLIENT_ID ?? "291351851578753026";
 
 export const initApp = async (toRegister: FastifyPluginCallback[]) => {
   const { PORT: port } = environment;

apps/backend/.env.example

@@ -14,6 +14,9 @@ POSTHOG_API_KEY=
 POSTHOG_PROJECT_ID=
 
 ZAPIER_PUBLISH_HOOK=
+ZITADEL_ISSUER=
+ZITADEL_CLIENT_ID=
+ZITADEL_CLIENT_SECRET=
 
 UNKEY_ROOT_KEY=
 UNKEY_API_ID=

apps/frontend/.env.example

@@ -33,4 +33,10 @@ VERCEL_GIT_PULL_REQUEST_ID=""
 VERCEL_GIT_REPO_ID=""
 VERCEL_GIT_REPO_OWNER=""
 VERCEL_GIT_REPO_SLUG=""
-VERCEL_URL=""
+VERCEL_URL=""
+ZITADEL_ISSUER=
+ZITADEL_CLIENT_ID=
+ZITADEL_CLIENT_SECRET=
+ZITADEL_CLIENT_SECRET=ZITADEL_CLIENT_SECRET
+NEXTAUTH_URL=
+NEXTAUTH_SECRET=NEXTAUTH_SECRET

apps/frontend/app/(website)/auth/layout.tsx

@@ -1,9 +1,7 @@
-import AuthProvider from "@/app/context/AuthProvider";
-
-export default async function Layout({
+export default function Layout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  return <AuthProvider>{children}</AuthProvider>;
+  return children;
 }

apps/frontend/app/(website)/auth/sign-in/[[...param]]/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
+import { SignIn } from "@/components/auth/SignIn";
 import "@/styles/customizeClerkComponents.css";
-import { SignIn } from "@clerk/nextjs";
 import { useSearchParams } from "next/navigation";
 
 function SignInPage() {
@@ -10,10 +10,7 @@ function SignInPage() {
 
   return (
     <div className="flex h-screen w-screen items-center justify-center">
-      <SignIn
-        forceRedirectUrl={isStudio ? "/studio" : "/registry"}
-        appearance={{ elements: { footer: { display: "none" } } }}
-      />
+      <SignIn forceRedirectUrl={isStudio ? "/studio" : "/registry"} />
     </div>
   );
 }

apps/frontend/app/(website)/studio/features/modGPT/PromptPanel/PromptPanel.tsx

@@ -5,9 +5,9 @@ import { insertValue } from "@chatbot/PromptPanel/utils";
 import type { useAiService } from "@chatbot/useAiService/useAiService";
 import type { useModGptSubmit } from "@chatbot/useAiService/useModGpt/useModGptSubmit";
 import { getOrderedAliasList } from "@chatbot/utils";
-import { useAuth } from "@clerk/nextjs";
 import { useGetAliases } from "@studio/store/CFS/alias";
 import type { UseChatHelpers } from "ai/react";
+import { useSession } from "next-auth/react";
 import { useRef, useState } from "react";
 import { PromptForm } from "./PromptForm";
 import { ScrollToBottomButton } from "./ScrollToBottomButton";
@@ -36,7 +36,8 @@ export function PromptPanel(props: PromptPanelProps) {
   } = props;
   const textAreaRef = useRef<HTMLTextAreaElement>(null);
   const [expandedHelper, setExpandedHelper] = useState(true);
-  const { isSignedIn } = useAuth();
+  const { status } = useSession();
+  const isSignedIn = status === "authenticated";
   const aliases = useGetAliases();
   const aliasList = getOrderedAliasList(aliases);
 

apps/frontend/app/(website)/studio/main/DownloadZip.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { useAuth, useSession } from "@clerk/nextjs";
+import { getToken } from "@/components/auth/getToken";
 import { getHumanCodemodName } from "@studio/api/getHumanCodemodName";
 import { Button } from "@studio/components/ui/button";
 import {
@@ -17,6 +17,7 @@ import { useModStore } from "@studio/store/mod";
 import { useSnippetsStore } from "@studio/store/snippets";
 import { downloadProject } from "@studio/utils/download";
 import { DownloadIcon } from "lucide-react";
+import { useSession } from "next-auth/react";
 import { useMemo, useState } from "react";
 import { CopyTerminalCommands } from "./TerminalCommands";
 
@@ -28,8 +29,7 @@ export const DownloadZip = () => {
   const snippetStore = useSnippetsStore();
   const engine = snippetStore.engine;
 
-  const { session } = useSession();
-  const { getToken } = useAuth();
+  const { data: session } = useSession();
 
   const allSnippets = snippetStore.getAllSnippets();
   const cases = useMemo(
@@ -63,7 +63,7 @@ export const DownloadZip = () => {
       codemodBody: modStore.content,
       cases,
       engine,
-      username: session?.user.username ?? null,
+      username: session?.user?.name ?? null,
     });
 
     setIsDownloading(false);

apps/frontend/app/(website)/studio/main/Header/Header.tsx

@@ -1,6 +1,4 @@
 import useFeatureFlags from "@/hooks/useFeatureFlags";
-import { CODEMOD_RUN_FEATURE_FLAG } from "@/utils/strings";
-import { GHRunButton } from "@features/GHRun";
 import { RunOptions } from "../RunOptions";
 import { TopBar } from "./TopBar";
 import { HeaderButtons } from "./headerButtons";
@@ -14,7 +12,6 @@ export const Header = () => {
       <div className="flex justify-between items-center h-[40px] w-full p-1 px-4">
         <div />
         <div className="flex gap-2 items-center">
-          {ffs.includes(CODEMOD_RUN_FEATURE_FLAG) && <GHRunButton />}
           <HeaderButtons />
           <RunOptions />
         </div>

apps/frontend/app/(website)/studio/main/PaneLayout/AssistantTabs.tsx

@@ -1,6 +1,5 @@
 import { cn } from "@/utils";
 import type { useAiService } from "@chatbot/useAiService";
-import { useAuth } from "@clerk/nextjs";
 import Text from "@studio/components/Text";
 import {
   Tabs,
@@ -17,6 +16,7 @@ import {
 } from "@studio/main/PaneLayout/tabsData";
 import { useSnippetsStore } from "@studio/store/snippets";
 import { TabNames, useViewStore } from "@studio/store/view";
+import { useSession } from "next-auth/react";
 import { useCallback, useEffect, useRef } from "react";
 
 const reduceTabs = (acc: TabsWithContents, { value, name }: TabHeader) => [
@@ -41,7 +41,8 @@ export const AssistantTab = ({
   const { engine } = useSnippetsStore();
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   const savedScrollPositionRef = useRef<number>(0);
-  const { isSignedIn } = useAuth();
+  const { status } = useSession();
+  const isSignedIn = status === "authenticated";
 
   const { setActiveTab } = useViewStore();
 

apps/frontend/app/(website)/studio/main/PaneLayout/LoginWarningModal.tsx

@@ -1,5 +1,3 @@
-import { useAuth } from "@auth/useAuth";
-import { SignInButton } from "@clerk/nextjs";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -10,19 +8,26 @@ import {
   AlertDialogTitle,
 } from "@studio/components/ui/alert-dialog";
 import { Button } from "@studio/components/ui/button";
+import { signIn, useSession } from "next-auth/react";
 import { useSearchParams } from "next/navigation";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 const LEARN_KEY = "learn";
 
 export const LoginWarningModal = () => {
-  const { isSignedIn, isLoaded } = useAuth();
+  const { status } = useSession();
+  const isSignedIn = status === "authenticated";
+  const isLoaded = status !== "loading";
   const isFromCLI = useSearchParams().get("command") === LEARN_KEY;
   const [isOpen, setIsOpen] = useState(false);
   useEffect(() => {
     setIsOpen(isFromCLI && isLoaded && !isSignedIn);
   }, [isFromCLI, isSignedIn, isLoaded]);
 
+  const handleSignIn = useCallback(() => {
+    signIn();
+  }, []);
+
   return (
     <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
       <AlertDialogContent className="bg-white">
@@ -41,9 +46,15 @@ export const LoginWarningModal = () => {
             <Button variant="secondary">Proceed without AI</Button>
           </AlertDialogCancel>
           <AlertDialogAction asChild>
-            <SignInButton className="text-white flex gap-1 rounded-md text-sm my-0 h-10 !py-0 bg-black hover:bg-accent hover:text-black">
-              <Button variant="primary">Sign in</Button>
-            </SignInButton>
+            {/* <SignInButton className="text-white flex gap-1 rounded-md text-sm my-0 h-10 !py-0 bg-black hover:bg-accent hover:text-black"> */}
+            <Button
+              onClick={handleSignIn}
+              variant="primary"
+              className="text-white flex gap-1 rounded-md text-sm my-0 h-10 !py-0 bg-black hover:bg-accent hover:text-black"
+            >
+              Sign in
+            </Button>
+            {/* </SignInButton> */}
           </AlertDialogAction>
         </AlertDialogFooter>
       </AlertDialogContent>