fix: improved 'use-identity-login' error message for users trying to signInn using different provider (#20582)

* improved 'use-identity-login' error message for users trying to signin using different provider

* passing original identity provider as query parameter

* Update packages/features/auth/lib/next-auth-options.ts

* passed different error names for different types of error

---------

Co-authored-by: romit <romitgabani1@gmail.com>
Co-authored-by: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
Co-authored-by: Hariom Balhara <hariombalhara@gmail.com>
Co-authored-by: Tushar Bhatt <95581504+TusharBhatt1@users.noreply.github.com>

apps/web/app/(use-page-wrapper)/auth/error/page.tsx

@@ -3,6 +3,7 @@ import { _generateMetadata, getTranslate } from "app/_utils";
 import Link from "next/link";
 import { z } from "zod";
 
+import { IdentityProvider } from "@calcom/prisma/client";
 import { Button } from "@calcom/ui/components/button";
 import { Icon } from "@calcom/ui/components/icon";
 
@@ -20,12 +21,38 @@ export const generateMetadata = async () => {
 
 const querySchema = z.object({
   error: z.string().optional(),
+  provider: z.string().optional(),
 });
 
 const ServerPage = async ({ searchParams }: PageProps) => {
   const t = await getTranslate();
-  const { error } = querySchema.parse({ error: (await searchParams)?.error || undefined });
-  const errorMsg = t("error_during_login") + (error ? ` Error code: ${error}` : "");
+
+  const { error, provider } = querySchema.parse({
+    error: (await searchParams)?.error || undefined,
+    provider: (await searchParams)?.provider || undefined,
+  });
+
+  // generate error message based on different errors
+  const getErrorMessage = (error: string | undefined, provider: string | undefined) => {
+    if (error === "user-creation-error") {
+      return t("user_creation_error");
+    } else if (error === "wrong-provider") {
+      // showing user their original identity provider by which account is managed.
+      const providerName =
+        provider === IdentityProvider.GOOGLE
+          ? "Google"
+          : provider === IdentityProvider.CAL
+          ? "Email and Password"
+          : provider === IdentityProvider.SAML
+          ? "SAML (like Okta)"
+          : "your original login method";
+      return t("account_managed_by_identity_provider_error", { provider: providerName });
+    }
+    return t("error_during_login") + (error ? ` Error code: ${error}` : "");
+  };
+
+  const errorMsg = getErrorMessage(error, provider);
+
   return (
     <AuthContainer>
       <div>

apps/web/public/static/locales/en/common.json

@@ -1024,6 +1024,8 @@
   "account_created_with_identity_provider": "Your account was created using an Identity Provider.",
   "account_managed_by_identity_provider": "Your account is managed by {{provider}}",
   "account_managed_by_identity_provider_description": "To change your email, password, enable two-factor authentication and more, please visit your {{provider}} account settings.",
+  "account_managed_by_identity_provider_error": "Your account is managed by different identity provider. Try logging in with {{provider}}.",
+  "user_creation_error": "Error creating a new user. Please try again.",
   "signin_with_google": "Sign in with Google",
   "signin_with_saml": "Sign in with SAML",
   "signin_with_saml_oidc": "Sign in with SAML/OIDC",

packages/features/auth/lib/next-auth-options.ts

@@ -950,7 +950,7 @@ export const getOptions = ({
               return true;
             }
           } else if (existingUserWithEmail.identityProvider === IdentityProvider.CAL) {
-            return "/auth/error?error=use-password-login";
+            return `/auth/error?error=wrong-provider&provider=${existingUserWithEmail.identityProvider}`;
           } else if (
             existingUserWithEmail.identityProvider === IdentityProvider.GOOGLE &&
             idP === IdentityProvider.SAML
@@ -971,8 +971,7 @@ export const getOptions = ({
               return true;
             }
           }
-
-          return "/auth/error?error=use-identity-login";
+          return `auth/error?error=wrong-provider&provider=${existingUserWithEmail.identityProvider}`;
         }
 
         // Associate with organization if enabled by flag and idP is Google (for now)
@@ -1010,7 +1009,7 @@ export const getOptions = ({
           }
         } catch (err) {
           log.error("Error creating a new user", err);
-          return "/auth/error?error=use-identity-login";
+          return `/auth/error?error=user-creation-error`;
         }
       }