# @authopia/widget

> Authopia authentication widget

Latest version **0.9.5** (published 2025-08-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install @authopia/widget
pnpm add @authopia/widget
yarn add @authopia/widget
bun add @authopia/widget
```

## Health

**Score 40/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; large bundle; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.9.5 |
| Published | 2025-08-26 |
| First published | 2024-04-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 12.9 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | authopia-engineering |

## Links

- npm: https://www.npmjs.com/package/@authopia/widget
- Homepage: https://authopia.io/
- npm.io page: https://npm.io/package/@authopia/widget

## Dependencies (5)

- [tsx](https://npm.io/package/tsx.md) ^4.6.2
- [date-fns](https://npm.io/package/date-fns.md) ^2.30.0
- [classnames](https://npm.io/package/classnames.md) ^2.3.2
- [@authopia/sdk](https://npm.io/package/@authopia/sdk.md) 0.6.9
- [@stencil/core](https://npm.io/package/@stencil/core.md) ^4.7.0

## Recent versions

- 0.9.5 (latest) — 2025-08-26
- 0.9.4 — 2024-07-03
- 0.9.3 — 2024-06-17
- 0.9.2 — 2024-06-05
- 0.9.1 — 2024-06-05
- 0.9.0 — 2024-06-04
- 0.8.9 — 2024-04-10
- 0.8.8 — 2024-04-09
- 0.8.7 — 2024-04-09
- 0.0.0 — 2024-04-08

## README

# Authopia

Authopia is a user-friendly and customizable authentication component for React applications. It provides a straightforward way to implement user authentication features, including login, registration and logout using passkeys in your React projects. This README file will guide you through the installation and usage of the widget.

## Installation

To get started with the widget, you need to follow these simple steps:

1. Install the package using npm or yarn:

```bash
npm install @authopia/widget
# or
yarn add @authopia/widget
```

### Usage

Once you've installed the widget, you can include it in your application as follows:

#### Example of React `App.js` file with basic integration:

```javascript
import { defineCustomElements } from '@authopia/widget/loader';
import '@authopia/widget/dist/authopia-widget/authopia-widget.css';

defineCustomElements(window);

const App = () => <authopia-widget email="test@mail.com" project-id="12345678" text="Click" />;

export default App;
```

## Documentation

For more detailed documentation on how to configure and use Authopia, please refer to our [official documentation](https://developers.authopia.io/docs).

## License

This project is licensed under the MIT License - see the [LICENSE](./LICENSE.txt) file for details.

---
_Source: https://npm.io/package/@authopia/widget · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._