Device Authorization

The Device Authorization plugin adds the browser half of Better Auth's device authorization flow. A user enters the short code shown by a CLI, TV, or another limited-input device, signs in if needed, then approves or denies access.

It contributes:

• A <DeviceAuthorization /> view at /auth/device
• Code verification with the user_code query parameter prefilled when present
• Sign-in redirection that preserves the pending code
• Approve and deny confirmation states
• React Query hooks for verifying, approving, and denying device requests

The requesting device remains responsible for calling Better Auth's /device/code endpoint and polling /device/token.

Setup

import { betterAuth } from "better-auth"
import { deviceAuthorization } from "better-auth/plugins"

export const auth = betterAuth({
  // ...
  plugins: [
    deviceAuthorization({ 
      verificationUri: "/auth/device"
    }) 
  ]
})

bunx auth@latest migrate

import { createAuthClient } from "better-auth/react"
import { deviceAuthorizationClient } from "better-auth/client/plugins"

export const authClient = createAuthClient({
  plugins: [deviceAuthorizationClient()] 
})

bunx --bun shadcn@latest add https://better-auth-ui.com/r/device-authorization.json

import { AuthProvider } from "@/components/auth/auth-provider"
import { deviceAuthorizationPlugin } from "@/lib/auth/device-authorization-plugin"

<AuthProvider
  authClient={authClient}
  navigate={navigate}
  plugins={[deviceAuthorizationPlugin()]} 
>
  {children}
</AuthProvider>

import { viewPaths } from "@better-auth-ui/core"
import { createFileRoute, notFound } from "@tanstack/react-router"

import { Auth } from "@/components/auth/auth"
import { deviceAuthorizationPlugin } from "@/lib/auth/device-authorization-plugin"

const validAuthPathSegments = new Set([
  ...Object.values(viewPaths.auth),
  deviceAuthorizationPlugin().viewPaths.auth.deviceAuthorization
])

export const Route = createFileRoute("/auth/$path")({
  beforeLoad({ params: { path } }) {
    if (!validAuthPathSegments.has(path)) {
      throw notFound()
    }
  },
  component: AuthPage
})

function AuthPage() {
  const { path } = Route.useParams()
  return <Auth path={path} />
}

Component

Enter any eight-character code in the preview to exercise the approval flow.

The component is rendered automatically at /auth/device when the plugin is registered. You can also render it directly:

import { DeviceAuthorization } from "@/components/auth/device-authorization/device-authorization"

<DeviceAuthorization />

Options

deviceAuthorizationPlugin({
  // Override the URL segment. Default: "device"
  path: "activate",
  // Match Better Auth's server-side userCodeLength. Default: 8
  userCodeLength: 8,
  localization: {
    approveDevice: "Allow this device?"
  }
})

Keep userCodeLength equal to the value passed to Better Auth's server plugin. A mismatched length prevents valid codes from being submitted.

Localization

React APIs

The view uses these React Query hooks:

• useVerifyDeviceCode verifies and claims the submitted code for the current session.
• useApproveDevice grants the requesting device access.
• useDenyDevice rejects the request.

Sessions and revocation

An approved device token creates an ordinary Better Auth session. There is no separate device registry in the Device Authorization plugin. Use <ActiveSessions /> to list sessions and revoke access for an approved device.