feat: add GitLab OAuth client (#4692)

web/components/account/oauth/gitlab-button.tsx

@@ -0,0 +1,36 @@
+import { FC } from "react";
+import { useRouter } from "next/router";
+import Image from "next/image";
+import { useTheme } from "next-themes";
+// helpers
+import { API_BASE_URL } from "@/helpers/common.helper";
+// images
+import GitlabLogo from "/public/logos/gitlab-logo.svg";
+
+export type GitlabOAuthButtonProps = {
+  text: string;
+};
+
+export const GitlabOAuthButton: FC<GitlabOAuthButtonProps> = (props) => {
+  const { query } = useRouter();
+  const { next_path } = query;
+  const { text } = props;
+  // hooks
+  const { resolvedTheme } = useTheme();
+
+  const handleSignIn = () => {
+    window.location.assign(`${API_BASE_URL}/auth/gitlab/${next_path ? `?next_path=${next_path}` : ``}`);
+  };
+
+  return (
+    <button
+      className={`flex h-[42px] w-full items-center justify-center gap-2 rounded border px-2 text-sm font-medium text-custom-text-100 duration-300 bg-onboarding-background-200 hover:bg-onboarding-background-300 ${
+        resolvedTheme === "dark" ? "border-[#43484F]" : "border-[#D9E4FF]"
+      }`}
+      onClick={handleSignIn}
+    >
+      <Image src={GitlabLogo} height={20} width={20} alt="GitLab Logo" />
+      {text}
+    </button>
+  );
+};

web/components/account/oauth/index.ts

@@ -1,3 +1,4 @@
 export * from "./oauth-options";
 export * from "./google-button";
 export * from "./github-button";
+export * from "./gitlab-button";

web/components/account/oauth/oauth-options.tsx

@@ -1,6 +1,6 @@
 import { observer } from "mobx-react";
 // components
-import { GithubOAuthButton, GoogleOAuthButton } from "@/components/account";
+import { GithubOAuthButton, GitlabOAuthButton, GoogleOAuthButton } from "@/components/account";
 // hooks
 import { useInstance } from "@/hooks/store";
 
@@ -12,7 +12,7 @@ export const OAuthOptions: React.FC<TOAuthOptionProps> = observer(() => {
   // hooks
   const { config } = useInstance();
 
-  const isOAuthEnabled = (config && (config?.is_google_enabled || config?.is_github_enabled)) || false;
+  const isOAuthEnabled = (config && (config?.is_google_enabled || config?.is_github_enabled || config?.is_gitlab_enabled)) || false;
 
   if (!isOAuthEnabled) return null;
 
@@ -30,6 +30,7 @@ export const OAuthOptions: React.FC<TOAuthOptionProps> = observer(() => {
           </div>
         )}
         {config?.is_github_enabled && <GithubOAuthButton text="Continue with Github" />}
+        {config?.is_gitlab_enabled && <GitlabOAuthButton text="Continue with GitLab" />}
       </div>
     </>
   );

web/helpers/authentication.helper.tsx

@@ -64,10 +64,13 @@ export enum EAuthenticationErrorCodes {
   EMAIL_CODE_ATTEMPT_EXHAUSTED_SIGN_IN = "5100",
   EMAIL_CODE_ATTEMPT_EXHAUSTED_SIGN_UP = "5102",
   // Oauth
+  OAUTH_NOT_CONFIGURED = "5104",
   GOOGLE_NOT_CONFIGURED = "5105",
   GITHUB_NOT_CONFIGURED = "5110",
+  GITLAB_NOT_CONFIGURED = "5111",
   GOOGLE_OAUTH_PROVIDER_ERROR = "5115",
   GITHUB_OAUTH_PROVIDER_ERROR = "5120",
+  GITLAB_OAUTH_PROVIDER_ERROR = "5121",
   // Reset Password
   INVALID_PASSWORD_TOKEN = "5125",
   EXPIRED_PASSWORD_TOKEN = "5130",
@@ -239,6 +242,10 @@ const errorCodeMessages: {
   },
 
   // Oauth
+  [EAuthenticationErrorCodes.OAUTH_NOT_CONFIGURED]: {
+    title: `OAuth not configured`,
+    message: () => `OAuth not configured. Please contact your administrator.`,
+  },
   [EAuthenticationErrorCodes.GOOGLE_NOT_CONFIGURED]: {
     title: `Google not configured`,
     message: () => `Google not configured. Please contact your administrator.`,
@@ -247,6 +254,10 @@ const errorCodeMessages: {
     title: `GitHub not configured`,
     message: () => `GitHub not configured. Please contact your administrator.`,
   },
+  [EAuthenticationErrorCodes.GITLAB_NOT_CONFIGURED]: {
+    title: `GitLab not configured`,
+    message: () => `GitLab not configured. Please contact your administrator.`,
+  },
   [EAuthenticationErrorCodes.GOOGLE_OAUTH_PROVIDER_ERROR]: {
     title: `Google OAuth provider error`,
     message: () => `Google OAuth provider error. Please try again.`,
@@ -255,6 +266,10 @@ const errorCodeMessages: {
     title: `GitHub OAuth provider error`,
     message: () => `GitHub OAuth provider error. Please try again.`,
   },
+  [EAuthenticationErrorCodes.GITLAB_OAUTH_PROVIDER_ERROR]: {
+    title: `GitLab OAuth provider error`,
+    message: () => `GitLab OAuth provider error. Please try again.`,
+  },
 
   // Reset Password
   [EAuthenticationErrorCodes.INVALID_PASSWORD_TOKEN]: {
@@ -377,10 +392,13 @@ export const authErrorHandler = (
     EAuthenticationErrorCodes.EXPIRED_MAGIC_CODE_SIGN_UP,
     EAuthenticationErrorCodes.EMAIL_CODE_ATTEMPT_EXHAUSTED_SIGN_IN,
     EAuthenticationErrorCodes.EMAIL_CODE_ATTEMPT_EXHAUSTED_SIGN_UP,
+    EAuthenticationErrorCodes.OAUTH_NOT_CONFIGURED,
     EAuthenticationErrorCodes.GOOGLE_NOT_CONFIGURED,
     EAuthenticationErrorCodes.GITHUB_NOT_CONFIGURED,
+    EAuthenticationErrorCodes.GITLAB_NOT_CONFIGURED,
     EAuthenticationErrorCodes.GOOGLE_OAUTH_PROVIDER_ERROR,
     EAuthenticationErrorCodes.GITHUB_OAUTH_PROVIDER_ERROR,
+    EAuthenticationErrorCodes.GITLAB_OAUTH_PROVIDER_ERROR,
     EAuthenticationErrorCodes.INVALID_PASSWORD_TOKEN,
     EAuthenticationErrorCodes.EXPIRED_PASSWORD_TOKEN,
     EAuthenticationErrorCodes.INCORRECT_OLD_PASSWORD,

web/public/logos/gitlab-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="80 80 220 220"><defs><style>.cls-1{fill:#e24329;}.cls-2{fill:#fc6d26;}.cls-3{fill:#fca326;}</style></defs><g id="LOGO"><path class="cls-1" d="M282.83,170.73l-.27-.69-26.14-68.22a6.81,6.81,0,0,0-2.69-3.24,7,7,0,0,0-8,.43,7,7,0,0,0-2.32,3.52l-17.65,54H154.29l-17.65-54A6.86,6.86,0,0,0,134.32,99a7,7,0,0,0-8-.43,6.87,6.87,0,0,0-2.69,3.24L97.44,170l-.26.69a48.54,48.54,0,0,0,16.1,56.1l.09.07.24.17,39.82,29.82,19.7,14.91,12,9.06a8.07,8.07,0,0,0,9.76,0l12-9.06,19.7-14.91,40.06-30,.1-.08A48.56,48.56,0,0,0,282.83,170.73Z"/><path class="cls-2" d="M282.83,170.73l-.27-.69a88.3,88.3,0,0,0-35.15,15.8L190,229.25c19.55,14.79,36.57,27.64,36.57,27.64l40.06-30,.1-.08A48.56,48.56,0,0,0,282.83,170.73Z"/><path class="cls-3" d="M153.43,256.89l19.7,14.91,12,9.06a8.07,8.07,0,0,0,9.76,0l12-9.06,19.7-14.91S209.55,244,190,229.25C170.45,244,153.43,256.89,153.43,256.89Z"/><path class="cls-2" d="M132.58,185.84A88.19,88.19,0,0,0,97.44,170l-.26.69a48.54,48.54,0,0,0,16.1,56.1l.09.07.24.17,39.82,29.82s17-12.85,36.57-27.64Z"/></g></svg>