From 795a228a446093975c713074e80d755fab4fc600 Mon Sep 17 00:00:00 2001
From: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
Date: Wed, 28 Aug 2024 20:54:13 +0530
Subject: [PATCH] fix: allow all sign in methods when being invited (#13436)

* allow all sign in methods

* changes

* update

* add checks

---------

Co-authored-by: Keith Williams <keithwillcode@gmail.com>
Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Co-authored-by: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com>
---
 apps/web/pages/auth/sso/[provider].tsx |   5 +-
 apps/web/pages/signup.tsx              | 173 +++++++++++++------------
 2 files changed, 90 insertions(+), 88 deletions(-)

diff --git a/apps/web/pages/auth/sso/[provider].tsx b/apps/web/pages/auth/sso/[provider].tsx
index 8aa522667f..5ea01f8dc9 100644
--- a/apps/web/pages/auth/sso/[provider].tsx
+++ b/apps/web/pages/auth/sso/[provider].tsx
@@ -19,9 +19,8 @@ export default function Provider(props: SSOProviderPageProps) {
   const router = useRouter();
 
   useEffect(() => {
+    const email = searchParams?.get("email");
     if (props.provider === "saml") {
-      const email = searchParams?.get("email");
-
       if (!email) {
         router.push(`/auth/error?error=Email not provided`);
         return;
@@ -33,6 +32,8 @@ export default function Provider(props: SSOProviderPageProps) {
       }
 
       signIn("saml", {}, { tenant: props.tenant, product: props.product });
+    } else if (props.provider === "google" && email) {
+      signIn("google", {}, { login_hint: email });
     } else {
       signIn(props.provider);
     }
diff --git a/apps/web/pages/signup.tsx b/apps/web/pages/signup.tsx
index 49015ba22a..2620efd175 100644
--- a/apps/web/pages/signup.tsx
+++ b/apps/web/pages/signup.tsx
@@ -428,8 +428,7 @@ export default function Signup({
                     : t("create_account")}
                 </Button>
               </Form>
-              {/* Continue with Social Logins - Only for non-invite links */}
-              {token || (!isGoogleLoginEnabled && !isSAMLLoginEnabled) ? null : (
+              {!isGoogleLoginEnabled && !isSAMLLoginEnabled ? null : (
                 <div className="mt-6">
                   <div className="relative flex items-center">
                     <div className="border-subtle flex-grow border-t" />
@@ -440,91 +439,93 @@ export default function Signup({
                   </div>
                 </div>
               )}
-              {/* Social Logins - Only for non-invite links*/}
-              {!token && (
-                <div className="mt-6 flex flex-col gap-2 md:flex-row">
-                  {isGoogleLoginEnabled ? (
-                    <Button
-                      color="secondary"
-                      disabled={!!formMethods.formState.errors.username || premiumUsername}
-                      loading={isGoogleLoading}
-                      CustomStartIcon={
-                        <img
-                          className={classNames(
-                            "text-subtle  mr-2 h-4 w-4 dark:invert",
-                            premiumUsername && "opacity-50"
-                          )}
-                          src="/google-icon.svg"
-                          alt=""
-                        />
-                      }
-                      className={classNames(
-                        "w-full justify-center rounded-md text-center",
-                        formMethods.formState.errors.username ? "opacity-50" : ""
-                      )}
-                      onClick={async () => {
-                        setIsGoogleLoading(true);
-                        const username = formMethods.getValues("username");
-                        const baseUrl = process.env.NEXT_PUBLIC_WEBAPP_URL;
-                        const GOOGLE_AUTH_URL = `${baseUrl}/auth/sso/google`;
-                        if (username) {
-                          // If username is present we save it in query params to check for premium
-                          const searchQueryParams = new URLSearchParams();
-                          searchQueryParams.set("username", username);
-                          localStorage.setItem("username", username);
-                          router.push(`${GOOGLE_AUTH_URL}?${searchQueryParams.toString()}`);
-                          return;
-                        }
-                        router.push(GOOGLE_AUTH_URL);
-                      }}>
-                      Google
-                    </Button>
-                  ) : null}
-                  {isSAMLLoginEnabled ? (
-                    <Button
-                      color="secondary"
-                      disabled={
-                        !!formMethods.formState.errors.username ||
-                        !!formMethods.formState.errors.email ||
-                        premiumUsername ||
-                        isSubmitting ||
-                        isGoogleLoading
-                      }
-                      className={classNames(
-                        "w-full justify-center rounded-md text-center",
-                        formMethods.formState.errors.username && formMethods.formState.errors.email
-                          ? "opacity-50"
-                          : ""
-                      )}
-                      onClick={() => {
-                        if (!formMethods.getValues("username")) {
-                          formMethods.trigger("username");
-                        }
-                        if (!formMethods.getValues("email")) {
-                          formMethods.trigger("email");
-
-                          return;
-                        }
-                        const username = formMethods.getValues("username");
-                        if (!username) {
-                          showToast("error", t("username_required"));
-                          return;
-                        }
+              <div className="mt-6 flex flex-col gap-2 md:flex-row">
+                {isGoogleLoginEnabled ? (
+                  <Button
+                    color="secondary"
+                    disabled={!!formMethods.formState.errors.username || premiumUsername}
+                    loading={isGoogleLoading}
+                    CustomStartIcon={
+                      <img
+                        className={classNames(
+                          "text-subtle  mr-2 h-4 w-4 dark:invert",
+                          premiumUsername && "opacity-50"
+                        )}
+                        src="/google-icon.svg"
+                        alt=""
+                      />
+                    }
+                    className={classNames(
+                      "w-full justify-center rounded-md text-center",
+                      formMethods.formState.errors.username ? "opacity-50" : ""
+                    )}
+                    onClick={async () => {
+                      setIsGoogleLoading(true);
+                      const username = formMethods.getValues("username");
+                      const baseUrl = process.env.NEXT_PUBLIC_WEBAPP_URL;
+                      const GOOGLE_AUTH_URL = `${baseUrl}/auth/sso/google`;
+                      const searchQueryParams = new URLSearchParams();
+                      if (username) {
+                        // If username is present we save it in query params to check for premium
+                        searchQueryParams.set("username", username);
                         localStorage.setItem("username", username);
-                        const sp = new URLSearchParams();
-                        // @NOTE: don't remove username query param as it's required right now for stripe payment page
-                        sp.set("username", username);
-                        sp.set("email", formMethods.getValues("email"));
-                        router.push(
-                          `${process.env.NEXT_PUBLIC_WEBAPP_URL}/auth/sso/saml` + `?${sp.toString()}`
-                        );
-                      }}>
-                      <Icon name="shield-check" className="mr-2 h-5 w-5" />
-                      {t("saml_sso")}
-                    </Button>
-                  ) : null}
-                </div>
-              )}
+                      }
+                      if (token) {
+                        searchQueryParams.set("email", prepopulateFormValues?.email);
+                      }
+                      const url = searchQueryParams.toString()
+                        ? `${GOOGLE_AUTH_URL}?${searchQueryParams.toString()}`
+                        : GOOGLE_AUTH_URL;
+
+                      router.push(url);
+                    }}>
+                    Google
+                  </Button>
+                ) : null}
+                {isSAMLLoginEnabled ? (
+                  <Button
+                    color="secondary"
+                    disabled={
+                      !!formMethods.formState.errors.username ||
+                      !!formMethods.formState.errors.email ||
+                      premiumUsername ||
+                      isSubmitting ||
+                      isGoogleLoading
+                    }
+                    className={classNames(
+                      "w-full justify-center rounded-md text-center",
+                      formMethods.formState.errors.username && formMethods.formState.errors.email
+                        ? "opacity-50"
+                        : ""
+                    )}
+                    onClick={() => {
+                      if (!formMethods.getValues("username")) {
+                        formMethods.trigger("username");
+                      }
+                      if (!formMethods.getValues("email")) {
+                        formMethods.trigger("email");
+
+                        return;
+                      }
+                      const username = formMethods.getValues("username");
+                      if (!username) {
+                        showToast("error", t("username_required"));
+                        return;
+                      }
+                      localStorage.setItem("username", username);
+                      const sp = new URLSearchParams();
+                      // @NOTE: don't remove username query param as it's required right now for stripe payment page
+                      sp.set("username", username);
+                      sp.set("email", formMethods.getValues("email"));
+                      router.push(
+                        `${process.env.NEXT_PUBLIC_WEBAPP_URL}/auth/sso/saml` + `?${sp.toString()}`
+                      );
+                    }}>
+                    <Icon name="shield-check" className="mr-2 h-5 w-5" />
+                    {t("saml_sso")}
+                  </Button>
+                ) : null}
+              </div>
             </div>
             {/* Already have an account & T&C */}
             <div className="mt-10 flex h-full flex-col justify-end pb-6 text-xs">