@1001-digital/components 1.1.10 → 1.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1001-digital/components",
-  "version": "1.1.10",
+  "version": "1.2.1",
   "type": "module",
   "sideEffects": [
     "*.css"

package/src/evm/components/EvmConnect.vue

@@ -1,131 +1,102 @@
 <template>
-  <Button
-    v-if="showConnect"
-    @click="chooseModalOpen = true"
-    :class="className"
-  >
-    <slot>Connect Wallet</slot>
-  </Button>
-  <slot
+  <EvmInAppWalletSetup
+    v-if="showInAppSetup"
+    @connected="onInAppConnected"
+    @back="showInAppSetup = false"
+  />
+  <template v-else-if="errorMessage">
+    <Alert type="error">
+      {{ errorMessage }}
+    </Alert>
+    <Button
+      class="link muted small"
+      @click="resetConnection"
+    >
+      <Icon type="chevron-left" />
+      <span>Back</span>
+    </Button>
+  </template>
+  <EvmMetaMaskQR
+    v-else-if="metaMaskUri"
+    :uri="metaMaskUri"
+    @back="resetConnection"
+  />
+  <EvmWalletConnectWallets
+    v-else-if="walletConnectUri"
+    :uri="walletConnectUri"
+    @back="resetConnection"
+  />
+  <template v-else-if="isConnecting">
+    <Loading
+      :txt="`Waiting for ${connectingWallet} confirmation...`"
+      spinner
+      stacked
+    />
+  </template>
+  <div
     v-else
-    name="connected"
-    :address="address"
+    class="wallet-options"
   >
-    <EvmAccount :address="address" />
-  </slot>
-
-  <Dialog
-    v-if="showConnect"
-    title="Connect Wallet"
-    v-model:open="chooseModalOpen"
-    @closed="onModalClosed"
-  >
-    <EvmInAppWalletSetup
-      v-if="showInAppSetup"
-      @connected="onInAppConnected"
-      @back="showInAppSetup = false"
-    />
-    <template v-else-if="errorMessage">
-      <Alert type="error">
-        {{ errorMessage }}
-      </Alert>
-      <Button
-        class="link muted small"
-        @click="resetConnection"
+    <Button
+      v-for="connector in shownConnectors"
+      :key="connector.uid"
+      @click="() => login(connector)"
+      class="block choose-connector"
+    >
+      <img
+        v-if="ICONS[connector.name] || connector.icon"
+        :src="ICONS[connector.name] || connector.icon"
+        :alt="connector.name"
+      />
+      <div
+        v-else
+        class="default-wallet-icon"
       >
-        <Icon type="chevron-left" />
-        <span>Back</span>
-      </Button>
-    </template>
-    <EvmMetaMaskQR
-      v-else-if="metaMaskUri"
-      :uri="metaMaskUri"
-      @back="resetConnection"
-    />
-    <EvmWalletConnectWallets
-      v-else-if="walletConnectUri"
-      :uri="walletConnectUri"
-      @back="resetConnection"
-    />
-    <template v-else-if="isConnecting">
-      <Loading
-        :txt="`Waiting for ${connectingWallet} confirmation...`"
-        spinner
-        stacked
+        <Icon type="wallet" />
+      </div>
+      <span>{{ connector.name }}</span>
+    </Button>
+    <Button
+      v-if="wcConnector"
+      @click="loginWithSafe"
+      class="block choose-connector"
+    >
+      <img
+        :src="safeIcon"
+        alt="Safe"
       />
-    </template>
-    <div
-      v-else
-      class="wallet-options"
+      <span>Safe</span>
+    </Button>
+    <Button
+      v-if="inAppConnector"
+      @click="showInAppSetup = true"
+      class="block choose-connector"
     >
-      <Button
-        v-for="connector in shownConnectors"
-        :key="connector.uid"
-        @click="() => login(connector)"
-        class="block choose-connector"
-      >
-        <img
-          v-if="ICONS[connector.name] || connector.icon"
-          :src="ICONS[connector.name] || connector.icon"
-          :alt="connector.name"
-        />
-        <div
-          v-else
-          class="default-wallet-icon"
-        >
-          <Icon type="wallet" />
-        </div>
-        <span>{{ connector.name }}</span>
-      </Button>
-      <Button
-        v-if="wcConnector"
-        @click="loginWithSafe"
-        class="block choose-connector"
-      >
-        <img
-          :src="safeIcon"
-          alt="Safe"
-        />
-        <span>Safe</span>
-      </Button>
-      <Button
-        v-if="inAppConnector"
-        @click="showInAppSetup = true"
-        class="block choose-connector"
-      >
-        <img
-          :src="inAppIcon"
-          alt="Seed Phrase"
-        />
-        <span>In App</span>
-      </Button>
-      <Button
-        to="https://ethereum.org/wallets/"
-        target="_blank"
-        class="link muted small"
-      >
-        <Icon type="help" />
-        <span>New to wallets?</span>
-      </Button>
-    </div>
-  </Dialog>
+      <img
+        :src="inAppIcon"
+        alt="Seed Phrase"
+      />
+      <span>In App</span>
+    </Button>
+    <Button
+      to="https://ethereum.org/wallets/"
+      target="_blank"
+      class="link muted small"
+    >
+      <Icon type="help" />
+      <span>New to wallets?</span>
+    </Button>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, onMounted } from 'vue'
+import { ref, computed } from 'vue'
 import type { Connector } from '@wagmi/vue'
-import {
-  useConnection,
-  useConnect,
-  useConnectors,
-  useChainId,
-} from '@wagmi/vue'
+import { useConnect, useConnectors, useChainId } from '@wagmi/vue'
 import Button from '../../base/components/Button.vue'
-import Dialog from '../../base/components/Dialog.vue'
 import Icon from '../../base/components/Icon.vue'
 import Alert from '../../base/components/Alert.vue'
 import Loading from '../../base/components/Loading.vue'
-import EvmAccount from './EvmAccount.vue'
 import EvmMetaMaskQR from './EvmMetaMaskQR.vue'
 import EvmWalletConnectWallets from './EvmWalletConnectWallets.vue'
 import EvmInAppWalletSetup from './EvmInAppWalletSetup.vue'
@@ -155,24 +126,19 @@ const PRIORITY: Record<string, number> = {
   'Base Account': 10,
 }
 
-defineProps<{
-  className?: string
-}>()
 const emit = defineEmits<{
-  connected: [{ address: `0x${string}` | undefined }]
-  disconnected: []
+  connected: []
 }>()
+
 const chainId = useChainId()
 const connectors = useConnectors()
 const { mutateAsync: connectAsync } = useConnect()
-const { address, isConnected } = useConnection()
 
 const inAppConnector = computed(() =>
   connectors.value.find((c) => c.type === 'inAppWallet'),
 )
 const showInAppSetup = ref(false)
 
-const showConnect = computed(() => !isConnected.value)
 const shownConnectors = computed(() => {
   const unique = Array.from(
     new Map(
@@ -199,7 +165,6 @@ const wcConnector = computed(() =>
   connectors.value.find((c) => c.id === 'walletConnect'),
 )
 
-const chooseModalOpen = ref(false)
 const errorMessage = ref('')
 const isConnecting = ref(false)
 const connectingWallet = ref('')
@@ -249,31 +214,24 @@ const login = async (connector: Connector) => {
   try {
     await connectAsync({ connector, chainId: chainId.value })
 
-    setTimeout(() => {
-      chooseModalOpen.value = false
-      isConnecting.value = false
-      metaMaskUri.value = ''
-      walletConnectUri.value = ''
-      safeDeepLink.value = false
-    }, 100)
+    emit('connected')
+
+    resetConnection()
   } catch (error: unknown) {
     isConnecting.value = false
     metaMaskUri.value = ''
     walletConnectUri.value = ''
     safeDeepLink.value = false
 
-    // Only show errors if our dialog is still open
-    if (chooseModalOpen.value) {
-      const errorMsg = error instanceof Error ? error.message : ''
-      if (
-        errorMsg.includes('User rejected') ||
-        errorMsg.includes('rejected') ||
-        errorMsg.includes('denied')
-      ) {
-        errorMessage.value = 'Connection cancelled. Please try again.'
-      } else {
-        errorMessage.value = 'Failed to connect. Please try again.'
-      }
+    const errorMsg = error instanceof Error ? error.message : ''
+    if (
+      errorMsg.includes('User rejected') ||
+      errorMsg.includes('rejected') ||
+      errorMsg.includes('denied')
+    ) {
+      errorMessage.value = 'Connection cancelled. Please try again.'
+    } else {
+      errorMessage.value = 'Failed to connect. Please try again.'
     }
     console.error('Wallet connection error:', error)
   } finally {
@@ -295,25 +253,16 @@ const resetConnection = () => {
 }
 
 const onInAppConnected = () => {
-  chooseModalOpen.value = false
   showInAppSetup.value = false
+  emit('connected')
 }
 
-const onModalClosed = () => {
-  chooseModalOpen.value = false
+const reset = () => {
   resetConnection()
   showInAppSetup.value = false
 }
 
-const check = () =>
-  isConnected.value
-    ? emit('connected', { address: address.value })
-    : emit('disconnected')
-watch(isConnected, () => {
-  check()
-  if (!isConnected.value) onModalClosed()
-})
-onMounted(() => check())
+defineExpose({ reset })
 </script>
 
 <style scoped>

package/src/evm/components/EvmConnectDialog.vue

@@ -0,0 +1,75 @@
+<template>
+  <Button
+    v-if="showConnect"
+    @click="open = true"
+    :class="className"
+  >
+    <slot>Connect Wallet</slot>
+  </Button>
+  <slot
+    v-else-if="isConnected"
+    name="connected"
+    :address="address"
+  >
+    <EvmAccount :address="address" />
+  </slot>
+
+  <Dialog
+    v-if="showConnect"
+    title="Connect Wallet"
+    v-model:open="open"
+    @closed="onClosed"
+  >
+    <EvmConnect
+      ref="connectRef"
+      @connected="onConnected"
+    />
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted } from 'vue'
+import { useConnection } from '@wagmi/vue'
+import Button from '../../base/components/Button.vue'
+import Dialog from '../../base/components/Dialog.vue'
+import EvmAccount from './EvmAccount.vue'
+import EvmConnect from './EvmConnect.vue'
+
+defineProps<{
+  className?: string
+}>()
+
+const emit = defineEmits<{
+  connected: [{ address: `0x${string}` | undefined }]
+  disconnected: []
+}>()
+
+const { address, isConnected } = useConnection()
+
+const showConnect = computed(() => !isConnected.value)
+const open = ref(false)
+const connectRef = ref<InstanceType<typeof EvmConnect> | null>(null)
+
+const onConnected = () => {
+  open.value = false
+}
+
+const onClosed = () => {
+  connectRef.value?.reset()
+}
+
+const check = () =>
+  isConnected.value
+    ? emit('connected', { address: address.value })
+    : emit('disconnected')
+
+watch(isConnected, () => {
+  check()
+  if (!isConnected.value) {
+    open.value = false
+    connectRef.value?.reset()
+  }
+})
+
+onMounted(() => check())
+</script>

package/src/evm/components/EvmConnectionStatus.vue

@@ -0,0 +1,13 @@
+<template>
+  <slot
+    :status="status"
+    :address="address"
+    :connector="connector"
+  />
+</template>
+
+<script setup lang="ts">
+import { useConnection } from '@wagmi/vue'
+
+const { address, connector, status } = useConnection()
+</script>

package/src/evm/components/EvmSiwe.vue

@@ -0,0 +1,190 @@
+<template>
+  <Loading
+    v-if="step === 'signing'"
+    spinner
+    stacked
+    :txt="connector?.name
+      ? `Requesting signature from ${connector.name}...`
+      : 'Requesting signature...'"
+  />
+
+  <Loading
+    v-else-if="step === 'verifying'"
+    spinner
+    stacked
+    txt="Verifying signature..."
+  />
+
+  <template v-else-if="step === 'complete'">
+    <slot name="complete">
+      <Alert type="info">
+        <p>Successfully signed in.</p>
+      </Alert>
+    </slot>
+  </template>
+
+  <template v-else-if="step === 'error'">
+    <Alert type="error">
+      <p>{{ errorMessage }}</p>
+    </Alert>
+    <Button
+      class="secondary"
+      @click="signIn"
+    >Try Again</Button>
+  </template>
+
+  <template v-else>
+    <slot name="idle">
+      <p v-if="props.statement">{{ props.statement }}</p>
+    </slot>
+    <Button @click="signIn">
+      Sign In
+    </Button>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { signMessage } from '@wagmi/core'
+import { useConfig, useConnection } from '@wagmi/vue'
+import type { Config } from '@wagmi/vue'
+import Button from '../../base/components/Button.vue'
+import Alert from '../../base/components/Alert.vue'
+import Loading from '../../base/components/Loading.vue'
+import { createSiweMessage } from '../utils/siwe'
+import { useSiwe } from '../composables/siwe'
+
+type Step = 'idle' | 'signing' | 'verifying' | 'complete' | 'error'
+
+const props = defineProps<{
+  getNonce: () => Promise<string>
+  verify: (message: string, signature: string) => Promise<boolean>
+  domain?: string
+  statement?: string
+  uri?: string
+  resources?: string[]
+  requestId?: string
+  expirationTime?: string
+}>()
+
+const emit = defineEmits<{
+  authenticated: [{ address: `0x${string}`; chainId: number }]
+  error: [error: string]
+}>()
+
+function isUserRejection(e: unknown): boolean {
+  const re = /reject|denied|cancel/i
+  let current = e as Record<string, unknown> | undefined
+  while (current) {
+    if ((current as { code?: number }).code === 4001) return true
+    if (re.test((current as { details?: string }).details || '')) return true
+    if (re.test((current as { message?: string }).message || '')) return true
+    current = current.cause as Record<string, unknown> | undefined
+  }
+  return false
+}
+
+const config = useConfig()
+const { address, chainId, connector } = useConnection()
+const { setSession } = useSiwe()
+
+const step = ref<Step>('idle')
+const errorMessage = ref('')
+
+const signIn = async () => {
+  const currentAddress = address.value
+  const currentChainId = chainId.value
+
+  if (!currentAddress || !currentChainId) {
+    errorMessage.value = 'Wallet not connected.'
+    step.value = 'error'
+    emit('error', errorMessage.value)
+    return
+  }
+
+  errorMessage.value = ''
+
+  // Get nonce
+  let nonce: string
+  try {
+    nonce = await props.getNonce()
+  } catch {
+    errorMessage.value = 'Failed to get authentication nonce.'
+    step.value = 'error'
+    emit('error', errorMessage.value)
+    return
+  }
+
+  // Sign message
+  step.value = 'signing'
+  const message = createSiweMessage({
+    domain: props.domain || window.location.host,
+    address: currentAddress,
+    uri: props.uri || window.location.origin,
+    chainId: currentChainId,
+    nonce,
+    statement: props.statement,
+    expirationTime: props.expirationTime,
+    requestId: props.requestId,
+    resources: props.resources,
+  })
+
+  let signature: string
+  try {
+    signature = await signMessage(config as Config, { message })
+  } catch (e: unknown) {
+    if (isUserRejection(e)) {
+      errorMessage.value = 'Signature rejected by user.'
+    } else {
+      const err = e as { shortMessage?: string; message?: string }
+      errorMessage.value = err.shortMessage || err.message || 'Failed to sign message.'
+    }
+    step.value = 'error'
+    emit('error', errorMessage.value)
+    console.error('SIWE signing error:', e)
+    return
+  }
+
+  // Verify with backend
+  step.value = 'verifying'
+  try {
+    const verified = await props.verify(message, signature)
+
+    if (!verified) {
+      throw new Error('Signature verification failed')
+    }
+  } catch (e: unknown) {
+    const err = e as { message?: string }
+    errorMessage.value = err.message || 'Verification failed.'
+    step.value = 'error'
+    emit('error', errorMessage.value)
+    console.error('SIWE verification error:', e)
+    return
+  }
+
+  // Update shared authentication state
+  setSession({
+    address: currentAddress,
+    chainId: currentChainId,
+  })
+
+  step.value = 'complete'
+  emit('authenticated', {
+    address: currentAddress,
+    chainId: currentChainId,
+  })
+}
+
+const reset = () => {
+  step.value = 'idle'
+  errorMessage.value = ''
+}
+
+defineExpose({ reset })
+</script>
+
+<style scoped>
+.secondary {
+  margin-top: var(--spacer-sm);
+}
+</style>

package/src/evm/components/EvmSiweDialog.vue

@@ -0,0 +1,93 @@
+<template>
+  <Button
+    v-if="!isAuthenticated"
+    @click="open = true"
+    :class="className"
+  >
+    <slot>Sign In</slot>
+  </Button>
+  <slot
+    v-else
+    name="authenticated"
+    :address="session?.address"
+    :sign-out="handleSignOut"
+  >
+    <Button
+      @click="handleSignOut"
+      :class="className"
+    >Sign Out</Button>
+  </slot>
+
+  <Dialog
+    v-if="!isAuthenticated"
+    title="Sign In with Ethereum"
+    v-model:open="open"
+    @closed="onClosed"
+  >
+    <EvmSiwe
+      ref="siweRef"
+      :get-nonce="getNonce"
+      :verify="verify"
+      :domain="domain"
+      :statement="statement"
+      :uri="uri"
+      :resources="resources"
+      :request-id="requestId"
+      :expiration-time="expirationTime"
+      @authenticated="onAuthenticated"
+      @error="(e) => emit('error', e)"
+    />
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import Button from '../../base/components/Button.vue'
+import Dialog from '../../base/components/Dialog.vue'
+import EvmSiwe from './EvmSiwe.vue'
+import { useSiwe } from '../composables/siwe'
+
+const props = defineProps<{
+  className?: string
+  getNonce: () => Promise<string>
+  verify: (message: string, signature: string) => Promise<boolean>
+  domain?: string
+  statement?: string
+  uri?: string
+  resources?: string[]
+  requestId?: string
+  expirationTime?: string
+}>()
+
+const emit = defineEmits<{
+  authenticated: [{ address: `0x${string}`; chainId: number }]
+  signedOut: []
+  error: [error: string]
+}>()
+
+const { isAuthenticated, session, signOut } = useSiwe()
+
+const open = ref(false)
+const siweRef = ref<InstanceType<typeof EvmSiwe> | null>(null)
+
+const onAuthenticated = (data: { address: `0x${string}`; chainId: number }) => {
+  open.value = false
+  emit('authenticated', data)
+}
+
+const onClosed = () => {
+  siweRef.value?.reset()
+}
+
+const handleSignOut = () => {
+  signOut()
+  emit('signedOut')
+}
+
+watch(isAuthenticated, (authenticated) => {
+  if (!authenticated) {
+    open.value = false
+    siweRef.value?.reset()
+  }
+})
+</script>

package/src/evm/composables/siwe.ts

@@ -0,0 +1,89 @@
+import { ref, readonly } from 'vue'
+import { signMessage } from '@wagmi/core'
+import { useConfig, useConnection } from '@wagmi/vue'
+import type { Config } from '@wagmi/vue'
+import { createSiweMessage, type SiweMessageParams } from '../utils/siwe'
+
+export interface SiweSession {
+  address: `0x${string}`
+  chainId: number
+}
+
+export interface UseSiweOptions {
+  getNonce: () => Promise<string>
+  verify: (message: string, signature: string) => Promise<boolean>
+  domain?: string
+  uri?: string
+  statement?: string
+  expirationTime?: string
+  requestId?: string
+  resources?: string[]
+}
+
+const _isAuthenticated = ref(false)
+const _session = ref<SiweSession | null>(null)
+
+export const useSiwe = () => {
+  const config = useConfig()
+  const { address, chainId } = useConnection()
+
+  const setSession = (session: SiweSession) => {
+    _isAuthenticated.value = true
+    _session.value = session
+  }
+
+  const clearSession = () => {
+    _isAuthenticated.value = false
+    _session.value = null
+  }
+
+  const signIn = async (options: UseSiweOptions) => {
+    const currentAddress = address.value
+    const currentChainId = chainId.value
+
+    if (!currentAddress || !currentChainId) {
+      throw new Error('Wallet not connected')
+    }
+
+    const nonce = await options.getNonce()
+
+    const messageParams: SiweMessageParams = {
+      domain: options.domain || window.location.host,
+      address: currentAddress,
+      uri: options.uri || window.location.origin,
+      chainId: currentChainId,
+      nonce,
+      statement: options.statement,
+      expirationTime: options.expirationTime,
+      requestId: options.requestId,
+      resources: options.resources,
+    }
+
+    const message = createSiweMessage(messageParams)
+    const signature = await signMessage(config as Config, { message })
+
+    const verified = await options.verify(message, signature)
+
+    if (!verified) {
+      throw new Error('Signature verification failed')
+    }
+
+    setSession({
+      address: currentAddress,
+      chainId: currentChainId,
+    })
+  }
+
+  const signOut = () => {
+    clearSession()
+  }
+
+  return {
+    isAuthenticated: readonly(_isAuthenticated),
+    session: readonly(_session),
+    signIn,
+    signOut,
+    setSession,
+    clearSession,
+  }
+}

package/src/evm/index.ts

@@ -18,6 +18,8 @@ export type { EnsProfile } from './utils/ens'
 export { stringifyJSON, parseJSON, formatPrice } from './utils/price'
 export { resolveUri } from './utils/uri'
 export type { ResolveUriOptions } from './utils/uri'
+export { createSiweMessage } from './utils/siwe'
+export type { SiweMessageParams } from './utils/siwe'
 
 // Composables
 export { useBaseURL } from './composables/base'
@@ -33,6 +35,8 @@ export { useGasPrice } from './composables/gasPrice'
 export { usePriceFeed } from './composables/priceFeed'
 export { useWalletExplorer } from './composables/walletExplorer'
 export type { ExplorerWallet } from './composables/walletExplorer'
+export { useSiwe } from './composables/siwe'
+export type { SiweSession, UseSiweOptions } from './composables/siwe'
 
 // Connectors
 export { inAppWallet, prepareInAppWallet } from './connectors/inAppWallet'
@@ -41,6 +45,8 @@ export { inAppWallet, prepareInAppWallet } from './connectors/inAppWallet'
 export { default as EvmAccount } from './components/EvmAccount.vue'
 export { default as EvmAvatar } from './components/EvmAvatar.vue'
 export { default as EvmConnect } from './components/EvmConnect.vue'
+export { default as EvmConnectDialog } from './components/EvmConnectDialog.vue'
+export { default as EvmConnectionStatus } from './components/EvmConnectionStatus.vue'
 export { default as EvmProfile } from './components/EvmProfile.vue'
 export { default as EvmSwitchNetwork } from './components/EvmSwitchNetwork.vue'
 export { default as EvmConnectorQR } from './components/EvmConnectorQR.vue'
@@ -50,3 +56,5 @@ export { default as EvmWalletConnectWallets } from './components/EvmWalletConnec
 export { default as EvmTransactionFlow } from './components/EvmTransactionFlow.vue'
 export { default as EvmSeedPhraseInput } from './components/EvmSeedPhraseInput.vue'
 export { default as EvmInAppWalletSetup } from './components/EvmInAppWalletSetup.vue'
+export { default as EvmSiwe } from './components/EvmSiwe.vue'
+export { default as EvmSiweDialog } from './components/EvmSiweDialog.vue'

package/src/evm/utils/siwe.ts

@@ -0,0 +1,70 @@
+export interface SiweMessageParams {
+  domain: string
+  address: string
+  uri: string
+  version?: string
+  chainId: number
+  nonce: string
+  issuedAt?: string
+  expirationTime?: string
+  notBefore?: string
+  requestId?: string
+  statement?: string
+  resources?: string[]
+}
+
+export function createSiweMessage(params: SiweMessageParams): string {
+  const {
+    domain,
+    address,
+    uri,
+    version = '1',
+    chainId,
+    nonce,
+    issuedAt = new Date().toISOString(),
+    expirationTime,
+    notBefore,
+    requestId,
+    statement,
+    resources,
+  } = params
+
+  const lines: string[] = [
+    `${domain} wants you to sign in with your Ethereum account:`,
+    address,
+    '',
+  ]
+
+  if (statement) {
+    lines.push(statement, '')
+  }
+
+  lines.push(
+    `URI: ${uri}`,
+    `Version: ${version}`,
+    `Chain ID: ${chainId}`,
+    `Nonce: ${nonce}`,
+    `Issued At: ${issuedAt}`,
+  )
+
+  if (expirationTime) {
+    lines.push(`Expiration Time: ${expirationTime}`)
+  }
+
+  if (notBefore) {
+    lines.push(`Not Before: ${notBefore}`)
+  }
+
+  if (requestId) {
+    lines.push(`Request ID: ${requestId}`)
+  }
+
+  if (resources?.length) {
+    lines.push('Resources:')
+    for (const resource of resources) {
+      lines.push(`- ${resource}`)
+    }
+  }
+
+  return lines.join('\n')
+}