diff --git a/public/app/features/serviceaccounts/CreateTokenModal.tsx b/public/app/features/serviceaccounts/CreateTokenModal.tsx
index c0e7ac2eeb9..4cf8338a0d1 100644
--- a/public/app/features/serviceaccounts/CreateTokenModal.tsx
+++ b/public/app/features/serviceaccounts/CreateTokenModal.tsx
@@ -15,6 +15,7 @@ import {
   RadioButtonGroup,
   useStyles2,
 } from '@grafana/ui';
+import { ApiKey, OrgRole } from 'app/types';
 
 const EXPIRATION_OPTIONS = [
   { label: 'No expiration', value: false },
@@ -24,7 +25,7 @@ const EXPIRATION_OPTIONS = [
 interface CreateTokenModalProps {
   isOpen: boolean;
   token: string;
-  onCreateToken: (name: string) => void;
+  onCreateToken: (token: ApiKey) => void;
   onClose: () => void;
 }
 
@@ -87,7 +88,16 @@ export const CreateTokenModal = ({ isOpen, token, onCreateToken, onClose }: Crea
               </Field>
             )}
           </FieldSet>
-          <Button onClick={() => onCreateToken(newTokenName)} disabled={isWithExpirationDate && !isExpirationDateValid}>
+          <Button
+            onClick={() =>
+              onCreateToken({
+                name: newTokenName,
+                role: OrgRole.Viewer,
+                secondsToLive: getSecondsToLive(newTokenExpirationDate),
+              })
+            }
+            disabled={isWithExpirationDate && !isExpirationDateValid}
+          >
             Generate token
           </Button>
         </>
@@ -128,6 +138,13 @@ export const CreateTokenModal = ({ isOpen, token, onCreateToken, onClose }: Crea
   );
 };
 
+const getSecondsToLive = (date: Date | string) => {
+  const dateAsDate = new Date(date);
+  const now = new Date();
+
+  return Math.ceil((dateAsDate.getTime() - now.getTime()) / 1000);
+};
+
 const getStyles = (theme: GrafanaTheme2) => {
   return {
     modal: css`
diff --git a/public/app/features/serviceaccounts/ServiceAccountPage.tsx b/public/app/features/serviceaccounts/ServiceAccountPage.tsx
index db4a9e25666..4d685ef0050 100644
--- a/public/app/features/serviceaccounts/ServiceAccountPage.tsx
+++ b/public/app/features/serviceaccounts/ServiceAccountPage.tsx
@@ -12,7 +12,7 @@ import {
   createServiceAccountToken,
 } from './state/actions';
 import { ServiceAccountTokensTable } from './ServiceAccountTokensTable';
-import { getTimeZone, NavModel, OrgRole } from '@grafana/data';
+import { getTimeZone, NavModel } from '@grafana/data';
 import { Button, VerticalGroup } from '@grafana/ui';
 import { CreateTokenModal } from './CreateTokenModal';
 
@@ -67,15 +67,8 @@ const ServiceAccountPageUnconnected = ({
     deleteServiceAccountToken(parseInt(match.params.id, 10), key.id!);
   };
 
-  const onCreateToken = (name: string) => {
-    createServiceAccountToken(
-      serviceAccount.id,
-      {
-        name,
-        role: OrgRole.Viewer,
-      },
-      setNewToken
-    );
+  const onCreateToken = (token: ApiKey) => {
+    createServiceAccountToken(serviceAccount.id, token, setNewToken);
   };
 
   const onModalClose = () => {
diff --git a/public/app/features/serviceaccounts/state/actions.ts b/public/app/features/serviceaccounts/state/actions.ts
index a7135327a8e..a908c19aad8 100644
--- a/public/app/features/serviceaccounts/state/actions.ts
+++ b/public/app/features/serviceaccounts/state/actions.ts
@@ -1,4 +1,4 @@
-import { ServiceAccountDTO, ThunkResult } from '../../../types';
+import { ApiKey, ServiceAccountDTO, ThunkResult } from '../../../types';
 import { getBackendSrv } from '@grafana/runtime';
 import {
   acOptionsLoaded,
@@ -49,11 +49,11 @@ export function loadServiceAccount(saID: number): ThunkResult<void> {
 
 export function createServiceAccountToken(
   saID: number,
-  data: any,
+  token: ApiKey,
   onTokenCreated: (key: string) => void
 ): ThunkResult<void> {
   return async (dispatch) => {
-    const result = await getBackendSrv().post(`${BASE_URL}/${saID}/tokens`, data);
+    const result = await getBackendSrv().post(`${BASE_URL}/${saID}/tokens`, token);
     onTokenCreated(result.key);
     dispatch(loadServiceAccountTokens(saID));
   };