Portabl React SDK

The Portabl React SDK makes it easy to verify users in your application.

⚠️

This guide assumes that all prerequisite steps mentioned in the Verify Users have been applied and configured.

Installation

sh copy npm install --save @portabl/react-connect-with-portabl

Add the Connect Provider

Wrap your React app with a ConnectProvider. We suggest placing the ConnectProvider at a high level in your app, above any component that needs access to authorization details.

import { ConnectProvider } from '@portabl/react-connect-with-portabl';
 
function App() {
  return (
    <ConnectProvider
      organizationId="<PORTABL_ORGANIZATION_ID>"
      projectId="<PORTABL_PROJECT_ID>"
      connectDomain="https://api.getportabl.com"
      passportDomain="https://my.getportabl.com"
    >
      {children}
    </ConnectProvider>
  );
}

Usage

Use the useConnect hook in your components to access authorization state which includes variables such as isLoading and isAuthorized. Additionally, you can make use of authorization methods such as authorizeWithRedirect and resetAuthorization.

import React from 'react';
import { useConnect } from '@portabl/react-connect-with-portabl';
 
function MyComponent() {
  const { isLoading, isAuthorized, authorizeWithRedirect, resetAuthorization } =
    useConnect();
 
  if (isLoading) {
    return <div>Loading...</div>;
  }
 
  if (isAuthorized) {
    return (
      <div>
        Verified User
        <button onClick={resetAuthorization}>Reset Verification</button>
      </div>
    );
  } else {
    return <button onClick={authorizeWithRedirect}>Verify</button>;
  }
}
 
export default MyComponent;

Props

Option	Type	Description
organizationId	string	The unique identifier of your organization
projectId	string	The unique identifier of your project
connectDomain	string	The domain for accessing the Connect API
passportDomain	string	The domain of the Portabl passport