React

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

  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

OptionTypeDefaultDescription
organizationIdstringThe unique identifier of your organization
projectIdstringThe unique identifier of your project
connectDomainstringThe domain for accessing the Connect API
passportDomainstringThe domain of the Portabl passport