Merge pull request #1029 from atimapreandrew/gitlab-sso

Gitlab sso

backend/package-lock.json

@@ -50,6 +50,7 @@
         "nodemailer": "^6.8.0",
         "passport": "^0.6.0",
         "passport-github": "^1.1.0",
+        "passport-gitlab2": "^5.0.0",
         "passport-google-oauth20": "^2.0.0",
         "posthog-node": "^2.6.0",
         "probot": "^12.3.1",
@@ -13727,6 +13728,17 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/passport-gitlab2": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/passport-gitlab2/-/passport-gitlab2-5.0.0.tgz",
+      "integrity": "sha512-cXQMgM6JQx9wHVh7JLH30D8fplfwjsDwRz+zS0pqC8JS+4bNmc1J04NGp5g2M4yfwylH9kQRrMN98GxMw7q7cg==",
+      "dependencies": {
+        "passport-oauth2": "^1.4.0"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
     "node_modules/passport-google-oauth20": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/passport-google-oauth20/-/passport-google-oauth20-2.0.0.tgz",
@@ -27163,6 +27175,14 @@
         "passport-oauth2": "1.x.x"
       }
     },
+    "passport-gitlab2": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/passport-gitlab2/-/passport-gitlab2-5.0.0.tgz",
+      "integrity": "sha512-cXQMgM6JQx9wHVh7JLH30D8fplfwjsDwRz+zS0pqC8JS+4bNmc1J04NGp5g2M4yfwylH9kQRrMN98GxMw7q7cg==",
+      "requires": {
+        "passport-oauth2": "^1.4.0"
+      }
+    },
     "passport-google-oauth20": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/passport-google-oauth20/-/passport-google-oauth20-2.0.0.tgz",

backend/package.json

@@ -41,6 +41,7 @@
     "nodemailer": "^6.8.0",
     "passport": "^0.6.0",
     "passport-github": "^1.1.0",
+    "passport-gitlab2": "^5.0.0",
     "passport-google-oauth20": "^2.0.0",
     "posthog-node": "^2.6.0",
     "probot": "^12.3.1",

backend/src/config/index.ts

@@ -1,3 +1,5 @@
+import { GITLAB_URL } from "../variables";
+
 import InfisicalClient from "infisical-node";
 
 export const client = new InfisicalClient({
@@ -52,6 +54,9 @@ export const getClientIdGoogleLogin = async () => (await client.getSecret("CLIEN
 export const getClientSecretGoogleLogin = async () => (await client.getSecret("CLIENT_SECRET_GOOGLE_LOGIN")).secretValue;
 export const getClientIdGitHubLogin = async () => (await client.getSecret("CLIENT_ID_GITHUB_LOGIN")).secretValue;
 export const getClientSecretGitHubLogin = async () => (await client.getSecret("CLIENT_SECRET_GITHUB_LOGIN")).secretValue;
+export const getClientIdGitLabLogin = async () => (await client.getSecret("CLIENT_ID_GITLAB_LOGIN")).secretValue;
+export const getClientSecretGitLabLogin = async () => (await client.getSecret("CLIENT_SECRET_GITLAB_LOGIN")).secretValue;
+export const getUrlGitLabLogin = async () => (await client.getSecret("URL_GITLAB_LOGIN")).secretValue || GITLAB_URL;
 
 export const getPostHogHost = async () => (await client.getSecret("POSTHOG_HOST")).secretValue || "https://app.posthog.com";
 export const getPostHogProjectApiKey = async () => (await client.getSecret("POSTHOG_PROJECT_API_KEY")).secretValue || "phc_nSin8j5q2zdhpFDI1ETmFNUIuTG4DwKVyIigrY10XiE";

backend/src/ee/routes/v1/sso.ts

@@ -6,58 +6,20 @@ import { ssoController } from "../../controllers/v1";
 import { authLimiter } from "../../../helpers/rateLimiter";
 import { AuthMode } from "../../../variables";
 
-router.get("/redirect/google", authLimiter, (req, res, next) => {
-  passport.authenticate("google", {
-    scope: ["profile", "email"],
-    session: false,
-    ...(req.query.callback_port
-      ? {
-          state: req.query.callback_port as string
-        }
-      : {})
-  })(req, res, next);
-});
-
 router.get(
-  "/google",
+  "/redirect/saml2/:ssoIdentifier",
-  passport.authenticate("google", {
-    failureRedirect: "/login/provider/error",
-    session: false
-  }),
-  ssoController.redirectSSO
-);
-
-router.get("/redirect/github", authLimiter, (req, res, next) => {
-  passport.authenticate("github", {
-    session: false,
-    ...(req.query.callback_port
-      ? {
-          state: req.query.callback_port as string
-        }
-      : {})
-  })(req, res, next);
-});
-
-router.get(
-  "/github",
   authLimiter,
-  passport.authenticate("github", {
+  (req, res, next) => {
-    failureRedirect: "/login/provider/error",
+    const options = {
-    session: false
+        failureRedirect: "/",
-  }),
+        additionalParams: {
-  ssoController.redirectSSO
+          RelayState: req.query.callback_port ?? ""
+        },
+    };
+    passport.authenticate("saml", options)(req, res, next);
+  }
 );
 
-router.get("/redirect/saml2/:ssoIdentifier", authLimiter, (req, res, next) => {
-  const options = {
-    failureRedirect: "/",
-    additionalParams: {
-      RelayState: req.query.callback_port ?? ""
-    }
-  };
-  passport.authenticate("saml", options)(req, res, next);
-});
-
 router.post(
   "/saml2/:ssoIdentifier",
   passport.authenticate("saml", {

backend/src/index.ts

@@ -38,6 +38,7 @@ import {
   membership as v1MembershipRouter,
   organization as v1OrganizationRouter,
   password as v1PasswordRouter,
+  sso as v1SSORouter,
   secretApprovalPolicy as v1SecretApprovalPolicy,
   secretImps as v1SecretImpsRouter,
   secret as v1SecretRouter,
@@ -178,6 +179,7 @@ const main = async () => {
   app.use("/api/v1/secret-imports", v1SecretImpsRouter);
   app.use("/api/v1/roles", v1RoleRouter);
   app.use("/api/v1/secret-approvals", v1SecretApprovalPolicy);
+  app.use("/api/v1/sso", v1SSORouter);
 
   // v2 routes (improvements)
   app.use("/api/v2/signup", v2SignupRouter);

backend/src/models/user.ts

@@ -4,6 +4,7 @@ export enum AuthMethod {
 	EMAIL = "email",
 	GOOGLE = "google",
 	GITHUB = "github",
+	GITLAB = "gitlab",
 	OKTA_SAML = "okta-saml",
 	AZURE_SAML = "azure-saml",
 	JUMPCLOUD_SAML = "jumpcloud-saml",

backend/src/routes/v1/index.ts

@@ -11,6 +11,7 @@ import key from "./key";
 import inviteOrg from "./inviteOrg";
 import secret from "./secret";
 import serviceToken from "./serviceToken";
+import sso from "./sso";
 import password from "./password";
 import integration from "./integration";
 import integrationAuth from "./integrationAuth";
@@ -39,5 +40,6 @@ export {
   secretsFolder,
   webhooks,
   secretImps,
+  sso,
   secretApprovalPolicy
 };

backend/src/routes/v1/sso.ts

@@ -0,0 +1,72 @@
+import express from "express";
+const router = express.Router();
+import passport from "passport";
+import { authLimiter } from "../../helpers/rateLimiter";
+import { ssoController } from "../../ee/controllers/v1";
+
+router.get("/redirect/google", authLimiter, (req, res, next) => {
+    passport.authenticate("google", {
+      scope: ["profile", "email"],
+      session: false,
+      ...(req.query.callback_port
+        ? {
+            state: req.query.callback_port as string
+          }
+        : {})
+    })(req, res, next);
+});
+
+router.get(
+    "/google",
+    passport.authenticate("google", {
+      failureRedirect: "/login/provider/error",
+      session: false
+    }),
+    ssoController.redirectSSO
+);
+
+router.get("/redirect/github", authLimiter, (req, res, next) => {
+    passport.authenticate("github", {
+        session: false,
+        ...(req.query.callback_port
+        ? {
+            state: req.query.callback_port as string
+          }
+        : {})
+    })(req, res, next);
+});
+
+router.get(
+    "/github",
+    authLimiter,
+    passport.authenticate("github", {
+        failureRedirect: "/login/provider/error",
+        session: false
+    }),
+    ssoController.redirectSSO
+);
+
+router.get(
+    "/redirect/gitlab",
+    authLimiter,
+    (req, res, next) => {
+        passport.authenticate("gitlab", {
+        session: false,
+            ...(req.query.callback_port ? {
+            state: req.query.callback_port as string
+            } : {})
+        })(req, res, next);
+    }
+);
+  
+router.get(
+    "/gitlab",
+    authLimiter,
+    passport.authenticate("gitlab", {
+      failureRedirect: "/login/provider/error",
+      session: false
+    }),
+    ssoController.redirectSSO
+);
+
+export default router;

backend/src/routes/v2/users.ts

@@ -29,11 +29,11 @@ router.patch(
 );
 
 router.put(
-  "/me/auth-methods",
+    "/me/auth-methods",
-  requireAuth({
+    requireAuth({
-    acceptedAuthModes: [AuthMode.JWT, AuthMode.API_KEY]
+        acceptedAuthModes: [AuthMode.JWT, AuthMode.API_KEY],
-  }),
+    }),
-  usersController.updateAuthMethods
+    usersController.updateAuthMethods,
 );
 
 router.get(

backend/src/utils/auth.ts

@@ -13,16 +13,19 @@ import {
 import { createToken } from "../helpers/auth";
 import {
   getClientIdGitHubLogin,
+  getClientIdGitLabLogin,
   getClientIdGoogleLogin,
   getClientSecretGitHubLogin,
+  getClientSecretGitLabLogin,
   getClientSecretGoogleLogin,
   getJwtProviderAuthLifetime,
   getJwtProviderAuthSecret,
+  getSiteURL,
+  getUrlGitLabLogin
 } from "../config";
 import { getSSOConfigHelper } from "../ee/helpers/organizations";
 import { InternalServerError, OrganizationNotFoundError } from "./errors";
 import { ACCEPTED, INTEGRATION_GITHUB_API_URL, INVITED, MEMBER } from "../variables";
-import { getSiteURL } from "../config";
 import { standardRequest } from "../config/request";
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
@@ -30,6 +33,8 @@ const GoogleStrategy = require("passport-google-oauth20").Strategy;
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const GitHubStrategy = require("passport-github").Strategy;
 // eslint-disable-next-line @typescript-eslint/no-var-requires
+const GitLabStrategy = require("passport-gitlab2").Strategy;
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const { MultiSamlStrategy } = require("@node-saml/passport-saml");
 
 /**
@@ -76,6 +81,9 @@ const initializePassport = async () => {
   const clientSecretGoogleLogin = await getClientSecretGoogleLogin();
   const clientIdGitHubLogin = await getClientIdGitHubLogin();
   const clientSecretGitHubLogin = await getClientSecretGitHubLogin();
+  const urlGitLab = await getUrlGitLabLogin();
+  const clientIdGitLabLogin = await getClientIdGitLabLogin();
+  const clientSecretGitLabLogin = await getClientSecretGitLabLogin();
 
   if (clientIdGoogleLogin && clientSecretGoogleLogin) {
     passport.use(new GoogleStrategy({
@@ -209,6 +217,60 @@ const initializePassport = async () => {
     }
     ));
   }
+
+  if (urlGitLab && clientIdGitLabLogin && clientSecretGitLabLogin) {
+    passport.use(new GitLabStrategy({
+      passReqToCallback: true,
+      clientID: clientIdGitLabLogin,
+      clientSecret: clientSecretGitLabLogin,
+      callbackURL: "/api/v1/sso/gitlab",
+      baseURL: urlGitLab
+    },
+    async (req : express.Request, accessToken : any, refreshToken : any, profile : any, done : any) => {
+      const email = profile.emails[0].value;
+      
+      let user = await User.findOne({
+        email
+      }).select("+publicKey");
+
+      if (!user) {
+        user = await new User({
+          email: email,
+          authMethods: [AuthMethod.GITLAB],
+          firstName: profile.displayName,
+          lastName: ""
+        }).save();
+      }
+      
+      let isLinkingRequired = false;
+      if (!user.authMethods.includes(AuthMethod.GITLAB)) {
+        isLinkingRequired = true;
+      }
+
+      const isUserCompleted = !!user.publicKey;
+      const providerAuthToken = createToken({
+        payload: {
+          userId: user._id.toString(),
+          email: user.email,
+          firstName: user.firstName,
+          lastName: user.lastName,
+          authMethod: AuthMethod.GITLAB,
+          isUserCompleted,
+          isLinkingRequired,
+          ...(req.query.state ? {
+            callbackPort: req.query.state as string
+          } : {})
+        },
+        expiresIn: await getJwtProviderAuthLifetime(),
+        secret: await getJwtProviderAuthSecret(),
+      });
+
+      req.isUserCompleted = isUserCompleted;
+      req.providerAuthToken = providerAuthToken;
+      return done(null, profile);
+    }
+    ));
+  }
   
   passport.use("saml", new MultiSamlStrategy(
     {

backend/src/variables/integration.ts

@@ -84,7 +84,8 @@ export const INTEGRATION_BITBUCKET_TOKEN_URL = "https://bitbucket.org/site/oauth
 // integration apps endpoints
 export const INTEGRATION_GCP_API_URL = "https://cloudresourcemanager.googleapis.com";
 export const INTEGRATION_HEROKU_API_URL = "https://api.heroku.com";
-export const INTEGRATION_GITLAB_API_URL = "https://gitlab.com/api";
+export const GITLAB_URL = "https://gitlab.com";
+export const INTEGRATION_GITLAB_API_URL = `${GITLAB_URL}/api`;
 export const INTEGRATION_GITHUB_API_URL = "https://api.github.com";
 export const INTEGRATION_VERCEL_API_URL = "https://api.vercel.com";
 export const INTEGRATION_NETLIFY_API_URL = "https://api.netlify.com";

docs/documentation/platform/sso/gitlab.mdx

@@ -0,0 +1,37 @@
+---
+title: "GitLab SSO"
+description: "Configure GitLab SSO for Infisical"
+---
+
+Using GitLab SSO on a self-hosted instance of Infisical requires configuring an OAuth application in GitLab and registering your instance with it.
+
+## Create an OAuth application in GitLab
+
+Navigate to your user Settings > Applications to create a new GitLab application.
+
+![sso gitlab config](../../images/sso/gitlab/edit-profile.png) 
+![sso gitlab config](../../images/sso/gitlab/new-app.png) 
+
+Create the application. As part of the form, set the **Redirect URI** to `https://your-domain.com/api/v1/sso/gitlab`.
+Note that only `read_user` is required as part of the **Scopes** configuration.
+
+![sso gitlab config](../../images/sso/gitlab/new-app-form.png) 
+
+<Note>
+    If you have a GitLab group, you can create an OAuth application under it
+    in your group Settings > Applications.
+</Note>
+
+## Add your OAuth application credentials to Infisical
+
+Obtain the **Application ID** and **Secret** for your GitLab application.
+
+![sso gitlab config](../../images/sso/gitlab/credentials.png) 
+
+Back in your Infisical instance, add 2-3 new environment variables for the credentials of your GitLab application:
+
+- `CLIENT_ID_GITLAB_LOGIN`: The **Client ID** of your GitLab application.
+- `CLIENT_SECRET_GITLAB_LOGIN`: The **Secret** of your GitLab application.
+- (optional) `URL_GITLAB_LOGIN`: The URL of your self-hosted instance of GitLab where the OAuth application is registered. If no URL is passed in, this will default to `https://gitlab.com`.
+   
+Once added, restart your Infisical instance and log in with GitLab.

docs/documentation/platform/sso/overview.mdx

@@ -19,6 +19,7 @@ your IdP cannot and will not have access to the decryption key needed to decrypt
 
 - [Google SSO](/documentation/platform/sso/google)
 - [GitHub SSO](/documentation/platform/sso/github)
+- [GitLab SSO](/documentation/platform/sso/gitlab)
 - [Okta SAML](/documentation/platform/sso/okta)
 - [Azure SAML](/documentation/platform/sso/azure)
 - [JumpCloud SAML](/documentation/platform/sso/jumpcloud)

docs/integrations/cicd/gitlab.mdx

@@ -107,7 +107,7 @@ build-job:
    Back in your Infisical instance, add two new environment variables for the credentials of your GitLab application:
 
    - `CLIENT_ID_GITLAB`: The **Client ID** of your GitLab application.
-   - `CLIENT_SECRET_GITLAB`: The **Client Secret** of your GitLab application.
+   - `CLIENT_SECRET_GITLAB`: The **Secret** of your GitLab application.
    
   Once added, restart your Infisical instance and use the GitLab integration.
   

docs/mint.json

@@ -126,6 +126,7 @@
             "documentation/platform/sso/overview",
             "documentation/platform/sso/google",
             "documentation/platform/sso/github",
+            "documentation/platform/sso/gitlab",
             "documentation/platform/sso/okta",
             "documentation/platform/sso/azure",
             "documentation/platform/sso/jumpcloud"

docs/self-hosting/configuration/envars.mdx

@@ -155,6 +155,12 @@ Other environment variables are listed below to increase the functionality of yo
     <ParamField query="CLIENT_SECRET_GITHUB_LOGIN" type="string" default="none" optional>
       OAuth2 client secret for GitHub login
     </ParamField>
+    <ParamField query="CLIENT_ID_GITLAB_LOGIN" type="string" default="none" optional>
+      OAuth2 client ID for GitLab login
+    </ParamField>
+    <ParamField query="CLIENT_SECRET_GITLAB_LOGIN" type="string" default="none" optional>
+      OAuth2 client secret for GitLab login
+    </ParamField>
   </Tab>
   <Tab title="Others">
     #### JWT

docs/self-hosting/configuration/sso.mdx

@@ -15,6 +15,7 @@ You can view specific documentation for how to set up each SSO authentication me
 
 - [Google SSO](/documentation/platform/sso/google)
 - [GitHub SSO](/documentation/platform/sso/github)
+- [GitLab SSO](/documentation/platform/sso/gitlab)
 - [Okta SAML](/documentation/platform/sso/okta)
 - [Azure SAML](/documentation/platform/sso/azure)
 - [JumpCloud SAML](/documentation/platform/sso/jumpcloud)

frontend/src/components/signup/InitialSignupStep.tsx

@@ -1,7 +1,7 @@
 import { useTranslation } from "react-i18next";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { faGithub,faGoogle } from "@fortawesome/free-brands-svg-icons";
+import { faGithub, faGitlab, faGoogle } from "@fortawesome/free-brands-svg-icons";
 import { faEnvelope } from "@fortawesome/free-regular-svg-icons";
 import { faLock } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -9,74 +9,94 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Button } from "../v2";
 
 export default function InitialSignupStep({
-    setIsSignupWithEmail,
+  setIsSignupWithEmail
 }: {
-    setIsSignupWithEmail: (value: boolean) => void
+  setIsSignupWithEmail: (value: boolean) => void;
 }) {
-    const { t } = useTranslation();
+  const { t } = useTranslation();
-    const router = useRouter();
+  const router = useRouter();
 
-    return <div className='flex flex-col mx-auto w-full justify-center items-center'>
+  return (
-        <h1 className='text-xl font-medium text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200 text-center mb-8' >{t("signup.initial-title")}</h1>
+    <div className="mx-auto flex w-full flex-col items-center justify-center">
-        <div className='lg:w-1/6 w-1/4 min-w-[20rem] rounded-md'>
+      <h1 className="mb-8 bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
-            <Button
+        {t("signup.initial-title")}
-                colorSchema="primary"
+      </h1>
-                variant="solid"
+      <div className="w-1/4 min-w-[20rem] rounded-md lg:w-1/6">
-                onClick={() => {
+        <Button
-                    window.open("/api/v1/sso/redirect/google");
+          colorSchema="primary"
-                    window.close();
+          variant="solid"
-                }}
+          onClick={() => {
-                leftIcon={<FontAwesomeIcon icon={faGoogle} className="mr-2" />}
+            window.open("/api/v1/sso/redirect/google");
-                className="h-12 w-full mx-0"
+            window.close();
-            >
+          }}
-                {t("signup.continue-with-google")}
+          leftIcon={<FontAwesomeIcon icon={faGoogle} className="mr-2" />}
-            </Button>
+          className="mx-0 h-12 w-full"
-        </div>
+        >
-        <div className='lg:w-1/6 w-1/4 min-w-[20rem] rounded-md mt-4'>
+          {t("signup.continue-with-google")}
-            <Button
+        </Button>
-                colorSchema="primary"
+      </div>
-                variant="outline_bg"
+      <div className="mt-4 w-1/4 min-w-[20rem] rounded-md lg:w-1/6">
-                onClick={() => {
+        <Button
-                    window.open("/api/v1/sso/redirect/github");
+          colorSchema="primary"
-                    window.close();
+          variant="outline_bg"
-                }}
+          onClick={() => {
-                leftIcon={<FontAwesomeIcon icon={faGithub} className="mr-2" />}
+            window.open("/api/v1/sso/redirect/github");
-                className="h-12 w-full mx-0"
+            window.close();
-            >
+          }}
-                Continue with GitHub
+          leftIcon={<FontAwesomeIcon icon={faGithub} className="mr-2" />}
-            </Button>
+          className="mx-0 h-12 w-full"
-        </div>
+        >
-        <div className='lg:w-1/6 w-1/4 min-w-[20rem] text-center rounded-md mt-4'>
+          Continue with GitHub
-            <Button
+        </Button>
-                colorSchema="primary"
+      </div>
-                variant="outline_bg"
+      <div className="mt-4 w-1/4 min-w-[20rem] rounded-md lg:w-1/6">
-                onClick={() => {
+        <Button
-                    setIsSignupWithEmail(true);
+          colorSchema="primary"
-                }}
+          variant="outline_bg"
-                leftIcon={<FontAwesomeIcon icon={faEnvelope} className="mr-2" />}
+          onClick={() => {
-                className="h-12 w-full mx-0"
+            window.open("/api/v1/sso/redirect/gitlab");
-            >
+            window.close();
-                Continue with Email
+          }}
-            </Button>
+          leftIcon={<FontAwesomeIcon icon={faGitlab} className="mr-2" />}
-        </div>
+          className="mx-0 h-12 w-full"
-        <div className='lg:w-1/6 w-1/4 min-w-[20rem] text-center rounded-md mt-4'>
+        >
-            <Button
+          Continue with GitLab
-                colorSchema="primary" 
+        </Button>
-                variant="outline_bg"
+      </div>
-                onClick={() => router.push("/saml-sso")} 
+      <div className="mt-4 w-1/4 min-w-[20rem] rounded-md text-center lg:w-1/6">
-                leftIcon={<FontAwesomeIcon icon={faLock} className="mr-2" />}
+        <Button
-                className="h-12 w-full mx-0"
+          colorSchema="primary"
-            > 
+          variant="outline_bg"
-                Continue with SSO
+          onClick={() => {
-            </Button>
+            setIsSignupWithEmail(true);
-        </div>
+          }}
-        <div className='lg:w-1/6 w-1/4 min-w-[20rem] px-8 text-center mt-6 text-xs text-bunker-400'>
+          leftIcon={<FontAwesomeIcon icon={faEnvelope} className="mr-2" />}
-            {t("signup.create-policy")}
+          className="mx-0 h-12 w-full"
-        </div>
+        >
-        <div className="mt-2 text-bunker-400 text-xs flex flex-row">
+          Continue with Email
-            <Link href="/login">
+        </Button>
-                <span className='hover:underline hover:underline-offset-4 hover:decoration-primary-700 hover:text-bunker-200 duration-200 cursor-pointer'>{t("signup.already-have-account")}</span>
+      </div>
-            </Link>
+      <div className="mt-4 w-1/4 min-w-[20rem] rounded-md text-center lg:w-1/6">
-        </div>
+        <Button
+          colorSchema="primary"
+          variant="outline_bg"
+          onClick={() => router.push("/saml-sso")}
+          leftIcon={<FontAwesomeIcon icon={faLock} className="mr-2" />}
+          className="mx-0 h-12 w-full"
+        >
+          Continue with SSO
+        </Button>
+      </div>
+      <div className="mt-6 w-1/4 min-w-[20rem] px-8 text-center text-xs text-bunker-400 lg:w-1/6">
+        {t("signup.create-policy")}
+      </div>
+      <div className="mt-2 flex flex-row text-xs text-bunker-400">
+        <Link href="/login">
+          <span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
+            {t("signup.already-have-account")}
+          </span>
+        </Link>
+      </div>
     </div>
+  );
 }

frontend/src/hooks/api/users/types.ts

@@ -4,9 +4,10 @@ export enum AuthMethod {
   EMAIL = "email",
   GOOGLE = "google",
   GITHUB = "github",
-  OKTA_SAML = "okta-saml",
+  GITLAB = "gitlab",
-  AZURE_SAML = "azure-saml",
+	OKTA_SAML = "okta-saml",
-  JUMPCLOUD_SAML = "jumpcloud-saml"
+	AZURE_SAML = "azure-saml",
+	JUMPCLOUD_SAML = "jumpcloud-saml"
 }
 
 export type User = {

frontend/src/views/Login/components/InitialStep/InitialStep.tsx

@@ -2,10 +2,10 @@ import { FormEvent, useState } from "react";
 import { useTranslation } from "react-i18next";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { faGithub,faGoogle } from "@fortawesome/free-brands-svg-icons";
+import { faGithub, faGitlab, faGoogle } from "@fortawesome/free-brands-svg-icons";
 import { faLock } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import axios from "axios"
+import axios from "axios";
 
 import Error from "@app/components/basic/Error";
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
@@ -16,208 +16,234 @@ import { fetchOrganizations } from "@app/hooks/api/organization/queries";
 import { useFetchServerStatus } from "@app/hooks/api/serverDetails";
 
 type Props = {
-    setStep: (step: number) => void;
+  setStep: (step: number) => void;
-    email: string;
+  email: string;
-    setEmail: (email: string) => void;
+  setEmail: (email: string) => void;
-    password: string;
+  password: string;
-    setPassword: (email: string) => void;
+  setPassword: (email: string) => void;
-}
+};
 
-export const InitialStep = ({
+export const InitialStep = ({ setStep, email, setEmail, password, setPassword }: Props) => {
-    setStep,
+  const router = useRouter();
-    email,
+  const { createNotification } = useNotificationContext();
-    setEmail,
+  const { t } = useTranslation();
-    password,
+  const [isLoading, setIsLoading] = useState(false);
-    setPassword
+  const [loginError, setLoginError] = useState(false);
-}: Props) => {
+  const { data: serverDetails } = useFetchServerStatus();
-    const router = useRouter();
+  const queryParams = new URLSearchParams(window.location.search);
-    const { createNotification } = useNotificationContext();
-    const { t } = useTranslation();
-    const [isLoading, setIsLoading] = useState(false);
-    const [loginError, setLoginError] = useState(false);
-    const { data: serverDetails } = useFetchServerStatus();
-    const queryParams = new URLSearchParams(window.location.search);
 
-    const handleLogin = async (e: FormEvent<HTMLFormElement>) => {
+  const handleLogin = async (e: FormEvent<HTMLFormElement>) => {
-        e.preventDefault()
+    e.preventDefault();
-        try {
+    try {
-            if (!email || !password) {
+      if (!email || !password) {
-                return;
+        return;
-            }
+      }
 
-            setIsLoading(true);
+      setIsLoading(true);
-            if (queryParams && queryParams.get("callback_port")) {
+      if (queryParams && queryParams.get("callback_port")) {
-                const callbackPort = queryParams.get("callback_port")
+        const callbackPort = queryParams.get("callback_port");
 
-                // attemptCliLogin
+        // attemptCliLogin
-                const isCliLoginSuccessful = await attemptCliLogin({
+        const isCliLoginSuccessful = await attemptCliLogin({
-                    email: email.toLowerCase(),
+          email: email.toLowerCase(),
-                    password,
+          password
-                })
+        });
 
-                if (isCliLoginSuccessful && isCliLoginSuccessful.success) {
+        if (isCliLoginSuccessful && isCliLoginSuccessful.success) {
+          if (isCliLoginSuccessful.mfaEnabled) {
+            // case: login requires MFA step
+            setStep(1);
+            setIsLoading(false);
+            return;
+          }
+          // case: login was successful
+          const cliUrl = `http://localhost:${callbackPort}`;
 
-                    if (isCliLoginSuccessful.mfaEnabled) {
+          // send request to server endpoint
-                        // case: login requires MFA step
+          const instance = axios.create();
-                        setStep(1);
+          await instance.post(cliUrl, { ...isCliLoginSuccessful.loginResponse });
-                        setIsLoading(false);
-                        return;
-                    }
-                    // case: login was successful
-                    const cliUrl = `http://localhost:${callbackPort}`
 
-                    // send request to server endpoint
+          // cli page
-                    const instance = axios.create()
+          router.push("/cli-redirect");
-                    await instance.post(cliUrl, { ...isCliLoginSuccessful.loginResponse })
 
-                    // cli page
+          // on success, router.push to cli Login Successful page
-                    router.push("/cli-redirect");
-
-                    // on success, router.push to cli Login Successful page
-
-                }
-            } else {
-                const isLoginSuccessful = await attemptLogin({
-                    email: email.toLowerCase(),
-                    password,
-                });
-                if (isLoginSuccessful && isLoginSuccessful.success) {
-                    // case: login was successful
-
-                    if (isLoginSuccessful.mfaEnabled) {
-                        // case: login requires MFA step
-                        setStep(1);
-                        setIsLoading(false);
-                        return;
-                    }
-                    const userOrgs = await fetchOrganizations();
-                    const userOrg = userOrgs[0] && userOrgs[0]._id;
-
-                    // case: login does not require MFA step
-                    createNotification({
-                        text: "Successfully logged in",
-                        type: "success"
-                    });
-                    router.push(`/org/${userOrg}/overview`);
-                }
-            }
-
-
-        } catch (err) {
-            setLoginError(true);
-            createNotification({
-                text: "Login unsuccessful. Double-check your credentials and try again.",
-                type: "error"
-            });
         }
+      } else {
+        const isLoginSuccessful = await attemptLogin({
+          email: email.toLowerCase(),
+          password
+        });
+        if (isLoginSuccessful && isLoginSuccessful.success) {
+          // case: login was successful
 
-        setIsLoading(false);
+          if (isLoginSuccessful.mfaEnabled) {
+            // case: login requires MFA step
+            setStep(1);
+            setIsLoading(false);
+            return;
+          }
+          const userOrgs = await fetchOrganizations();
+          const userOrg = userOrgs[0] && userOrgs[0]._id;
+
+          // case: login does not require MFA step
+          createNotification({
+            text: "Successfully logged in",
+            type: "success"
+          });
+          router.push(`/org/${userOrg}/overview`);
+        }
+      }
+    } catch (err) {
+      setLoginError(true);
+      createNotification({
+        text: "Login unsuccessful. Double-check your credentials and try again.",
+        type: "error"
+      });
     }
 
-    return (
+    setIsLoading(false);
-        <form onSubmit={handleLogin} className='flex flex-col mx-auto w-full justify-center items-center'>
+  };
-            <h1 className='text-xl font-medium text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200 text-center mb-8' >Login to Infisical</h1>
+
-            <div className='lg:w-1/6 w-1/4 min-w-[21.2rem] md:min-w-[20.1rem] text-center rounded-md mt-4'>
+  return (
-                <Button
+    <form
-                    colorSchema="primary" 
+      onSubmit={handleLogin}
-                    variant="outline_bg"
+      className="mx-auto flex w-full flex-col items-center justify-center"
-                    onClick={() => {
+    >
-                        const callbackPort = queryParams.get("callback_port");
+      <h1 className="mb-8 bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
-                        
+        Login to Infisical
-                        window.open(`/api/v1/sso/redirect/google${callbackPort ? `?callback_port=${callbackPort}` : ""}`);
+      </h1>
-                        window.close();
+      <div className="mt-4 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
-                    }} 
+        <Button
-                    leftIcon={<FontAwesomeIcon icon={faGoogle} className="mr-2" />}
+          colorSchema="primary"
-                    className="h-11 w-full mx-0"
+          variant="outline_bg"
-                > 
+          onClick={() => {
-                    {t("login.continue-with-google")}
+            const callbackPort = queryParams.get("callback_port");
-                </Button>
+
-            </div>
+            window.open(
-            <div className='lg:w-1/6 w-1/4 min-w-[21.2rem] md:min-w-[20.1rem] text-center rounded-md mt-4'>
+              `/api/v1/sso/redirect/google${callbackPort ? `?callback_port=${callbackPort}` : ""}`
-                <Button
+            );
-                    colorSchema="primary" 
+            window.close();
-                    variant="outline_bg"
+          }}
-                    onClick={() => {
+          leftIcon={<FontAwesomeIcon icon={faGoogle} className="mr-2" />}
-                        const callbackPort = queryParams.get("callback_port");
+          className="mx-0 h-11 w-full"
-                        
+        >
-                        window.open(`/api/v1/sso/redirect/github${callbackPort ? `?callback_port=${callbackPort}` : ""}`);
+          {t("login.continue-with-google")}
-                        
+        </Button>
-                        window.close();
+      </div>
-                    }} 
+      <div className="mt-4 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
-                    leftIcon={<FontAwesomeIcon icon={faGithub} className="mr-2" />}
+        <Button
-                    className="h-11 w-full mx-0"
+          colorSchema="primary"
-                > 
+          variant="outline_bg"
-                    Continue with GitHub
+          onClick={() => {
-                </Button>
+            const callbackPort = queryParams.get("callback_port");
-            </div>
+
-            <div className='lg:w-1/6 w-1/4 min-w-[21.2rem] md:min-w-[20.1rem] text-center rounded-md mt-4'>
+            window.open(
-                <Button
+              `/api/v1/sso/redirect/github${callbackPort ? `?callback_port=${callbackPort}` : ""}`
-                    colorSchema="primary"
+            );
-                    variant="outline_bg"
+
-                    onClick={() => {
+            window.close();
-                        setStep(2);
+          }}
-                    }}
+          leftIcon={<FontAwesomeIcon icon={faGithub} className="mr-2" />}
-                    leftIcon={<FontAwesomeIcon icon={faLock} className="mr-2" />}
+          className="mx-0 h-11 w-full"
-                    className="h-11 w-full mx-0"
+        >
-                >
+          Continue with GitHub
-                    Continue with SSO
+        </Button>
-                </Button>
+      </div>
-            </div>
+      <div className="mt-4 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
-            <div className='lg:w-1/6 w-1/4 min-w-[20rem] flex flex-row items-center my-4 py-2'>
+        <Button
-                <div className='w-full border-t border-mineshaft-400/60' /> 
+          colorSchema="primary"
-                <span className="mx-2 text-mineshaft-200 text-xs">or</span>
+          variant="outline_bg"
-                <div className='w-full border-t border-mineshaft-400/60' />
+          onClick={() => {
-            </div>
+            const callbackPort = queryParams.get("callback_port");
-            <div className='lg:w-1/6 w-1/4 min-w-[21.2rem] md:min-w-[20.1rem] text-center rounded-md'>
+
-                <Input
+            window.open(
-                    value={email}
+              `/api/v1/sso/redirect/gitlab${callbackPort ? `?callback_port=${callbackPort}` : ""}`
-                    onChange={(e) => setEmail(e.target.value)}
+            );
-                    type="email"
+
-                    placeholder="Enter your email..."
+            window.close();
-                    isRequired
+          }}
-                    autoComplete="username"
+          leftIcon={<FontAwesomeIcon icon={faGitlab} className="mr-2" />}
-                    className="h-11"
+          className="mx-0 h-11 w-full"
-                />
+        >
-            </div>
+          Continue with GitLab
-            <div className='lg:w-1/6 w-1/4 min-w-[21.2rem] md:min-w-[20.1rem] text-center rounded-md mt-4'>
+        </Button>
-                <Input
+      </div>
-                    value={password}
+      <div className="mt-4 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
-                    onChange={(e) => setPassword(e.target.value)}
+        <Button
-                    type="password"
+          colorSchema="primary"
-                    placeholder="Enter your password..."
+          variant="outline_bg"
-                    isRequired
+          onClick={() => {
-                    autoComplete="current-password"
+            setStep(2);
-                    id="current-password"
+          }}
-                    className="h-11 select:-webkit-autofill:focus"
+          leftIcon={<FontAwesomeIcon icon={faLock} className="mr-2" />}
-                />
+          className="mx-0 h-11 w-full"
-            </div>
+        >
-            <div className='lg:w-1/6 w-1/4 min-w-[21.2rem] md:min-w-[20.1rem] text-center rounded-md mt-5'>
+          Continue with SSO
-                <Button
+        </Button>
-                    type="submit"
+      </div>
-                    size="sm"
+      <div className="my-4 flex w-1/4 min-w-[20rem] flex-row items-center py-2 lg:w-1/6">
-                    isFullWidth
+        <div className="w-full border-t border-mineshaft-400/60" />
-                    className='h-11'
+        <span className="mx-2 text-xs text-mineshaft-200">or</span>
-                    colorSchema="primary"
+        <div className="w-full border-t border-mineshaft-400/60" />
-                    variant="solid"
+      </div>
-                    isLoading={isLoading}
+      <div className="w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
-                > Continue with Email </Button>
+        <Input
-            </div>
+          value={email}
-            {!isLoading && loginError && <Error text={t("login.error-login") ?? ""} />}
+          onChange={(e) => setEmail(e.target.value)}
-            {
+          type="email"
-                !serverDetails?.inviteOnlySignup ?
+          placeholder="Enter your email..."
-                <div className="mt-6 text-bunker-400 text-sm flex flex-row">
+          isRequired
-                    <span className="mr-1">Don&apos;t have an acount yet?</span>
+          autoComplete="username"
-                    <Link href="/signup">
+          className="h-11"
-                        <span className='hover:underline hover:underline-offset-4 hover:decoration-primary-700 hover:text-bunker-200 duration-200 cursor-pointer'>{t("login.create-account")}</span>
+        />
-                    </Link>
+      </div>
-                </div> : <div />
+      <div className="mt-4 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
-            }
+        <Input
-            <div className="text-bunker-400 text-sm flex flex-row">
+          value={password}
-                <span className="mr-1">Forgot password?</span>
+          onChange={(e) => setPassword(e.target.value)}
-                <Link href="/verify-email">
+          type="password"
-                    <span className='hover:underline hover:underline-offset-4 hover:decoration-primary-700 hover:text-bunker-200 duration-200 cursor-pointer'>Recover your account</span>
+          placeholder="Enter your password..."
-                </Link>
+          isRequired
-            </div>
+          autoComplete="current-password"
-        </form>
+          id="current-password"
-    );
+          className="select:-webkit-autofill:focus h-11"
-}
+        />
+      </div>
+      <div className="mt-5 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
+        <Button
+          type="submit"
+          size="sm"
+          isFullWidth
+          className="h-11"
+          colorSchema="primary"
+          variant="solid"
+          isLoading={isLoading}
+        >
+          {" "}
+          Continue with Email{" "}
+        </Button>
+      </div>
+      {!isLoading && loginError && <Error text={t("login.error-login") ?? ""} />}
+      {!serverDetails?.inviteOnlySignup ? (
+        <div className="mt-6 flex flex-row text-sm text-bunker-400">
+          <span className="mr-1">Don&apos;t have an acount yet?</span>
+          <Link href="/signup">
+            <span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
+              {t("login.create-account")}
+            </span>
+          </Link>
+        </div>
+      ) : (
+        <div />
+      )}
+      <div className="flex flex-row text-sm text-bunker-400">
+        <span className="mr-1">Forgot password?</span>
+        <Link href="/verify-email">
+          <span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
+            Recover your account
+          </span>
+        </Link>
+      </div>
+    </form>
+  );
+};

frontend/src/views/Settings/PersonalSettingsPage/AuthMethodSection/AuthMethodSection.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
-import { faGithub, faGoogle, IconDefinition } from "@fortawesome/free-brands-svg-icons";
+import { faGithub, faGitlab, faGoogle, IconDefinition } from "@fortawesome/free-brands-svg-icons";
 import { faEnvelope } from "@fortawesome/free-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { yupResolver } from "@hookform/resolvers/yup";
@@ -10,129 +10,127 @@ import { useNotificationContext } from "@app/components/context/Notifications/No
 import { Switch } from "@app/components/v2";
 import { useUser } from "@app/context";
 import { useUpdateUserAuthMethods } from "@app/hooks/api";
-import {
+import { AuthMethod } from "@app/hooks/api/users/types";
-    AuthMethod
-} from "@app/hooks/api/users/types";
 
 interface AuthMethodOption {
-    label: string,
+  label: string;
-    value: AuthMethod,
+  value: AuthMethod;
-    icon: IconDefinition;
+  icon: IconDefinition;
 }
 
 const authMethodOpts: AuthMethodOption[] = [
-    { label: "Email", value: AuthMethod.EMAIL, icon: faEnvelope },
+  { label: "Email", value: AuthMethod.EMAIL, icon: faEnvelope },
-    { label: "Google", value: AuthMethod.GOOGLE, icon: faGoogle },
+  { label: "Google", value: AuthMethod.GOOGLE, icon: faGoogle },
-    { label: "GitHub", value: AuthMethod.GITHUB, icon: faGithub }
+  { label: "GitHub", value: AuthMethod.GITHUB, icon: faGithub },
+  { label: "GitLab", value: AuthMethod.GITLAB, icon: faGitlab }
 ];
 
 const samlProviders = [AuthMethod.OKTA_SAML, AuthMethod.JUMPCLOUD_SAML, AuthMethod.AZURE_SAML];
 
 const schema = yup.object({
-    authMethods: yup.array().required("Auth method is required")
+  authMethods: yup.array().required("Auth method is required")
 });
 
 export type FormData = yup.InferType<typeof schema>;
 
 export const AuthMethodSection = () => {
-    const { createNotification } = useNotificationContext();
+  const { createNotification } = useNotificationContext();
-    const { user } = useUser();
+  const { user } = useUser();
-    const { mutateAsync } = useUpdateUserAuthMethods();
+  const { mutateAsync } = useUpdateUserAuthMethods();
-    
-    const {
-        reset,
-        setValue,
-        watch,
-    } = useForm<FormData>({
-        defaultValues: {
-            authMethods: user.authMethods,
-        },
-        resolver: yupResolver(schema)
-    });
-    
-    const authMethods = watch("authMethods");
-    
-    useEffect(() => {
-        if (user) {
-            reset({
-                authMethods: user.authMethods,
-            });
-        }
-    }, [user]);
-    
-    const onAuthMethodToggle = async (value: boolean, authMethodOpt: AuthMethodOption) => {
-        const hasSamlEnabled = user.authMethods
-            .some((authMethod: AuthMethod) => samlProviders.includes(authMethod));
 
-        if (hasSamlEnabled) {
+  const { reset, setValue, watch } = useForm<FormData>({
-            createNotification({
+    defaultValues: {
-                text: "SAML authentication can only be configured in your organization settings",
+      authMethods: user.authMethods
-                type: "error"
+    },
-            });
+    resolver: yupResolver(schema)
-        }
+  });
-        
-        const newAuthMethods = value 
-            ? [...authMethods, authMethodOpt.value] 
-            : authMethods.filter(auth => auth !== authMethodOpt.value);
-        
-        if (value) {
-            const newUser = await mutateAsync({
-                authMethods: newAuthMethods
-            });
 
-            setValue("authMethods", newUser.authMethods);
+  const authMethods = watch("authMethods");
-            createNotification({
+
-                text: "Successfully enabled authentication method",
+  useEffect(() => {
-                type: "success"
+    if (user) {
-            });
+      reset({
-            return;
+        authMethods: user.authMethods
-        }
+      });
-        
-        if (newAuthMethods.length === 0) {
-            createNotification({
-                text: "You must keep at least 1 authentication method enabled",
-                type: "error"
-            });
-            return;
-        }
-        
-        const newUser = await mutateAsync({
-            authMethods: newAuthMethods
-        });
-        
-        setValue("authMethods", newUser.authMethods);
-        createNotification({
-            text: "Successfully disabled authentication method",
-            type: "success"
-        });
     }
-    
+  }, [user]);
-    return (
+
-        <div className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600">
+  const onAuthMethodToggle = async (value: boolean, authMethodOpt: AuthMethodOption) => {
-            <h2 className="text-xl font-semibold flex-1 text-mineshaft-100 mb-8">
+    const hasSamlEnabled = user.authMethods.some((authMethod: AuthMethod) =>
-                Authentication methods
+      samlProviders.includes(authMethod)
-            </h2> 
-            <p className="text-gray-400 mb-4">
-                By enabling a SSO provider, you are allowing an account with that provider which uses the same email address as your existing Infisical account to be able to log in to Infisical.
-            </p>
-            <div className="mb-4">
-                {user && authMethodOpts.map((authMethodOpt) => {
-                    return (
-                        <div className="flex p-4 items-center" key={`auth-method-${authMethodOpt.value}`}>
-                            <div className="flex items-center">
-                                <FontAwesomeIcon icon={authMethodOpt.icon} className="mr-4" />
-                            </div>
-                            <Switch
-                                id={`enable-${authMethodOpt.value}-auth`}
-                                onCheckedChange={(value) => onAuthMethodToggle(value, authMethodOpt)}
-                                isChecked={authMethods?.includes(authMethodOpt.value) ?? false}
-                            >
-                                <p className="w-12 mr-4">{authMethodOpt.label}</p>
-                            </Switch>
-                        </div>
-                    ); 
-                })}
-            </div>
-        </div>
     );
-}
+
+    if (hasSamlEnabled) {
+      createNotification({
+        text: "SAML authentication can only be configured in your organization settings",
+        type: "error"
+      });
+    }
+
+    const newAuthMethods = value
+      ? [...authMethods, authMethodOpt.value]
+      : authMethods.filter((auth) => auth !== authMethodOpt.value);
+
+    if (value) {
+      const newUser = await mutateAsync({
+        authMethods: newAuthMethods
+      });
+
+      setValue("authMethods", newUser.authMethods);
+      createNotification({
+        text: "Successfully enabled authentication method",
+        type: "success"
+      });
+      return;
+    }
+
+    if (newAuthMethods.length === 0) {
+      createNotification({
+        text: "You must keep at least 1 authentication method enabled",
+        type: "error"
+      });
+      return;
+    }
+
+    const newUser = await mutateAsync({
+      authMethods: newAuthMethods
+    });
+
+    setValue("authMethods", newUser.authMethods);
+    createNotification({
+      text: "Successfully disabled authentication method",
+      type: "success"
+    });
+  };
+
+  return (
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <h2 className="mb-8 flex-1 text-xl font-semibold text-mineshaft-100">
+        Authentication methods
+      </h2>
+      <p className="mb-4 text-gray-400">
+        By enabling a SSO provider, you are allowing an account with that provider which uses the
+        same email address as your existing Infisical account to be able to log in to Infisical.
+      </p>
+      <div className="mb-4">
+        {user &&
+          authMethodOpts.map((authMethodOpt) => {
+            return (
+              <div className="flex items-center p-4" key={`auth-method-${authMethodOpt.value}`}>
+                <div className="flex items-center">
+                  <FontAwesomeIcon icon={authMethodOpt.icon} className="mr-4" />
+                </div>
+                <Switch
+                  id={`enable-${authMethodOpt.value}-auth`}
+                  onCheckedChange={(value) => onAuthMethodToggle(value, authMethodOpt)}
+                  isChecked={authMethods?.includes(authMethodOpt.value) ?? false}
+                >
+                  <p className="mr-4 w-12">{authMethodOpt.label}</p>
+                </Switch>
+              </div>
+            );
+          })}
+      </div>
+    </div>
+  );
+};