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

## Interfaces

### UseLoginFlowOptions

Defined in: [src/runtime/vue/composables/use-login-flow.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-login-flow.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="requirename">
        
      </a>
      
       <code>
        requireName?
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      UI hint for <code>
        <AuthForm>
      </code>
      
      : show a name field on the email step. Default <code>
        true
      </code>
      
      .
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-login-flow.ts" rel="nofollow">
        src/runtime/vue/composables/use-login-flow.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="validateemail">
        
      </a>
      
       <code>
        validateEmail?
      </code>
    </td>
    
    <td>
      (<code>
        email
      </code>
      
      ) => <code>
        string
      </code>
      
       | <code>
        boolean
      </code>
    </td>
    
    <td>
      Gate the email before sending. Return <code>
        true
      </code>
      
       to accept, <code>
        false
      </code>
      
       for the default message, or a string for a custom one. Default: a basic shape check.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-login-flow.ts" rel="nofollow">
        src/runtime/vue/composables/use-login-flow.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="onsuccess">
        
      </a>
      
       <code>
        onSuccess?
      </code>
    </td>
    
    <td>
      () => <code>
        unknown
      </code>
    </td>
    
    <td>
      Called once the user is signed in and the flow is complete (e.g. <code>
        navigateTo
      </code>
      
      ).
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-login-flow.ts" rel="nofollow">
        src/runtime/vue/composables/use-login-flow.ts
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### UseLoginFlowReturn

Defined in: [src/runtime/vue/composables/use-login-flow.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-login-flow.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="step">
        
      </a>
      
       <code>
        step
      </code>
    </td>
    
    <td>
      <code>
        Ref
      </code>
      
      <<a href="#loginstep">
        <code>
          LoginStep
        </code>
      </a>
      
      >
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-login-flow.ts" rel="nofollow">
        src/runtime/vue/composables/use-login-flow.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="email">
        
      </a>
      
       <code>
        email
      </code>
    </td>
    
    <td>
      <code>
        Ref
      </code>
      
      <<code>
        string
      </code>
      
      >
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-login-flow.ts" rel="nofollow">
        src/runtime/vue/composables/use-login-flow.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="name">
        
      </a>
      
       <code>
        name
      </code>
    </td>
    
    <td>
      <code>
        Ref
      </code>
      
      <<code>
        string
      </code>
      
      >
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-login-flow.ts" rel="nofollow">
        src/runtime/vue/composables/use-login-flow.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="otp">
        
      </a>
      
       <code>
        otp
      </code>
    </td>
    
    <td>
      <code>
        Ref
      </code>
      
      <<code>
        string
      </code>
      
      >
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-login-flow.ts" rel="nofollow">
        src/runtime/vue/composables/use-login-flow.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="pending">
        
      </a>
      
       <code>
        pending
      </code>
    </td>
    
    <td>
      <code>
        Ref
      </code>
      
      <<code>
        boolean
      </code>
      
      >
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-login-flow.ts" rel="nofollow">
        src/runtime/vue/composables/use-login-flow.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="error">
        
      </a>
      
       <code>
        error
      </code>
    </td>
    
    <td>
      <code>
        Ref
      </code>
      
      <<code>
        string
      </code>
      
       | <code>
        null
      </code>
      
      >
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-login-flow.ts" rel="nofollow">
        src/runtime/vue/composables/use-login-flow.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="retryafter">
        
      </a>
      
       <code>
        retryAfter
      </code>
    </td>
    
    <td>
      <code>
        Ref
      </code>
      
      <<code>
        number
      </code>
      
       | <code>
        null
      </code>
      
      >
    </td>
    
    <td>
      Seconds until a rate-limited action can be retried, for a countdown next to <code>
        error
      </code>
      
      ; <code>
        null
      </code>
      
       when the last error was not a 429 or gave no wait.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-login-flow.ts" rel="nofollow">
        src/runtime/vue/composables/use-login-flow.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="emailvalid">
        
      </a>
      
       <code>
        emailValid
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<code>
        boolean
      </code>
      
      >
    </td>
    
    <td>
      Whether the current email passes <code>
        validateEmail
      </code>
      
      .
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-login-flow.ts" rel="nofollow">
        src/runtime/vue/composables/use-login-flow.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="signinwithpasskey">
        
      </a>
      
       <code>
        signInWithPasskey
      </code>
    </td>
    
    <td>
      () => <code>
        Promise
      </code>
      
      <<code>
        void
      </code>
      
      >
    </td>
    
    <td>
      Sign in with a passkey already saved on this device.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-login-flow.ts" rel="nofollow">
        src/runtime/vue/composables/use-login-flow.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="sendcode">
        
      </a>
      
       <code>
        sendCode
      </code>
    </td>
    
    <td>
      () => <code>
        Promise
      </code>
      
      <<code>
        void
      </code>
      
      >
    </td>
    
    <td>
      Email an OTP code to <code>
        email
      </code>
      
       → <code>
        verify-code
      </code>
      
      .
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-login-flow.ts" rel="nofollow">
        src/runtime/vue/composables/use-login-flow.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="verifycode">
        
      </a>
      
       <code>
        verifyCode
      </code>
    </td>
    
    <td>
      () => <code>
        Promise
      </code>
      
      <<code>
        void
      </code>
      
      >
    </td>
    
    <td>
      Verify the entered code (signs in / signs up) → <code>
        add-passkey
      </code>
      
      .
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-login-flow.ts" rel="nofollow">
        src/runtime/vue/composables/use-login-flow.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="addpasskey">
        
      </a>
      
       <code>
        addPasskey
      </code>
    </td>
    
    <td>
      () => <code>
        Promise
      </code>
      
      <<code>
        void
      </code>
      
      >
    </td>
    
    <td>
      Save a passkey on the current account (post-OTP step) → done.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-login-flow.ts" rel="nofollow">
        src/runtime/vue/composables/use-login-flow.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="skippasskey">
        
      </a>
      
       <code>
        skipPasskey
      </code>
    </td>
    
    <td>
      () => <code>
        Promise
      </code>
      
      <<code>
        void
      </code>
      
      >
    </td>
    
    <td>
      Skip the passkey offer → done.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-login-flow.ts" rel="nofollow">
        src/runtime/vue/composables/use-login-flow.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="goto">
        
      </a>
      
       <code>
        goTo
      </code>
    </td>
    
    <td>
      (<code>
        step
      </code>
      
      ) => <code>
        void
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-login-flow.ts" rel="nofollow">
        src/runtime/vue/composables/use-login-flow.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="reset">
        
      </a>
      
       <code>
        reset
      </code>
    </td>
    
    <td>
      () => <code>
        void
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-login-flow.ts" rel="nofollow">
        src/runtime/vue/composables/use-login-flow.ts
      </a>
    </td>
  </tr>
</tbody>
</table>

## Type Aliases

### LoginStep

```ts
type LoginStep = "choose" | "request-code" | "verify-code" | "add-passkey";
```

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

The passwordless login state machine:
`choose` → `signInWithPasskey` (returning users with a passkey on-device)
`choose` → `request-code` → `verify-code` → `add-passkey` (OTP, then save a passkey)

New accounts are always created through the OTP flow (which verifies email
ownership); a passkey is added afterwards from the authenticated session.

## Functions

### useLoginFlow()

```ts
function useLoginFlow(options?): UseLoginFlowReturn;
```

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

The headless login flow behind `<AuthForm>` — bring your own markup and wire
these refs/actions to it. Encodes the proven passwordless sequencing:
session-refetch after sign-in, then an optional post-OTP passkey enrolment.

#### Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        options?
      </code>
    </td>
    
    <td>
      <a href="#useloginflowoptions">
        <code>
          UseLoginFlowOptions
        </code>
      </a>
    </td>
  </tr>
</tbody>
</table>

#### Returns

[`UseLoginFlowReturn`](#useloginflowreturn)


## Sitemap

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