From 458ac9f3dc3389d68ed06033e59171b04676cf0d Mon Sep 17 00:00:00 2001
From: Miguel Rincon <mrincon@gitlab.com>
Date: Tue, 6 Sep 2022 12:12:46 -0400
Subject: [PATCH 1/6] Documentation: Document runner token expiration

Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/30942
---
 doc/ci/runners/configure_runners.md | 40 +++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/doc/ci/runners/configure_runners.md b/doc/ci/runners/configure_runners.md
index 3efa697bf2f22f..a42bbc51608010 100644
--- a/doc/ci/runners/configure_runners.md
+++ b/doc/ci/runners/configure_runners.md
@@ -912,3 +912,43 @@ To determine which runners need to be upgraded:
    - **Outdated - available**: Newer versions are available but upgrading is not critical.
 
 1. Filter the list by status to view which individual runners need to be upgraded.
+
+## Authentication token security
+
+> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/30942) in GitLab 15.3 [with a flag](../../administration/feature_flags.md) named `enforce_runner_token_expires_at`. Disabled by default.
+
+FLAG:
+On self-managed GitLab, by default this feature is not available. To make it available, ask an administrator to
+[enable the feature flag](../../administration/feature_flags.md) named `enforce_runner_token_expires_at`.
+On GitLab.com, this feature is not available.
+
+Each runner has an [authentication token](../../api/runners.md#registration-and-authentication-tokens)
+to connect with the GitLab instance.
+
+To help prevent the token from being compromised, you can have the
+token rotate automatically at specified intervals. When the tokens are rotated,
+they are updated for each runner, regardless of the runner's status (`online` or `offline`).
+
+No manual intervention should be required, and no running jobs should be affected.
+
+If you need to manually update the authentication token, you can run a
+command to [reset the token](https://docs.gitlab.com/runner/commands/#gitlab-runner-reset-token).
+
+### Automatically rotate authentication tokens
+
+You can specify an interval for authentication tokens to rotate.
+This rotation helps ensure the security of the tokens assigned to your runners.
+
+Prerequisites:
+
+- Ensure your runners are using [GitLab Runner 15.3 or later](https://docs.gitlab.com/runner/#gitlab-runner-versions).
+
+To automatically rotate runner authentication tokens:
+
+1. On the top bar, select **Menu > Admin**.
+1. On the left sidebar, select **Settings > CI/CD**.
+1. Expand **Continuous Integration and Deployment**
+1. Set a **Runners expiration** time for runners, leave empty for no expiration.
+1. Select **Save**.
+
+Before the interval expires, runners automatically request a new authentication token.
-- 
GitLab


From 51e5617989c7d81fb12e1f334b0becd3cf1f65b7 Mon Sep 17 00:00:00 2001
From: Kyle Edwards <kyle.edwards@kitware.com>
Date: Wed, 7 Sep 2022 15:41:27 -0400
Subject: [PATCH 2/6] Frontend: Allow label slot in runner_detail

---
 .../javascripts/runner/components/runner_detail.vue      | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/runner/components/runner_detail.vue b/app/assets/javascripts/runner/components/runner_detail.vue
index 584f77b7648534..c260670b517610 100644
--- a/app/assets/javascripts/runner/components/runner_detail.vue
+++ b/app/assets/javascripts/runner/components/runner_detail.vue
@@ -21,7 +21,8 @@ export default {
   props: {
     label: {
       type: String,
-      required: true,
+      default: null,
+      required: false,
     },
     value: {
       type: String,
@@ -39,7 +40,11 @@ export default {
 
 <template>
   <div class="gl-display-contents">
-    <dt class="gl-mb-5 gl-mr-6 gl-max-w-26">{{ label }}</dt>
+    <dt class="gl-mb-5 gl-mr-6 gl-max-w-26">
+      <template v-if="label || $scopedSlots.label">
+        <slot name="label">{{ label }}</slot>
+      </template>
+    </dt>
     <dd class="gl-mb-5">
       <template v-if="value || $scopedSlots.value">
         <slot name="value">{{ value }}</slot>
-- 
GitLab


From 70311e99bb247ca36cecb38d9ab8bb9ae35d6464 Mon Sep 17 00:00:00 2001
From: Kyle Edwards <kyle.edwards@kitware.com>
Date: Thu, 8 Sep 2022 12:44:23 -0400
Subject: [PATCH 3/6] spec: Allow dt element in findDd() to not exist

---
 spec/frontend/__helpers__/dl_locator_helper.js | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/spec/frontend/__helpers__/dl_locator_helper.js b/spec/frontend/__helpers__/dl_locator_helper.js
index b507dcd599d5dc..591c034be9b168 100644
--- a/spec/frontend/__helpers__/dl_locator_helper.js
+++ b/spec/frontend/__helpers__/dl_locator_helper.js
@@ -19,10 +19,13 @@ import { createWrapper, ErrorWrapper } from '@vue/test-utils';
  * @returns Wrapper
  */
 export const findDd = (dtLabel, wrapper) => {
-  const dt = wrapper.findByText(dtLabel).element;
-  const dd = dt.nextElementSibling;
-  if (dt.tagName === 'DT' && dd.tagName === 'DD') {
-    return createWrapper(dd, {});
+  const dtw = wrapper.findByText(dtLabel);
+  if (dtw.exists()) {
+    const dt = dtw.element;
+    const dd = dt.nextElementSibling;
+    if (dt.tagName === 'DT' && dd.tagName === 'DD') {
+      return createWrapper(dd, {});
+    }
   }
-  return ErrorWrapper(dtLabel);
+  return new ErrorWrapper(dtLabel);
 };
-- 
GitLab


From 62917c61c4c03ee76b21f0e2362d0c179dfa31bb Mon Sep 17 00:00:00 2001
From: Kyle Edwards <kyle.edwards@kitware.com>
Date: Thu, 18 Aug 2022 12:03:51 -0400
Subject: [PATCH 4/6] Frontend: Show token expiration in runner details

Changelog: added
Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/30942
Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/342527
---
 .../runner/components/runner_details.vue      | 46 ++++++++++++++++++-
 .../runner_details_shared.fragment.graphql    |  1 +
 app/controllers/admin/runners_controller.rb   |  4 ++
 app/controllers/groups/runners_controller.rb  |  4 ++
 locale/gitlab.pot                             | 12 +++++
 .../runner/components/runner_details_spec.js  | 30 +++++++++++-
 6 files changed, 95 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/runner/components/runner_details.vue b/app/assets/javascripts/runner/components/runner_details.vue
index d5222f39b8154e..79f934764c6d28 100644
--- a/app/assets/javascripts/runner/components/runner_details.vue
+++ b/app/assets/javascripts/runner/components/runner_details.vue
@@ -1,7 +1,10 @@
 <script>
-import { GlIntersperse } from '@gitlab/ui';
+import { GlIntersperse, GlLink } from '@gitlab/ui';
+import { helpPagePath } from '~/helpers/help_page_helper';
 import { s__ } from '~/locale';
+import HelpPopover from '~/vue_shared/components/help_popover.vue';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { timeIntervalInWords } from '~/lib/utils/datetime_utility';
 import { ACCESS_LEVEL_REF_PROTECTED, GROUP_TYPE, PROJECT_TYPE } from '../constants';
 import RunnerDetail from './runner_detail.vue';
@@ -12,6 +15,8 @@ import RunnerTags from './runner_tags.vue';
 export default {
   components: {
     GlIntersperse,
+    GlLink,
+    HelpPopover,
     RunnerDetail,
     RunnerMaintenanceNoteDetail: () =>
       import('ee_component/runner/components/runner_maintenance_note_detail.vue'),
@@ -24,6 +29,7 @@ export default {
     RunnerTags,
     TimeAgo,
   },
+  mixins: [glFeatureFlagMixin()],
   props: {
     runner: {
       type: Object,
@@ -60,6 +66,16 @@ export default {
     isProjectRunner() {
       return this.runner?.runnerType === PROJECT_TYPE;
     },
+    tokenExpirationHelpPopoverOptions() {
+      return {
+        title: s__('Runners|Runner authentication token expiration'),
+      };
+    },
+    tokenExpirationHelpUrl() {
+      return helpPagePath('ci/runners/configure_runners', {
+        anchor: 'authentication-token-security',
+      });
+    },
   },
   ACCESS_LEVEL_REF_PROTECTED,
 };
@@ -101,6 +117,34 @@ export default {
           </template>
         </runner-detail>
         <runner-detail :label="s__('Runners|Maximum job timeout')" :value="maximumTimeout" />
+        <runner-detail
+          v-if="glFeatures.enforceRunnerTokenExpiresAt"
+          :empty-value="s__('Runners|Never expires')"
+        >
+          <template #label>
+            {{ s__('Runners|Token expiry') }}
+            <help-popover :options="tokenExpirationHelpPopoverOptions">
+              <p>
+                {{
+                  s__(
+                    'Runners|Runner authentication tokens will expire based on a set interval. They will automatically rotate once expired.',
+                  )
+                }}
+              </p>
+              <p class="gl-mb-0">
+                <gl-link
+                  :href="tokenExpirationHelpUrl"
+                  target="_blank"
+                  class="gl-reset-font-size"
+                  >{{ __('Learn more') }}</gl-link
+                >
+              </p>
+            </help-popover>
+          </template>
+          <template v-if="runner.tokenExpiresAt" #value>
+            <time-ago :time="runner.tokenExpiresAt" />
+          </template>
+        </runner-detail>
         <runner-detail :label="s__('Runners|Tags')">
           <template v-if="tagList.length" #value>
             <runner-tags class="gl-vertical-align-middle" :tag-list="tagList" size="sm" />
diff --git a/app/assets/javascripts/runner/graphql/show/runner_details_shared.fragment.graphql b/app/assets/javascripts/runner/graphql/show/runner_details_shared.fragment.graphql
index 499c0156770d46..b5689ff768783f 100644
--- a/app/assets/javascripts/runner/graphql/show/runner_details_shared.fragment.graphql
+++ b/app/assets/javascripts/runner/graphql/show/runner_details_shared.fragment.graphql
@@ -17,6 +17,7 @@ fragment RunnerDetailsShared on CiRunner {
   createdAt
   status(legacyMode: null)
   contactedAt
+  tokenExpiresAt
   version
   editAdminUrl
   userPermissions {
diff --git a/app/controllers/admin/runners_controller.rb b/app/controllers/admin/runners_controller.rb
index e04665e279beff..f646f6801394fd 100644
--- a/app/controllers/admin/runners_controller.rb
+++ b/app/controllers/admin/runners_controller.rb
@@ -9,6 +9,10 @@ class Admin::RunnersController < Admin::ApplicationController
     push_frontend_feature_flag(:runner_list_stacked_layout_admin)
   end
 
+  before_action only: [:show] do
+    push_frontend_feature_flag(:enforce_runner_token_expires_at)
+  end
+
   feature_category :runner
   urgency :low
 
diff --git a/app/controllers/groups/runners_controller.rb b/app/controllers/groups/runners_controller.rb
index 25863632849408..93fe2e0146ef46 100644
--- a/app/controllers/groups/runners_controller.rb
+++ b/app/controllers/groups/runners_controller.rb
@@ -8,6 +8,10 @@ class Groups::RunnersController < Groups::ApplicationController
     push_frontend_feature_flag(:runner_list_stacked_layout, @group)
   end
 
+  before_action only: [:show] do
+    push_frontend_feature_flag(:enforce_runner_token_expires_at)
+  end
+
   feature_category :runner
   urgency :low
 
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index bed17f1e9fbf73..628378e3fee6b4 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -33986,6 +33986,9 @@ msgstr ""
 msgid "Runners|Never contacted:"
 msgstr ""
 
+msgid "Runners|Never expires"
+msgstr ""
+
 msgid "Runners|New group runners view"
 msgstr ""
 
@@ -34081,6 +34084,12 @@ msgstr ""
 msgid "Runners|Runner assigned to project."
 msgstr ""
 
+msgid "Runners|Runner authentication token expiration"
+msgstr ""
+
+msgid "Runners|Runner authentication tokens will expire based on a set interval. They will automatically rotate once expired."
+msgstr ""
+
 msgid "Runners|Runner cannot be deleted, please contact your administrator"
 msgstr ""
 
@@ -34212,6 +34221,9 @@ msgstr ""
 msgid "Runners|To register them, go to the %{link_start}group's Runners page%{link_end}."
 msgstr ""
 
+msgid "Runners|Token expiry"
+msgstr ""
+
 msgid "Runners|Up to date"
 msgstr ""
 
diff --git a/spec/frontend/runner/components/runner_details_spec.js b/spec/frontend/runner/components/runner_details_spec.js
index 552ee29b6f9b9a..f2281223a253a0 100644
--- a/spec/frontend/runner/components/runner_details_spec.js
+++ b/spec/frontend/runner/components/runner_details_spec.js
@@ -25,7 +25,12 @@ describe('RunnerDetails', () => {
 
   const findDetailGroups = () => wrapper.findComponent(RunnerGroups);
 
-  const createComponent = ({ props = {}, stubs, mountFn = shallowMountExtended } = {}) => {
+  const createComponent = ({
+    props = {},
+    stubs,
+    mountFn = shallowMountExtended,
+    enforceRunnerTokenExpiresAt = false,
+  } = {}) => {
     wrapper = mountFn(RunnerDetails, {
       propsData: {
         ...props,
@@ -34,6 +39,9 @@ describe('RunnerDetails', () => {
         RunnerDetail,
         ...stubs,
       },
+      provide: {
+        glFeatures: { enforceRunnerTokenExpiresAt },
+      },
     });
   };
 
@@ -63,6 +71,8 @@ describe('RunnerDetails', () => {
       ${'Maximum job timeout'} | ${{ maximumTimeout: 0 }}                                           | ${'0 seconds'}
       ${'Maximum job timeout'} | ${{ maximumTimeout: 59 }}                                          | ${'59 seconds'}
       ${'Maximum job timeout'} | ${{ maximumTimeout: 10 * 60 + 5 }}                                 | ${'10 minutes 5 seconds'}
+      ${'Token expiry'}        | ${{ tokenExpiresAt: mockOneHourAgo }}                              | ${'1 hour ago'}
+      ${'Token expiry'}        | ${{ tokenExpiresAt: null }}                                        | ${'Never expires'}
     `('"$field" field', ({ field, runner, expectedValue }) => {
       beforeEach(() => {
         createComponent({
@@ -72,6 +82,7 @@ describe('RunnerDetails', () => {
               ...runner,
             },
           },
+          enforceRunnerTokenExpiresAt: true,
           stubs: {
             GlIntersperse,
             GlSprintf,
@@ -124,5 +135,22 @@ describe('RunnerDetails', () => {
         expect(findDetailGroups().props('runner')).toEqual(mockGroupRunner);
       });
     });
+
+    describe('Token expiration field', () => {
+      it.each`
+        case                                            | flag     | shown
+        ${'is shown when feature flag is enabled'}      | ${true}  | ${true}
+        ${'is not shown when feature flag is disabled'} | ${false} | ${false}
+      `('$case', ({ flag, shown }) => {
+        createComponent({
+          props: {
+            runner: mockGroupRunner,
+          },
+          enforceRunnerTokenExpiresAt: flag,
+        });
+
+        expect(findDd('Token expiry', wrapper).exists()).toBe(shown);
+      });
+    });
   });
 });
-- 
GitLab


From dbf1aab3afd3ee2eb3d4e6f3b5cf9e213ef9f131 Mon Sep 17 00:00:00 2001
From: Kyle Edwards <kyle.edwards@kitware.com>
Date: Tue, 6 Sep 2022 16:55:15 -0400
Subject: [PATCH 5/6] Frontend: Add parseInterval() utility function for
 runners

---
 app/assets/javascripts/runner/utils.js | 11 +++++++++++
 spec/frontend/runner/utils_spec.js     | 13 ++++++++++++-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/runner/utils.js b/app/assets/javascripts/runner/utils.js
index cb2917a92fdf76..1ca0a9e86b5cbb 100644
--- a/app/assets/javascripts/runner/utils.js
+++ b/app/assets/javascripts/runner/utils.js
@@ -70,3 +70,14 @@ export const getPaginationVariables = (pagination, pageSize = 10) => {
   // Get the first N items
   return { first: pageSize };
 };
+
+/**
+ * Turns a server-provided interval integer represented as a string into an
+ * integer that the frontend can use.
+ *
+ * @param {String} interval - String to convert
+ * @returns Parsed integer
+ */
+export const parseInterval = (interval) => {
+  return typeof interval === 'string' ? parseInt(interval, 10) : null;
+};
diff --git a/spec/frontend/runner/utils_spec.js b/spec/frontend/runner/utils_spec.js
index 1db9815dfd87a9..33de1345f8577f 100644
--- a/spec/frontend/runner/utils_spec.js
+++ b/spec/frontend/runner/utils_spec.js
@@ -1,4 +1,4 @@
-import { formatJobCount, tableField, getPaginationVariables } from '~/runner/utils';
+import { formatJobCount, tableField, getPaginationVariables, parseInterval } from '~/runner/utils';
 
 describe('~/runner/utils', () => {
   describe('formatJobCount', () => {
@@ -66,4 +66,15 @@ describe('~/runner/utils', () => {
       expect(getPaginationVariables(pagination, pageSize)).toEqual(variables);
     });
   });
+
+  describe('parseInterval', () => {
+    it.each`
+      case                            | argument     | returnValue
+      ${'parses integer'}             | ${'86400'}   | ${86400}
+      ${'returns null for undefined'} | ${undefined} | ${null}
+      ${'returns null for null'}      | ${null}      | ${null}
+    `('$case', ({ argument, returnValue }) => {
+      expect(parseInterval(argument)).toStrictEqual(returnValue);
+    });
+  });
 });
-- 
GitLab


From 0835d2902a65cf5fa3e03633c3e62a8eeeb3fe77 Mon Sep 17 00:00:00 2001
From: Kyle Edwards <kyle.edwards@kitware.com>
Date: Mon, 5 Sep 2022 14:33:11 -0400
Subject: [PATCH 6/6] Frontend: Add ability to manage token expirations for
 admins

Adminstrators can now set a runner token expiration for shared runners,
group runners, and project runners.

Changelog: added
Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/30942
Fixes: https://gitlab.com/gitlab-org/gitlab/-/issues/342527
---
 .../expiration_interval_description.vue       |  52 ++++++++
 .../components/expiration_intervals.vue       | 123 ++++++++++++++++++
 .../runner_token_expiration/index.js          |  32 +++++
 .../admin/application_settings/ci_cd/index.js |   3 +
 app/helpers/application_settings_helper.rb    |   8 ++
 .../application_settings/_ci_cd.html.haml     |   2 +
 .../admin/application_settings/ci_cd/index.js |   1 +
 locale/gitlab.pot                             |  21 +++
 8 files changed, 242 insertions(+)
 create mode 100644 app/assets/javascripts/admin/application_settings/runner_token_expiration/components/expiration_interval_description.vue
 create mode 100644 app/assets/javascripts/admin/application_settings/runner_token_expiration/components/expiration_intervals.vue
 create mode 100644 app/assets/javascripts/admin/application_settings/runner_token_expiration/index.js
 create mode 100644 app/assets/javascripts/pages/admin/application_settings/ci_cd/index.js

diff --git a/app/assets/javascripts/admin/application_settings/runner_token_expiration/components/expiration_interval_description.vue b/app/assets/javascripts/admin/application_settings/runner_token_expiration/components/expiration_interval_description.vue
new file mode 100644
index 00000000000000..2f74b44625f60c
--- /dev/null
+++ b/app/assets/javascripts/admin/application_settings/runner_token_expiration/components/expiration_interval_description.vue
@@ -0,0 +1,52 @@
+<script>
+import { GlLink, GlSprintf } from '@gitlab/ui';
+import { helpPagePath } from '~/helpers/help_page_helper';
+import { s__ } from '~/locale';
+
+export default {
+  components: {
+    GlLink,
+    GlSprintf,
+  },
+  props: {
+    message: {
+      type: String,
+      required: true,
+    },
+  },
+  i18n: {
+    fieldHelpText: s__(
+      'AdminSettings|If no unit is written, it defaults to seconds. For example, these are all equivalent: %{oneDayInSeconds}, %{oneDayInHoursHumanReadable}, or %{oneDayHumanReadable}. Minimum value is two hours. %{linkStart}Learn more.%{linkEnd}',
+    ),
+  },
+  computed: {
+    helpUrl() {
+      return helpPagePath('ci/runners/configure_runners', {
+        anchor: 'authentication-token-security',
+      });
+    },
+  },
+};
+</script>
+<template>
+  <p>
+    {{ message }}
+    <gl-sprintf :message="$options.i18n.fieldHelpText">
+      <template #oneDayInSeconds>
+        <!-- eslint-disable-next-line @gitlab/vue-require-i18n-strings -->
+        <code>86400</code>
+      </template>
+      <template #oneDayInHoursHumanReadable>
+        <!-- eslint-disable-next-line @gitlab/vue-require-i18n-strings -->
+        <code>24 hours</code>
+      </template>
+      <template #oneDayHumanReadable>
+        <!-- eslint-disable-next-line @gitlab/vue-require-i18n-strings -->
+        <code>1 day</code>
+      </template>
+      <template #link>
+        <gl-link :href="helpUrl" target="_blank">{{ __('Learn more.') }}</gl-link>
+      </template>
+    </gl-sprintf>
+  </p>
+</template>
diff --git a/app/assets/javascripts/admin/application_settings/runner_token_expiration/components/expiration_intervals.vue b/app/assets/javascripts/admin/application_settings/runner_token_expiration/components/expiration_intervals.vue
new file mode 100644
index 00000000000000..371a26d266405c
--- /dev/null
+++ b/app/assets/javascripts/admin/application_settings/runner_token_expiration/components/expiration_intervals.vue
@@ -0,0 +1,123 @@
+<script>
+import { GlFormGroup } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import ChronicDurationInput from '~/vue_shared/components/chronic_duration_input.vue';
+import ExpirationIntervalDescription from './expiration_interval_description.vue';
+
+export default {
+  components: {
+    ChronicDurationInput,
+    ExpirationIntervalDescription,
+    GlFormGroup,
+  },
+  props: {
+    instanceRunnerExpirationInterval: {
+      type: Number,
+      required: false,
+      default: null,
+    },
+    groupRunnerExpirationInterval: {
+      type: Number,
+      required: false,
+      default: null,
+    },
+    projectRunnerExpirationInterval: {
+      type: Number,
+      required: false,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      perInput: {
+        instance: {
+          value: this.instanceRunnerExpirationInterval,
+          valid: null,
+          feedback: '',
+        },
+        group: {
+          value: this.groupRunnerExpirationInterval,
+          valid: null,
+          feedback: '',
+        },
+        project: {
+          value: this.projectRunnerExpirationInterval,
+          valid: null,
+          feedback: '',
+        },
+      },
+    };
+  },
+  methods: {
+    updateValidity(obj, event) {
+      /* eslint-disable no-param-reassign */
+      obj.valid = event.valid;
+      obj.feedback = event.feedback;
+      /* eslint-enable no-param-reassign */
+    },
+  },
+  i18n: {
+    instanceRunnerTitle: s__('AdminSettings|Instance runners expiration'),
+    instanceRunnerDescription: s__(
+      'AdminSettings|Set the expiration time of authentication tokens of newly registered instance runners. Authentication tokens are automatically reset at these intervals.',
+    ),
+    groupRunnerTitle: s__('AdminSettings|Group runners expiration'),
+    groupRunnerDescription: s__(
+      'AdminSettings|Set the expiration time of authentication tokens of newly registered group runners.',
+    ),
+    projectRunnerTitle: s__('AdminSettings|Project runners expiration'),
+    projectRunnerDescription: s__(
+      'AdminSettings|Set the expiration time of authentication tokens of newly registered project runners.',
+    ),
+  },
+};
+</script>
+<template>
+  <div>
+    <gl-form-group
+      :label="$options.i18n.instanceRunnerTitle"
+      :invalid-feedback="perInput.instance.feedback"
+      :state="perInput.instance.valid"
+    >
+      <template #description>
+        <expiration-interval-description :message="$options.i18n.instanceRunnerDescription" />
+      </template>
+      <chronic-duration-input
+        v-model="perInput.instance.value"
+        name="application_setting[runner_token_expiration_interval]"
+        :state="perInput.instance.valid"
+        @valid="updateValidity(perInput.instance, $event)"
+      />
+    </gl-form-group>
+    <gl-form-group
+      :label="$options.i18n.groupRunnerTitle"
+      :invalid-feedback="perInput.group.feedback"
+      :state="perInput.group.valid"
+    >
+      <template #description>
+        <expiration-interval-description :message="$options.i18n.groupRunnerDescription" />
+      </template>
+      <chronic-duration-input
+        v-model="perInput.group.value"
+        name="application_setting[group_runner_token_expiration_interval]"
+        :state="perInput.group.valid"
+        @valid="updateValidity(perInput.group, $event)"
+      />
+    </gl-form-group>
+    <gl-form-group
+      :label="$options.i18n.projectRunnerTitle"
+      :invalid-feedback="perInput.project.feedback"
+      :state="perInput.project.valid"
+    >
+      <template #description>
+        <expiration-interval-description :message="$options.i18n.projectRunnerDescription" />
+      </template>
+      <chronic-duration-input
+        v-model="perInput.project.value"
+        name="application_setting[project_runner_token_expiration_interval]"
+        :state="perInput.project.valid"
+        @valid="updateValidity(perInput.project, $event)"
+      />
+    </gl-form-group>
+  </div>
+</template>
diff --git a/app/assets/javascripts/admin/application_settings/runner_token_expiration/index.js b/app/assets/javascripts/admin/application_settings/runner_token_expiration/index.js
new file mode 100644
index 00000000000000..79d7ff0451aaee
--- /dev/null
+++ b/app/assets/javascripts/admin/application_settings/runner_token_expiration/index.js
@@ -0,0 +1,32 @@
+import Vue from 'vue';
+import { parseInterval } from '~/runner/utils';
+import ExpirationIntervals from './components/expiration_intervals.vue';
+
+const initRunnerTokenExpirationIntervals = (selector = '#js-runner-token-expiration-intervals') => {
+  const el = document.querySelector(selector);
+
+  if (!el) {
+    return null;
+  }
+
+  const {
+    instanceRunnerTokenExpirationInterval,
+    groupRunnerTokenExpirationInterval,
+    projectRunnerTokenExpirationInterval,
+  } = el.dataset;
+
+  return new Vue({
+    el,
+    render(h) {
+      return h(ExpirationIntervals, {
+        props: {
+          instanceRunnerExpirationInterval: parseInterval(instanceRunnerTokenExpirationInterval),
+          groupRunnerExpirationInterval: parseInterval(groupRunnerTokenExpirationInterval),
+          projectRunnerExpirationInterval: parseInterval(projectRunnerTokenExpirationInterval),
+        },
+      });
+    },
+  });
+};
+
+export default initRunnerTokenExpirationIntervals;
diff --git a/app/assets/javascripts/pages/admin/application_settings/ci_cd/index.js b/app/assets/javascripts/pages/admin/application_settings/ci_cd/index.js
new file mode 100644
index 00000000000000..9b6fba9876e79d
--- /dev/null
+++ b/app/assets/javascripts/pages/admin/application_settings/ci_cd/index.js
@@ -0,0 +1,3 @@
+import initRunnerTokenExpirationIntervals from '~/admin/application_settings/runner_token_expiration/index';
+
+initRunnerTokenExpirationIntervals();
diff --git a/app/helpers/application_settings_helper.rb b/app/helpers/application_settings_helper.rb
index a9d07adb5fb395..f1893355ecadcb 100644
--- a/app/helpers/application_settings_helper.rb
+++ b/app/helpers/application_settings_helper.rb
@@ -444,6 +444,14 @@ def visible_attributes
     end
   end
 
+  def runner_token_expiration_interval_attributes
+    {
+      instance_runner_token_expiration_interval: @application_setting.runner_token_expiration_interval,
+      group_runner_token_expiration_interval: @application_setting.group_runner_token_expiration_interval,
+      project_runner_token_expiration_interval: @application_setting.project_runner_token_expiration_interval
+    }
+  end
+
   def external_authorization_service_attributes
     [
       :external_auth_client_cert,
diff --git a/app/views/admin/application_settings/_ci_cd.html.haml b/app/views/admin/application_settings/_ci_cd.html.haml
index 9c18f963dd70b6..05aea2b343d9ed 100644
--- a/app/views/admin/application_settings/_ci_cd.html.haml
+++ b/app/views/admin/application_settings/_ci_cd.html.haml
@@ -53,6 +53,8 @@
           = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/settings', anchor: 'specify-a-custom-cicd-configuration-file'), target: '_blank', rel: 'noopener noreferrer'
       .form-group
         = f.gitlab_ui_checkbox_component :suggest_pipeline_enabled, s_('AdminSettings|Enable pipeline suggestion banner'), help_text: s_('AdminSettings|Display a banner on merge requests in projects with no pipelines to initiate steps to add a .gitlab-ci.yml file.')
+      - if Feature.enabled?(:enforce_runner_token_expires_at)
+        #js-runner-token-expiration-intervals{ data: runner_token_expiration_interval_attributes }
 
     = f.submit _('Save changes'), pajamas_button: true
 
diff --git a/ee/app/assets/javascripts/pages/admin/application_settings/ci_cd/index.js b/ee/app/assets/javascripts/pages/admin/application_settings/ci_cd/index.js
index 8bd85aa97f0d36..562a7aefbf5303 100644
--- a/ee/app/assets/javascripts/pages/admin/application_settings/ci_cd/index.js
+++ b/ee/app/assets/javascripts/pages/admin/application_settings/ci_cd/index.js
@@ -1,3 +1,4 @@
+import '~/pages/admin/application_settings/ci_cd/index';
 import Vue from 'vue';
 import CiTemplateDropdown from './ci_template_dropdown.vue';
 
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 628378e3fee6b4..861480ddd8fdfc 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -2754,9 +2754,15 @@ msgstr ""
 msgid "AdminSettings|Git abuse rate limit"
 msgstr ""
 
+msgid "AdminSettings|Group runners expiration"
+msgstr ""
+
 msgid "AdminSettings|I have read and agree to the Let's Encrypt %{link_start}Terms of Service%{link_end} (PDF)."
 msgstr ""
 
+msgid "AdminSettings|If no unit is written, it defaults to seconds. For example, these are all equivalent: %{oneDayInSeconds}, %{oneDayInHoursHumanReadable}, or %{oneDayHumanReadable}. Minimum value is two hours. %{linkStart}Learn more.%{linkEnd}"
+msgstr ""
+
 msgid "AdminSettings|If not specified at the group or instance level, the default is %{default_initial_branch_name}. Does not affect existing repositories."
 msgstr ""
 
@@ -2769,6 +2775,9 @@ msgstr ""
 msgid "AdminSettings|Inactive project deletion"
 msgstr ""
 
+msgid "AdminSettings|Instance runners expiration"
+msgstr ""
+
 msgid "AdminSettings|Keep the latest artifacts for all jobs in the latest successful pipelines"
 msgstr ""
 
@@ -2826,6 +2835,9 @@ msgstr ""
 msgid "AdminSettings|Project export"
 msgstr ""
 
+msgid "AdminSettings|Project runners expiration"
+msgstr ""
+
 msgid "AdminSettings|Protect CI/CD variables by default"
 msgstr ""
 
@@ -2877,6 +2889,15 @@ msgstr ""
 msgid "AdminSettings|Set limit to 0 to disable it."
 msgstr ""
 
+msgid "AdminSettings|Set the expiration time of authentication tokens of newly registered group runners."
+msgstr ""
+
+msgid "AdminSettings|Set the expiration time of authentication tokens of newly registered instance runners. Authentication tokens are automatically reset at these intervals."
+msgstr ""
+
+msgid "AdminSettings|Set the expiration time of authentication tokens of newly registered project runners."
+msgstr ""
+
 msgid "AdminSettings|Set the initial name and protections for the default branch of new repositories created in the instance."
 msgstr ""
 
-- 
GitLab