@passageidentity/passage-react
Version:
Passkey Complete for React - Go completely passwordless with a standalone auth solution in your React apps with Passage by 1Password.
118 lines (80 loc) ā¢ 4.89 kB
Markdown
## 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-react
Passage-React the easiest way to use Passage Passkey Complete in your React application. Passage-React provides native React integration with the Passage Elements - modular components that provides 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** | āļø For Passkey Flex, check out [passage-flex-js](https://www.npmjs.com/package/@passageidentity/passage-flex-js)
|  Passkey **Complete** | ā
|  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 copy
npm i /passage-react
```
### Import
```js copy
// Configure passage-react by wrapping your application with a PassageProvider and adding a Passage Auth Element within your app
// index.tsx
import { PassageProvider } from '/passage-react';
// login.tsx
import { PassageAuth } from '/passage-react';
```
### Initialize
```js copy
// PassageProvider requires an App ID
// index.tsx
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<React.StrictMode>
<PassageProvider appId='YOUR_PASSAGE_APP_ID'>
<App />
</PassageProvider>
</React.StrictMode>,
);
// login.tsx
export const LoginPage: React.FC = () => {
return (
<>
<PassageAuth />
</>
);
};
```
### Go Passwordless
Find all core functions, user management details, and more implementation guidance on our [Passkey Complete React Documentation](https://docs.passage.id/complete/passage-react) 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>