---
title: "@playstack/extension-react"
description: "React authorization and restored-session state for extension popup and options surfaces."
tags: ["package","identity","extension","react","mv3","pro"]
---

{/* package-access:start */}

> **Pro.** Covered by the Playstack Pro License. Registry access is required; check preview availability before installing. See [package access](/docs/packages#access-policy).

{/* package-access:end */}

`@playstack/extension-react` exposes client-only authorization state for an
extension popup or options page without persisting React state or owning the
product interface.

```tsx
import {
  PlaystackExtensionAuthProvider,
  useExtensionAuth,
} from '@playstack/extension-react'

function Popup() {
  const { status, tokens, authorize, restore, signOut } = useExtensionAuth()
  // Render application-owned loading, signed-out, error, and account states.
}

<PlaystackExtensionAuthProvider client={clientAuth} onError={reportError}>
  <Popup />
</PlaystackExtensionAuthProvider>
```

The provider restores through `@playstack/client-auth`, so expired access
credentials rotate through the extension’s cross-context coordinator. It
exposes `loading`, `anonymous`, `authenticated`, and `error` states plus
`authorize()`, `restore()`, and `signOut()` actions. The application owns
navigation, consent copy, error presentation, and every visual component.

{/* package-install:start */}

## Install

After confirming [preview access](/docs/packages#access-policy), install the package at your application's shared Playstack version:

```sh
npm install --save-exact @playstack/extension-react@0.1.0-beta.1
```

Check the peer requirements below before choosing a runtime or provider.

{/* package-install:end */}

{/* package-reference:start */}

## API entry points and requirements

Reference snapshot: `@playstack/extension-react@0.1.0-beta.1`. Import only the entry point your runtime needs. Paths below are relative to the installed package; use **Go to Definition** in your editor to inspect exact parameters, return types and overloads. Do not import the declaration-file paths directly.

| Public entry point | Declaration file |
| --- | --- |
| `@playstack/extension-react` | `./dist/index.d.ts` |
| `@playstack/extension-react/package.json` | No TypeScript declaration (asset or metadata export). |

Node.js engine requirement: `>=20`. This is not a claim that every entry point works in browsers or Workers.

### Peer dependencies

Keep existing framework versions that satisfy these ranges. Install optional peers only when using the corresponding adapter. The package manager resolves ordinary dependencies separately.

| Peer | Compatible range | When needed |
| --- | --- | --- |
| `@playstack/client-auth` | `0.1.0-beta.1` | Required by the package. |
| `@playstack/extension` | `0.1.0-beta.1` | Required by the package. |
| `react` | `^18.2.0 \|\| ^19.0.0` | Required by the package. |

For a complete first program, start with [Getting started](/docs/getting-started). For API lookup and partial-example conventions, see [Reading the reference](/docs/packages#reading-the-reference). Provider failures, lifecycle requirements and application responsibilities remain described in the guide above; types alone do not establish production safety.

{/* package-reference:end */}