diff --git a/apps/web/modules/auth/oauth2/authorize-view.tsx b/apps/web/modules/auth/oauth2/authorize-view.tsx
index 3dd41fe5c8..c66ba5d3c4 100644
--- a/apps/web/modules/auth/oauth2/authorize-view.tsx
+++ b/apps/web/modules/auth/oauth2/authorize-view.tsx
@@ -9,14 +9,17 @@ import { APP_NAME } from "@calcom/lib/constants";
import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
+import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
import { Avatar } from "@calcom/ui/components/avatar";
import { Button } from "@calcom/ui/components/button";
import { Select } from "@calcom/ui/components/form";
import { Icon } from "@calcom/ui/components/icon";
+import { Tooltip } from "@calcom/ui/components/tooltip";
export function Authorize() {
const { t } = useLocale();
const { status } = useSession();
+ const { data: user } = useMeQuery();
const router = useRouter();
const searchParams = useCompatSearchParams();
@@ -26,11 +29,18 @@ export function Authorize() {
const state = searchParams?.get("state") as string;
const scope = searchParams?.get("scope") as string;
const code_challenge = searchParams?.get("code_challenge") as string;
- const code_challenge_method = searchParams?.get("code_challenge_method") as string;
+ const code_challenge_method = searchParams?.get(
+ "code_challenge_method"
+ ) as string;
+ const show_account_selector =
+ searchParams?.get("show_account_selector") === "true";
const queryString = searchParams?.toString();
- const [selectedAccount, setSelectedAccount] = useState<{ value: string; label: string } | null>();
+ const [selectedAccount, setSelectedAccount] = useState<{
+ value: string;
+ label: string;
+ } | null>();
const scopes = scope ? scope.toString().split(",") : [];
const {
@@ -48,23 +58,30 @@ export function Authorize() {
);
const { data, isPending: isPendingProfiles } =
- trpc.viewer.loggedInViewerRouter.teamsAndUserProfilesQuery.useQuery();
-
- const generateAuthCodeMutation = trpc.viewer.oAuth.generateAuthCode.useMutation({
- onSuccess: (data) => {
- window.location.href =
- data.redirectUrl ?? `${client?.redirectUri}?code=${data.authorizationCode}&state=${state}`;
- },
- onError: (error) => {
- if (client?.redirectUri) {
- redirectToOAuthError({
- redirectUri: client.redirectUri,
- trpcError: error,
- state,
- });
+ trpc.viewer.loggedInViewerRouter.teamsAndUserProfilesQuery.useQuery(
+ undefined,
+ {
+ enabled: show_account_selector,
}
- },
- });
+ );
+
+ const generateAuthCodeMutation =
+ trpc.viewer.oAuth.generateAuthCode.useMutation({
+ onSuccess: (data) => {
+ window.location.href =
+ data.redirectUrl ??
+ `${client?.redirectUri}?code=${data.authorizationCode}&state=${state}`;
+ },
+ onError: (error) => {
+ if (client?.redirectUri) {
+ redirectToOAuthError({
+ redirectUri: client.redirectUri,
+ trpcError: error,
+ state,
+ });
+ }
+ },
+ });
const mappedProfiles = data
? data
@@ -76,14 +93,14 @@ export function Authorize() {
: [];
useEffect(() => {
- if (mappedProfiles.length > 0) {
+ if (show_account_selector && mappedProfiles.length > 0) {
setSelectedAccount(mappedProfiles[0]);
}
- }, [isPendingProfiles]);
+ }, [isPendingProfiles, show_account_selector]);
// Auto-authorize trusted clients
useEffect(() => {
- if (client?.isTrusted && selectedAccount) {
+ if (client?.isTrusted) {
generateAuthCodeMutation.mutate({
clientId: client_id as string,
redirectUri: client.redirectUri,
@@ -93,7 +110,7 @@ export function Authorize() {
state,
});
}
- }, [client?.isTrusted, selectedAccount]);
+ }, [client?.isTrusted]);
useEffect(() => {
if (status === "unauthenticated") {
@@ -113,7 +130,11 @@ export function Authorize() {
return
{getClientError.message}
;
}
- if (isPendingGetClient || isPendingProfiles || status !== "authenticated") {
+ if (
+ isPendingGetClient ||
+ (show_account_selector && isPendingProfiles) ||
+ status !== "authenticated"
+ ) {
return <>>;
}
@@ -122,75 +143,113 @@ export function Authorize() {
}
// Don't show UI for trusted clients, they'll auto-authorize
- if (client.isTrusted && selectedAccount) {
+ if (client.isTrusted) {
return (
- Authorizing...
+
+ {t("authorizing")}
+
);
}
return (
-
-
-
+
+
+
}
+ fallback={
}
className="items-center"
imageSrc={client.logo}
size="lg"
/>
-
-
+
+
-

+
-
- {t("access_cal_account", { clientName: client.name, appName: APP_NAME })}
+
+ {t("access_cal_account", {
+ clientName: client.name,
+ appName: APP_NAME,
+ })}
-
{t("select_account_team")}
-