---
title: "useSandboxInbox"
description: "useSandboxInbox, auto-imported in the app: its options, return value and types."
canonical_url: "https://nuxt-backend.dev/docs/reference/api/use-sandbox-inbox"
---
# useSandboxInbox

## Interfaces

### SandboxMessage

Defined in: [src/runtime/vue/composables/use-sandbox-inbox.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-sandbox-inbox.ts)

A message in a sandbox inbox (mirrors the component `inbox` query).

#### Properties

<table>
<thead>
  <tr>
    <th>
      Property
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Description
    </th>
    
    <th>
      Defined in
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a id="from">
        
      </a>
      
       <code>
        from
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-sandbox-inbox.ts" rel="nofollow">
        src/runtime/vue/composables/use-sandbox-inbox.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="subject">
        
      </a>
      
       <code>
        subject
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-sandbox-inbox.ts" rel="nofollow">
        src/runtime/vue/composables/use-sandbox-inbox.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="text">
        
      </a>
      
       <code>
        text?
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-sandbox-inbox.ts" rel="nofollow">
        src/runtime/vue/composables/use-sandbox-inbox.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="html">
        
      </a>
      
       <code>
        html?
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-sandbox-inbox.ts" rel="nofollow">
        src/runtime/vue/composables/use-sandbox-inbox.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="receivedat">
        
      </a>
      
       <code>
        receivedAt
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      When it was sent, as epoch ms.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-sandbox-inbox.ts" rel="nofollow">
        src/runtime/vue/composables/use-sandbox-inbox.ts
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### SandboxInboxApi

Defined in: [src/runtime/vue/composables/use-sandbox-inbox.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-sandbox-inbox.ts)

The `email` function group re-exported from your `backend/email.ts`.

#### Properties

<table>
<thead>
  <tr>
    <th>
      Property
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Defined in
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a id="getsandboxinbox">
        
      </a>
      
       <code>
        getSandboxInbox?
      </code>
    </td>
    
    <td>
      <a href="https://docs.convex.dev/api/modules/server#functionreference" rel="nofollow">
        <code>
          FunctionReference
        </code>
      </a>
      
      <<code>
        "query"
      </code>
      
      , <code>
        "public"
      </code>
      
      , { <code>
        address
      </code>
      
      : <code>
        string
      </code>
      
      ; }, <a href="#sandboxmessage">
        <code>
          SandboxMessage
        </code>
      </a>
      
      <span>
        
      </span>
      
      >
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-sandbox-inbox.ts" rel="nofollow">
        src/runtime/vue/composables/use-sandbox-inbox.ts
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### UseSandboxInboxOptions

Defined in: [src/runtime/vue/composables/use-sandbox-inbox.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-sandbox-inbox.ts)

#### Properties

<table>
<thead>
  <tr>
    <th>
      Property
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Description
    </th>
    
    <th>
      Defined in
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a id="address">
        
      </a>
      
       <code>
        address
      </code>
    </td>
    
    <td>
      <code>
        MaybeRefOrGetter
      </code>
      
      <<code>
        string
      </code>
      
       | <code>
        null
      </code>
      
       | <code>
        undefined
      </code>
      
      >
    </td>
    
    <td>
      The sandbox address to read (a value, ref or getter). Reading pauses while it is <code>
        undefined
      </code>
      
       or blank.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-sandbox-inbox.ts" rel="nofollow">
        src/runtime/vue/composables/use-sandbox-inbox.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="api">
        
      </a>
      
       <code>
        api?
      </code>
    </td>
    
    <td>
      <a href="#sandboxinboxapi">
        <code>
          SandboxInboxApi
        </code>
      </a>
    </td>
    
    <td>
      Override the injected <code>
        api.email
      </code>
      
       namespace (or the <code>
        getSandboxInbox
      </code>
      
       ref).
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-sandbox-inbox.ts" rel="nofollow">
        src/runtime/vue/composables/use-sandbox-inbox.ts
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### UseSandboxInboxReturn

Defined in: [src/runtime/vue/composables/use-sandbox-inbox.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-sandbox-inbox.ts)

#### Properties

<table>
<thead>
  <tr>
    <th>
      Property
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Description
    </th>
    
    <th>
      Defined in
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a id="messages">
        
      </a>
      
       <code>
        messages
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<a href="#sandboxmessage">
        <code>
          SandboxMessage
        </code>
      </a>
      
      <span>
        
      </span>
      
       | <code>
        undefined
      </code>
      
      >
    </td>
    
    <td>
      The inbox, newest first: <code>
        undefined
      </code>
      
       until the first read lands, without an address, and after a failed read.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-sandbox-inbox.ts" rel="nofollow">
        src/runtime/vue/composables/use-sandbox-inbox.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="latest">
        
      </a>
      
       <code>
        latest
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<a href="#sandboxmessage">
        <code>
          SandboxMessage
        </code>
      </a>
      
       | <code>
        undefined
      </code>
      
      >
    </td>
    
    <td>
      The newest message, if any.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-sandbox-inbox.ts" rel="nofollow">
        src/runtime/vue/composables/use-sandbox-inbox.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="code">
        
      </a>
      
       <code>
        code
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<code>
        string
      </code>
      
       | <code>
        undefined
      </code>
      
      >
    </td>
    
    <td>
      The first six-digit code in the newest message — a sign-in code, typically.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-sandbox-inbox.ts" rel="nofollow">
        src/runtime/vue/composables/use-sandbox-inbox.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="isloading">
        
      </a>
      
       <code>
        isLoading
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<code>
        boolean
      </code>
      
      >
    </td>
    
    <td>
      <code>
        true
      </code>
      
       until the first read for the current address lands; <code>
        false
      </code>
      
       without one.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-sandbox-inbox.ts" rel="nofollow">
        src/runtime/vue/composables/use-sandbox-inbox.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="error">
        
      </a>
      
       <code>
        error
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      < | <a href="https://nuxt-backend.dev/docs/reference/api/functions#backenderror">
        <code>
          BackendError
        </code>
      </a>
      
       | <code>
        null
      </code>
      
      >
    </td>
    
    <td>
      Why the inbox could not be read, or <code>
        null
      </code>
      
      .
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-sandbox-inbox.ts" rel="nofollow">
        src/runtime/vue/composables/use-sandbox-inbox.ts
      </a>
    </td>
  </tr>
</tbody>
</table>

## Functions

### useSandboxInbox()

```ts
function useSandboxInbox(options): UseSandboxInboxReturn;
```

Defined in: [src/runtime/vue/composables/use-sandbox-inbox.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-sandbox-inbox.ts)

**Experimental**

The mail a sandbox address received within the last hour, live — so a demo,
a preview deployment or an e2e run can finish an email-code sign-in without
a real mailbox. Only the provider's sandbox addresses
(`delivered+label@resend.dev`) have an inbox, and only while email runs in
test mode. Needs `getSandboxInbox` re-exported from `backend/email.ts`
(`export const { getSandboxInbox } = email.api`); without it the inbox stays
empty. Anyone who knows an address can read its inbox, so use it only where
every account is a throwaway one. It never throws: a failed read shows in
`error`.

#### Parameters

<table>
<thead>
  <tr>
    <th>
      Parameter
    </th>
    
    <th>
      Type
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        options
      </code>
    </td>
    
    <td>
      <a href="#usesandboxinboxoptions">
        <code>
          UseSandboxInboxOptions
        </code>
      </a>
    </td>
  </tr>
</tbody>
</table>

#### Returns

[`UseSandboxInboxReturn`](#usesandboxinboxreturn)

#### Example

```vue
<script setup lang="ts">
const address = ref('delivered+demo-4f2a@resend.dev')
const inbox = useSandboxInbox({ address })
</script>
<template>
  <p v-if="inbox.code.value">Your code: {{ inbox.code.value }}</p>
</template>
```


## Sitemap

See the full [sitemap](https://nuxt-backend.dev/sitemap.md) for all pages.