If you're just here for the API stuff and don't care for the Inertia/Vue side of this application, please feel free to apply the below code changes and continue onward. I'll also have the completed Inertia/Vue code available in the last lesson of this API Authentication module if you'd prefer waiting for that!

First, we need to accept our accessTokens array as a prop in our Organization Settings page. Then, we can go ahead and pass it through to our Organization Access Tokens Card.

// inertia/pages/settings/organization.vue
<script setup lang="ts">
import { Abilities } from '#actions/abilities/get_abilities'
import AccessTokenDto from '#dtos/access_token'
import OrganizationDto from '#dtos/organization'
import OrganizationInviteDto from '#dtos/organization_invite'
import RoleDto from '#dtos/role'
import UserDto from '#dtos/user'

defineProps<{
  organization: OrganizationDto
  user: UserDto
  users: UserDto[]
  roles: RoleDto[]
  invites: OrganizationInviteDto[]
++  accessTokens: AccessTokenDto[] // 👈
  can: Abilities
}>()
</script>

<template>
  <AppHead
    title="Organization Settings"
    :description="`Manage your ${organization.name} organization`"
  />

  <SettingsShell>
    <OrganizationEditCard v-if="can.organization.edit" :organization="organization" />
    <OrganizationUsersCard :user="user" :users="users" :roles="roles" :can="can" />
    <OrganizationUserInvitesCard :invites="invites" :roles="roles" :can="can" />
    <OrganizationAccessTokensCard :tokens="accessTokens" /> // 👈
  </SettingsShell>
</template>

Then, within the Organization Access Tokens Card, we need to accept tokens as a prop with a type of our AccessTokensDto[]. While in our component's script also ensure Luxon's DateTime is imported, we'll use that next in our template.

// inertia/components/OrganizationAccessTokensCard.vue
<script setup lang="ts">
++import AccessTokenDto from '#dtos/access_token'
++import { DateTime } from 'luxon'
import TokenActions from '#enums/token_actions'
import { router } from '@inertiajs/vue3'
import axios from 'axios'
import { Clipboard, ClipboardCheck, Loader } from 'lucide-vue-next'
import { ref } from 'vue'

++defineProps<{ tokens: AccessTokenDto[] }>() // 👈

let copyTimeout: NodeJS.Timeout | null = null
const isDialogShown = ref(false)
const processing = ref(false)
const isCopied = ref(false)
const token = ref<string | null>(null)
const permissionOptions = Object.values(TokenActions)
const form = ref({
  name: '',
  permissions: new Set(['read']),
})

// ...
</script>