1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
/**
* @license
* Copyright 2025 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
import React, { useState } from 'react';
import { Box, Text, useInput } from 'ink';
import { Colors } from '../colors.js';
import { RadioButtonSelect } from './shared/RadioButtonSelect.js';
import { LoadedSettings, SettingScope } from '../../config/settings.js';
import { AuthType } from '@gemini-cli/core';
import { validateAuthMethod } from '../../config/auth.js';
interface AuthDialogProps {
onSelect: (authMethod: string | undefined, scope: SettingScope) => void;
onHighlight: (authMethod: string | undefined) => void;
settings: LoadedSettings;
initialErrorMessage?: string | null;
}
export function AuthDialog({
onSelect,
onHighlight,
settings,
initialErrorMessage,
}: AuthDialogProps): React.JSX.Element {
const [errorMessage, setErrorMessage] = useState<string | null>(
initialErrorMessage || null,
);
const allAuthItems = [
{
label: 'Login with Google',
value: AuthType.LOGIN_WITH_GOOGLE_PERSONAL,
},
{ label: 'Gemini API Key', value: AuthType.USE_GEMINI },
{
label: 'Login with Google Work',
value: AuthType.LOGIN_WITH_GOOGLE_ENTERPRISE,
},
{ label: 'Vertex AI', value: AuthType.USE_VERTEX_AI },
];
const isSelectedAuthInMore = allAuthItems
.slice(2)
.some((item) => item.value === settings.merged.selectedAuthType);
const [showAll, setShowAll] = useState(isSelectedAuthInMore);
const initialAuthItems = [
...allAuthItems.slice(0, 2),
{ label: 'More...', value: 'more' },
];
const items = showAll ? allAuthItems : initialAuthItems;
let initialAuthIndex = items.findIndex(
(item) => item.value === settings.merged.selectedAuthType,
);
if (initialAuthIndex === -1) {
initialAuthIndex = 0;
}
const handleAuthSelect = (authMethod: string) => {
if (authMethod === 'more') {
setShowAll(true);
return;
}
const error = validateAuthMethod(authMethod);
if (error) {
setErrorMessage(error);
} else {
setErrorMessage(null);
onSelect(authMethod, SettingScope.User);
}
};
useInput((_input, key) => {
if (key.escape) {
if (settings.merged.selectedAuthType === undefined) {
// Prevent exiting if no auth method is set
setErrorMessage(
'You must select an auth method to proceed. Press Ctrl+C twice to exit.',
);
return;
}
onSelect(undefined, SettingScope.User);
}
});
return (
<Box
borderStyle="round"
borderColor={Colors.Gray}
flexDirection="column"
padding={1}
width="100%"
>
<Text bold>Select Auth Method</Text>
<RadioButtonSelect
items={items}
initialIndex={initialAuthIndex}
onSelect={handleAuthSelect}
onHighlight={onHighlight}
isFocused={true}
/>
{errorMessage && (
<Box marginTop={1}>
<Text color={Colors.AccentRed}>{errorMessage}</Text>
</Box>
)}
<Box marginTop={1}>
<Text color={Colors.Gray}>(Use Enter to select)</Text>
</Box>
</Box>
);
}
|
