fix(apikey): don't authenticate api key for external auth [EE-6932] (#11460)

app/react/portainer/account/CreateAccessTokenView/CreateUserAcccessToken.validation.tsx

@@ -2,11 +2,22 @@ import { SchemaOf, object, string } from 'yup';
 
 import { ApiKeyFormValues } from './types';
 
-export function getAPITokenValidationSchema(): SchemaOf<ApiKeyFormValues> {
+export function getAPITokenValidationSchema(
+  requirePassword: boolean
+): SchemaOf<ApiKeyFormValues> {
+  if (requirePassword) {
+    return object({
+      password: string().required('Password is required.'),
+      description: string()
+        .max(128, 'Description must be at most 128 characters')
+        .required('Description is required.'),
+    });
+  }
+
   return object({
-    password: string().required('Password is required.'),
+    password: string().optional(),
     description: string()
       .max(128, 'Description must be at most 128 characters')
-      .required('Description is required'),
+      .required('Description is required.'),
   });
 }

app/react/portainer/account/CreateAccessTokenView/CreateUserAccessToken.test.tsx

@@ -33,7 +33,10 @@ test('the button is disabled when all fields are blank and enabled when all fiel
 });
 
 function renderComponent() {
-  const user = new UserViewModel({ Username: 'user' });
+  const user = new UserViewModel({
+    Username: 'admin',
+    Id: 1,
+  });
 
   const Wrapped = withTestQueryProvider(
     withUserProvider(withTestRouter(CreateUserAccessToken), user)

app/react/portainer/account/CreateAccessTokenView/CreateUserAccessToken.tsx

@@ -3,10 +3,13 @@ import { useState } from 'react';
 
 import { useCurrentUser } from '@/react/hooks/useUser';
 import { useAnalytics } from '@/react/hooks/useAnalytics';
+import { AuthenticationMethod } from '@/react/portainer/settings/types';
 
 import { Widget } from '@@/Widget';
 import { PageHeader } from '@@/PageHeader';
 
+import { usePublicSettings } from '../../settings/queries/usePublicSettings';
+
 import { ApiKeyFormValues } from './types';
 import { getAPITokenValidationSchema } from './CreateUserAcccessToken.validation';
 import { useCreateUserAccessTokenMutation } from './useCreateUserAccessTokenMutation';
@@ -23,6 +26,11 @@ export function CreateUserAccessToken() {
   const { user } = useCurrentUser();
   const [newAPIToken, setNewAPIToken] = useState('');
   const { trackEvent } = useAnalytics();
+  const settings = usePublicSettings();
+
+  const requirePassword =
+    settings.data?.AuthenticationMethod === AuthenticationMethod.Internal ||
+    user.Id === 1;
 
   return (
     <>
@@ -43,12 +51,16 @@ export function CreateUserAccessToken() {
                 <Formik
                   initialValues={initialValues}
                   onSubmit={onSubmit}
-                  validationSchema={getAPITokenValidationSchema}
+                  validationSchema={getAPITokenValidationSchema(
+                    requirePassword
+                  )}
                 >
-                  <CreateUserAccessTokenInnerForm />
+                  <CreateUserAccessTokenInnerForm
+                    showAuthentication={requirePassword}
+                  />
                 </Formik>
               ) : (
-                DisplayUserAccessToken(newAPIToken)
+                <DisplayUserAccessToken apikey={newAPIToken} />
               )}
             </Widget.Body>
           </Widget>

app/react/portainer/account/CreateAccessTokenView/CreateUserAccessTokenInnerForm.tsx

@@ -6,7 +6,11 @@ import { LoadingButton } from '@@/buttons';
 
 import { ApiKeyFormValues } from './types';
 
-export function CreateUserAccessTokenInnerForm() {
+interface Props {
+  showAuthentication: boolean;
+}
+
+export function CreateUserAccessTokenInnerForm({ showAuthentication }: Props) {
   const { errors, values, handleSubmit, isValid, dirty } =
     useFormikContext<ApiKeyFormValues>();
 
@@ -16,21 +20,23 @@ export function CreateUserAccessTokenInnerForm() {
       onSubmit={handleSubmit}
       autoComplete="off"
     >
-      <FormControl
-        inputId="password"
-        label="Current password"
-        required
-        errors={errors.password}
-      >
-        <Field
-          as={Input}
-          type="password"
-          id="password"
-          name="password"
-          value={values.password}
-          autoComplete="new-password"
-        />
-      </FormControl>
+      {showAuthentication && (
+        <FormControl
+          inputId="password"
+          label="Current password"
+          required
+          errors={errors.password}
+        >
+          <Field
+            as={Input}
+            type="password"
+            id="password"
+            name="password"
+            value={values.password}
+            autoComplete="new-password"
+          />
+        </FormControl>
+      )}
       <FormControl
         inputId="description"
         label="Description"

app/react/portainer/account/CreateAccessTokenView/DisplayUserAccessToken.tsx

@@ -4,7 +4,7 @@ import { Button, CopyButton } from '@@/buttons';
 import { FormSectionTitle } from '@@/form-components/FormSectionTitle';
 import { TextTip } from '@@/Tip/TextTip';
 
-export function DisplayUserAccessToken(apikey: string) {
+export function DisplayUserAccessToken({ apikey }: { apikey: string }) {
   const router = useRouter();
   return (
     <>

app/react/portainer/account/CreateAccessTokenView/types.ts

@@ -1,4 +1,4 @@
 export interface ApiKeyFormValues {
-  password: string;
+  password?: string;
   description: string;
 }