npm package: @passageidentity/passage-elements
Description: Passage Complete for Web - Go completely passwordless with a standalone auth solution in any modern web app with Passage by 1Password.
Author: Passage by 1Password
Latest version: 2.0.9
Deprecated: This package is deprecated and no longer maintained as of January 16, 2026.

![passage-elements](https://storage.googleapis.com/passage-docs/github-md-assets/passage-elements.png)

![NPM Version](https://img.shields.io/npm/v/%40passageidentity%2Fpassage-elements)
![NPM Type Definitions](https://img.shields.io/npm/types/%40passageidentity%2Fpassage-elements)
![NPM License](https://img.shields.io/npm/l/%40passageidentity%2Fpassage-elements)
![Static Badge](https://img.shields.io/badge/Built_by_1Password-grey?logo=1password)


## About

[Passage by 1Password](https://1password.com/product/passage) unlocks the passwordless future with a simpler, more secure passkey authentication experience. Passage handles the complexities of the [WebAuthn API](https://blog.1password.com/what-is-webauthn/), and allows you to implement passkeys with ease. 

Use [Passkey Flex](https://docs.passage.id/flex) to add passkeys to an existing authentication experience.

Use [Passkey Complete](https://docs.passage.id/complete) as a standalone passwordless auth solution.

Use [Passkey Ready](https://docs.passage.id/passkey-ready) to determine if your users are ready for passkeys.


### In passage-elements

The Passage Elements are the easiest way to use Passage Passkey Complete in your web application. An Element is a modular component that provides a complete UI/UX for modern authentication, embedded directly into your website. 

What's Included?

🙆 User login, registration, and profile cross-platform elements.

🎨 Complete UI/UX for all device types and auth flows – in other words, it just works.

🔒 Full passkey authentication.

✨ Magic Link and One-Time Passcodes over email or SMS.

👥 Authentication with Social providers.

| Product | Compatible |
| --- | --- |
| ![Passkey Flex](https://storage.googleapis.com/passage-docs/github-md-assets/passage-passkey-flex-icon.png) Passkey **Flex** | ✖️ For Passkey Flex, check out [passage-flex-js](https://www.npmjs.com/package/@passageidentity/passage-flex-js)
| ![Passkey Complete](https://storage.googleapis.com/passage-docs/github-md-assets/passage-passkey-complete-icon.png) Passkey **Complete** | ✅
| ![Passkey Ready](https://storage.googleapis.com/passage-docs/github-md-assets/passage-passkey-ready-icon.png) Passkey **Ready** | ✖️ For Passkey Ready, check out [Authentikit](https://www.npmjs.com/package/@passageidentity/authentikit)



<br />

## Getting Started

### Check Prerequisites

<p>
 You'll need a free Passage account and a Passkey Complete app set up in <a href="https://console.passage.id/">Passage Console</a> to get started. <br />
 <sub><a href="https://docs.passage.id/home#passage-console">Learn more about Passage Console →</a></sub>
</p>

### Install
```shell
npm i @passageidentity/passage-elements
```

### Import
```js
// Importing automatically registers the web component
import '@passageidentity/passage-elements/passage-auth';
```

### Initialize
```html
<passage-auth app-id="YOUR_PASSAGE_APP_ID"></passage-auth>
```

### Go Passwordless

Find all core elements, framework-specific examples, additional customization options, and more implementation guidance on our [Passkey Complete Elements Documentation](https://docs.passage.id/complete/elements) page.

## Support & Feedback

We are here to help! Find additional docs, the best ways to get in touch with our team, and more within our [support resources](https://github.com/passageidentity/.github/blob/main/SUPPORT.md). 

<br />

---

<p align="center">
    <picture>
      <source media="(prefers-color-scheme: dark)" srcset="https://storage.googleapis.com/passage-docs/github-md-assets/passage-by-1password-dark.png">
      <source media="(prefers-color-scheme: light)" srcset="https://storage.googleapis.com/passage-docs/github-md-assets/passage-by-1password-light.png">
      <img alt="Passage by 1Password Logo" src="https://storage.googleapis.com/passage-docs/github-md-assets/passage-by-1password-light.png">
    </picture>
</p>

<p align="center">
    <sub>Passage is a product by <a href="https://1password.com/product/passage">1Password</a>, the global leader in access management solutions with nearly 150k business customers.</sub><br />
    <sub>This project is licensed under the MIT license. See the <a href="LICENSE">LICENSE</a> file for more info.</sub>
</p>