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.

Install

Install the Passage-React package from npm.

npm i @passageidentity/passage-react

Import

import { PassageProvider, PassageAuth } from '@passageidentity/passage-react';

Add PassageProvider

Use Passage-React by wrapping your application with the PassageProvider.

src/index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
 
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
    <React.StrictMode>
 
        // Wrap your application code with PassageProvider
        // Use the Passage app id from the Passage Console
        <PassageProvider appId='YOUR_PASSAGE_APP_ID'>
            <App />
        </PassageProvider>
    </React.StrictMode>,
);

Learn more about PassageProvider

Add a Passage Authentication Component

In your application use one of the Passage authentication components, PassageAuth (opens in a new tab), PassageLogin (opens in a new tab), or PassageRegister (opens in a new tab) to display a login form for your users.

src/login.tsx

import React from 'react';
import { PassageAuth } from '@passageidentity/passage-react';
 
export const LoginPage: React.FC = () => {
    return (
        <>
            <PassageAuth />
        </>
    );
};