@passageidentity/passage-react

About

Passage by 1Password unlocks the passwordless future with a simpler, more secure passkey authentication experience. Passage handles the complexities of the WebAuthn API, and allows you to implement passkeys with ease.

Use Passkey Flex to add passkeys to an existing authentication experience.

Use Passkey Complete as a standalone passwordless auth solution.

Use 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
Passkey Complete	✅
Passkey Ready	✖️ For Passkey Ready, check out Authentikit

Getting Started

Check Prerequisites

You'll need a free Passage account and a Passkey Complete app set up in Passage Console to get started.
_{Learn more about Passage Console →}

Install

npm i @passageidentity/passage-react

Import

// Configure passage-react by wrapping your application with a PassageProvider and adding a Passage Auth Element within your app

// index.tsx
import { PassageProvider } from '@passageidentity/passage-react';

// login.tsx
import { PassageAuth } from '@passageidentity/passage-react';

Initialize

// 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 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.

---

_{Passage is a product by 1Password, the global leader in access management solutions with nearly 150k business customers.
This project is licensed under the MIT license. See the LICENSE file for more info.}