React

Integrate Passage into your React application

Now in beta, passage-react provides components and hooks to simplify using Passage in your React Application. We recommend using this package for all React implementations.

Importing and Using the Passage-Auth Custom Element

A full implementation example can be found on GitHub.

First you'll need to install the passage-elements package from npm:

npm i --save @passageidentity/passage-elements

Then import the package in the module where you intend to use the custom element

import '@passageidentity/passage-elements/passage-auth'

Importing this script will register the Passage custom element for use in your React components. For more information about custom elements, refer to the online documentation.

It's then just a matter of embedding the <passage-auth> element into your component that will handle login. This is done in the example in frontend/src/views/Home.js:

<div className={styles.authContainer}>
  <passage-auth app-id={process.env.REACT_APP_PASSAGE_APP_ID}></passage-auth>
</div>

Typescript Support

If you are using TypeScript with your React application, you’ll need to add the following type declaration to your typings.d.ts file:

declare namespace JSX {
    import { PassageElement, PassageProfileElement } from '@passageidentity/passage-elements'
    interface IntrinsicElements {
        "passage-auth": PassageElement;
        "passage-login": PassageElement;
        "passage-register": PassageElement;
        "passage-profile": PassageProfileElement;
    }
}

Getting Authentication Status and User Information

After the user has logged in with Passage, you can check if a user's authentication token is valid and retrieve basic user information from Passage using the PassageUser class exported from @passageidentity/passage-elements/passage-user. This example wraps this functionality into a reusable react hook in useAuthStatus:

import { PassageUser } from '@passageidentity/passage-elements/passage-user';
...
useEffect(() => {
    let cancelRequest = false;
    new PassageUser().userInfo().then(userInfo=> {
...

The PassageUser().authGuard() function can be used as a route guard in your application, but it should NOT be make authorization decisions when fetching data from an API server. Route guards provide a better user experience, but less security than using one of Passage's backend libraries. For applications using an API server, you must use one of the Passage backend SDKs to safely verify user authentication tokens.

Defining Callbacks

To define a callback on a Passage Element in React, you can attach a ref to the element and then set the callback on that ref in a useEffect(). An example is shown below.

import "@passageidentity/passage-elements/passage-auth";
import { useEffect, useRef } from "react";

function Home() {
    const ref = useRef();

    const beforeAuth = (email) =>{
        console.log(email);
        return true;
      }

    useEffect(() => {
        const {current} = ref;
        current.beforeAuth = beforeAuth;
        return () => {}
    });

    return (
        <passage-auth ref={ref} app-id={process.env.REACT_APP_PASSAGE_APP_ID}></passage-auth>
    );
}

export default Home;

Learn more about the available callbacks here.