From df51d05c46b40047297ef84bb403930f65305ec9 Mon Sep 17 00:00:00 2001
From: Sheen Capadngan <sheensantoscapadngan@gmail.com>
Date: Tue, 18 Jun 2024 02:10:08 +0800
Subject: [PATCH] feat: integrated oidc with sso login

---
 backend/src/ee/routes/v1/oidc-router.ts       | 32 +++++++++----------
 .../ee/services/oidc/oidc-config-service.ts   |  2 +-
 frontend/src/views/Login/Login.tsx            |  6 ++--
 .../components/InitialStep/InitialStep.tsx    | 25 ++++++++++++---
 .../Login/components/SAMLSSOStep/index.tsx    |  1 -
 .../SAMLSSOStep.tsx => SSOStep/SSOStep.tsx}   | 27 ++++++++++------
 .../views/Login/components/SSOStep/index.tsx  |  1 +
 frontend/src/views/Login/components/index.tsx |  2 +-
 8 files changed, 60 insertions(+), 36 deletions(-)
 delete mode 100644 frontend/src/views/Login/components/SAMLSSOStep/index.tsx
 rename frontend/src/views/Login/components/{SAMLSSOStep/SAMLSSOStep.tsx => SSOStep/SSOStep.tsx} (65%)
 create mode 100644 frontend/src/views/Login/components/SSOStep/index.tsx

diff --git a/backend/src/ee/routes/v1/oidc-router.ts b/backend/src/ee/routes/v1/oidc-router.ts
index 49d1d5223..00844309d 100644
--- a/backend/src/ee/routes/v1/oidc-router.ts
+++ b/backend/src/ee/routes/v1/oidc-router.ts
@@ -59,7 +59,7 @@ export const registerOidcRouter = async (server: FastifyZodProvider) => {
       const oidcStrategy = await server.services.oidc.getOrgAuthStrategy(oidcOrgSlug);
       await (
         passport.authenticate(oidcStrategy as Strategy, {
-          failureRedirect: "/api/v1/oidc/login/error",
+          failureRedirect: "/api/v1/sso/oidc/login/error",
           session: false,
           failureMessage: true
         }) as any
@@ -137,13 +137,13 @@ export const registerOidcRouter = async (server: FastifyZodProvider) => {
     schema: {
       body: z
         .object({
-          issuer: z.string(),
-          authorizationEndpoint: z.string(),
-          jwksUri: z.string(),
-          tokenEndpoint: z.string(),
-          userinfoEndpoint: z.string(),
-          clientId: z.string(),
-          clientSecret: z.string(),
+          issuer: z.string().trim(),
+          authorizationEndpoint: z.string().trim(),
+          jwksUri: z.string().trim(),
+          tokenEndpoint: z.string().trim(),
+          userinfoEndpoint: z.string().trim(),
+          clientId: z.string().trim(),
+          clientSecret: z.string().trim(),
           isActive: z.boolean()
         })
         .partial()
@@ -182,15 +182,15 @@ export const registerOidcRouter = async (server: FastifyZodProvider) => {
     onRequest: verifyAuth([AuthMode.JWT]),
     schema: {
       body: z.object({
-        issuer: z.string(),
-        authorizationEndpoint: z.string(),
-        jwksUri: z.string(),
-        tokenEndpoint: z.string(),
-        userinfoEndpoint: z.string(),
-        clientId: z.string(),
-        clientSecret: z.string(),
+        issuer: z.string().trim(),
+        authorizationEndpoint: z.string().trim(),
+        jwksUri: z.string().trim(),
+        tokenEndpoint: z.string().trim(),
+        userinfoEndpoint: z.string().trim(),
+        clientId: z.string().trim(),
+        clientSecret: z.string().trim(),
         isActive: z.boolean(),
-        orgSlug: z.string()
+        orgSlug: z.string().trim()
       }),
       response: {
         200: OidcConfigsSchema.pick({
diff --git a/backend/src/ee/services/oidc/oidc-config-service.ts b/backend/src/ee/services/oidc/oidc-config-service.ts
index 323ccb20a..03d74ea16 100644
--- a/backend/src/ee/services/oidc/oidc-config-service.ts
+++ b/backend/src/ee/services/oidc/oidc-config-service.ts
@@ -520,7 +520,7 @@ export const oidcConfigServiceFactory = ({
     const client = new openIdIssuer.Client({
       client_id: oidcCfg.clientId,
       client_secret: oidcCfg.clientSecret,
-      redirect_uris: [`${appCfg.SITE_URL}/api/v1/oidc/callback`]
+      redirect_uris: [`${appCfg.SITE_URL}/api/v1/sso/oidc/callback`]
     });
 
     const strategy = new OpenIdStrategy(
diff --git a/frontend/src/views/Login/Login.tsx b/frontend/src/views/Login/Login.tsx
index 04a24d233..cad207aa8 100644
--- a/frontend/src/views/Login/Login.tsx
+++ b/frontend/src/views/Login/Login.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 
 import { isLoggedIn } from "@app/reactQuery";
 
-import { InitialStep, MFAStep, SAMLSSOStep } from "./components";
+import { InitialStep, MFAStep, SSOStep } from "./components";
 import { navigateUserToSelectOrg } from "./Login.utils";
 
 export const Login = () => {
@@ -57,7 +57,9 @@ export const Login = () => {
           />
         );
       case 2:
-        return <SAMLSSOStep setStep={setStep} />;
+        return <SSOStep setStep={setStep} type="SAML" />;
+      case 3:
+        return <SSOStep setStep={setStep} type="OIDC" />;
       default:
         return <div />;
     }
diff --git a/frontend/src/views/Login/components/InitialStep/InitialStep.tsx b/frontend/src/views/Login/components/InitialStep/InitialStep.tsx
index 6e2c788ae..82bee7eb4 100644
--- a/frontend/src/views/Login/components/InitialStep/InitialStep.tsx
+++ b/frontend/src/views/Login/components/InitialStep/InitialStep.tsx
@@ -40,11 +40,13 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
   const { data: serverDetails } = useFetchServerStatus();
 
   useEffect(() => {
-      if (serverDetails?.samlDefaultOrgSlug){
-        const callbackPort = queryParams.get("callback_port");
-        const redirectUrl = `/api/v1/sso/redirect/saml2/organizations/${serverDetails?.samlDefaultOrgSlug}${callbackPort ? `?callback_port=${callbackPort}` : ""}`
-        router.push(redirectUrl);
-      }
+    if (serverDetails?.samlDefaultOrgSlug) {
+      const callbackPort = queryParams.get("callback_port");
+      const redirectUrl = `/api/v1/sso/redirect/saml2/organizations/${
+        serverDetails?.samlDefaultOrgSlug
+      }${callbackPort ? `?callback_port=${callbackPort}` : ""}`;
+      router.push(redirectUrl);
+    }
   }, [serverDetails?.samlDefaultOrgSlug]);
 
   const handleLogin = async (e: FormEvent<HTMLFormElement>) => {
@@ -217,6 +219,19 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
           Continue with SAML
         </Button>
       </div>
+      <div className="mt-2 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
+        <Button
+          colorSchema="primary"
+          variant="outline_bg"
+          onClick={() => {
+            setStep(3);
+          }}
+          leftIcon={<FontAwesomeIcon icon={faLock} className="mr-2" />}
+          className="mx-0 h-10 w-full"
+        >
+          Continue with OIDC
+        </Button>
+      </div>
       <div className="mt-2 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
         <Button
           colorSchema="primary"
diff --git a/frontend/src/views/Login/components/SAMLSSOStep/index.tsx b/frontend/src/views/Login/components/SAMLSSOStep/index.tsx
deleted file mode 100644
index f07ee8ed3..000000000
--- a/frontend/src/views/Login/components/SAMLSSOStep/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { SAMLSSOStep } from "./SAMLSSOStep";
diff --git a/frontend/src/views/Login/components/SAMLSSOStep/SAMLSSOStep.tsx b/frontend/src/views/Login/components/SSOStep/SSOStep.tsx
similarity index 65%
rename from frontend/src/views/Login/components/SAMLSSOStep/SAMLSSOStep.tsx
rename to frontend/src/views/Login/components/SSOStep/SSOStep.tsx
index 94c383c1a..5e70cf1a7 100644
--- a/frontend/src/views/Login/components/SAMLSSOStep/SAMLSSOStep.tsx
+++ b/frontend/src/views/Login/components/SSOStep/SSOStep.tsx
@@ -5,9 +5,10 @@ import { Button, Input } from "@app/components/v2";
 
 type Props = {
   setStep: (step: number) => void;
+  type: "SAML" | "OIDC";
 };
 
-export const SAMLSSOStep = ({ setStep }: Props) => {
+export const SSOStep = ({ setStep, type }: Props) => {
   const [ssoIdentifier, setSSOIdentifier] = useState("");
   const { t } = useTranslation();
 
@@ -16,21 +17,27 @@ export const SAMLSSOStep = ({ setStep }: Props) => {
   const handleSubmission = (e: React.FormEvent) => {
     e.preventDefault();
     const callbackPort = queryParams.get("callback_port");
-    window.open(
-      `/api/v1/sso/redirect/saml2/organizations/${ssoIdentifier}${
-        callbackPort ? `?callback_port=${callbackPort}` : ""
-      }`
-    );
+    if (type === "SAML") {
+      window.open(
+        `/api/v1/sso/redirect/saml2/organizations/${ssoIdentifier}${
+          callbackPort ? `?callback_port=${callbackPort}` : ""
+        }`
+      );
+    } else {
+      // TODO: Sheen - Add callback support for CLI login
+      window.open(`/api/v1/sso/oidc/login?orgSlug=${ssoIdentifier}`);
+    }
+
     window.close();
   };
 
   return (
     <div className="mx-auto w-full max-w-md md:px-6">
-      <p className="mx-auto mb-6 mb-8 flex w-max justify-center bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
+      <p className="mx-auto mb-8 flex w-max justify-center bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
         What&apos;s your organization slug?
       </p>
       <form onSubmit={handleSubmission}>
-        <div className="relative mx-auto flex max-h-24 w-1/4 w-full min-w-[20rem] items-center justify-center rounded-lg md:max-h-28 md:min-w-[22rem] lg:w-1/6">
+        <div className="relative mx-auto flex max-h-24 w-full min-w-[20rem] items-center justify-center rounded-lg md:max-h-28 md:min-w-[22rem] lg:w-1/6">
           <div className="flex max-h-24 w-full items-center justify-center rounded-lg md:max-h-28">
             <Input
               value={ssoIdentifier}
@@ -44,7 +51,7 @@ export const SAMLSSOStep = ({ setStep }: Props) => {
             />
           </div>
         </div>
-        <div className="mx-auto mt-4 flex w-1/4 w-full min-w-[20rem] items-center justify-center rounded-md text-center md:min-w-[22rem] lg:w-1/6">
+        <div className="mx-auto mt-4 flex w-full min-w-[20rem] items-center justify-center rounded-md text-center md:min-w-[22rem] lg:w-1/6">
           <Button
             type="submit"
             colorSchema="primary"
@@ -52,7 +59,7 @@ export const SAMLSSOStep = ({ setStep }: Props) => {
             isFullWidth
             className="h-14"
           >
-            Continue with SAML
+            Continue with {type}
           </Button>
         </div>
       </form>
diff --git a/frontend/src/views/Login/components/SSOStep/index.tsx b/frontend/src/views/Login/components/SSOStep/index.tsx
new file mode 100644
index 000000000..e7d80b2c0
--- /dev/null
+++ b/frontend/src/views/Login/components/SSOStep/index.tsx
@@ -0,0 +1 @@
+export { SSOStep } from "./SSOStep";
diff --git a/frontend/src/views/Login/components/index.tsx b/frontend/src/views/Login/components/index.tsx
index 7c55c4acf..296b0503e 100644
--- a/frontend/src/views/Login/components/index.tsx
+++ b/frontend/src/views/Login/components/index.tsx
@@ -1,6 +1,6 @@
 export { InitialStep } from "./InitialStep";
 export { MFAStep } from "./MFAStep";
-export { SAMLSSOStep } from "./SAMLSSOStep";
+export { SSOStep } from "./SSOStep";
 
 // SSO-specific step
 export { PasswordStep } from "./PasswordStep";