Add switch accounts interstitial to login flow (#10431)

src/ui/components/shared/Login/Login.tsx

@@ -1,18 +1,21 @@
 import { gql } from "@apollo/client";
 import { ExclamationIcon } from "@heroicons/react/outline";
 import Link from "next/link";
+import { useRouter } from "next/router";
 import { ReactNode, useEffect, useState } from "react";
 
 import { Button } from "replay-next/components/Button";
 import { query } from "shared/graphql/apolloClient";
 import { GetConnection, GetConnectionVariables } from "shared/graphql/generated/GetConnection";
 import { getReadOnlyParamsFromURL } from "shared/utils/environment";
 import { isMacOS } from "shared/utils/os";
+import { UserInfo, useGetUserInfo } from "ui/hooks/users";
 import { getAuthClientId, getAuthHost } from "ui/utils/auth";
 import { requestBrowserLogin, setUserInBrowserPrefs } from "ui/utils/browser";
 import { isTeamMemberInvite } from "ui/utils/onboarding";
 import { sendTelemetryEvent } from "ui/utils/telemetry";
 import useAuth0 from "ui/utils/useAuth0";
+import useToken from "ui/utils/useToken";
 
 import { OnboardingContentWrapper, OnboardingModalContainer } from "../Onboarding";
 
@@ -126,6 +129,35 @@ function LoginMessaging() {
   );
 }
 
+function SwitchAccountMessage({
+  user,
+  onSwitch,
+  onCancel,
+}: {
+  user: UserInfo;
+  onCancel: () => void;
+  onSwitch: () => void;
+}) {
+  return (
+    <div className="space-y-6">
+      <p className="text-center text-base">
+        You are already logged in as <strong>{user.email}</strong>.
+      </p>
+      <Button className="w-full justify-center" onClick={onCancel} size="large">
+        Continue to Library
+      </Button>
+      <Button
+        className="w-full justify-center text-sm font-bold text-primaryAccent underline"
+        onClick={onSwitch}
+        size="large"
+        variant="outline"
+      >
+        Switch Accounts
+      </Button>
+    </div>
+  );
+}
+
 function SocialLogin({
   onShowSSOLogin,
   onLogin,
@@ -242,8 +274,12 @@ export default function Login({
   challenge?: string;
   state?: string;
 }) {
+  const router = useRouter();
   const { loginWithRedirect, error } = useAuth0();
   const [sso, setSSO] = useState(false);
+  const [continueToLogin, setContinueToLogin] = useState(false);
+  const token = useToken();
+  const user = useGetUserInfo();
 
   const url = new URL(returnToPath, window.location.origin);
   if (url.pathname === "/login" || (url.pathname === "/" && url.searchParams.has("state"))) {
@@ -273,7 +309,13 @@ export default function Login({
   return (
     <OnboardingModalContainer theme="light">
       <OnboardingContentWrapper overlay>
-        {global.__IS_RECORD_REPLAY_RUNTIME__ && isOSX ? (
+        {token.token && user.email && !continueToLogin ? (
+          <SwitchAccountMessage
+            user={user}
+            onSwitch={() => setContinueToLogin(true)}
+            onCancel={() => router.push("/")}
+          />
+        ) : global.__IS_RECORD_REPLAY_RUNTIME__ && isOSX ? (
           <ReplayBrowserLogin />
         ) : sso ? (
           <SSOLogin onLogin={onLogin} />