Connect Widget React SDK

The Connect React SDK makes it easy to integrate Connect into your application, enabling users to effortlessly sign in or sign up.

⚠️

This guide assumes that all prerequisite steps mentioned in the Connect tutorial 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 authentication details.

import { ConnectProvider } from '@portabl/react-connect-with-portabl';
 
function App() {
  return (
    <ConnectProvider
      accountId="<PORTABL_ACCOUNT_ID>",
      connectDomain="https://api.getportabl.com",
      walletDomain="https://wallet.getportabl.com"
    >
      {children}
    </ConnectProvider>
  );
}

Usage

Use the useConnect hook in your components to access authentication state which includes variables such as isLoading and isAuthenticated. Additionally, you can make use of authentication methods such as loginWithRedirect and logout.

import React from 'react';
import { useAuth0 } from '@auth0/auth0-react';
 
function MyComponent() {
  const { isLoading, isAuthenticated, loginWithRedirect, logout } = useConnect();
 
  if (isLoading) {
    return <div>Loading...</div>;
  }
 
  if (isAuthenticated) {
    return (
      <div>
        Logged In
        <button onClick={logout}>
          Log out
        </button>
      </div>
    );
  } else {
    return <button onClick={loginWithRedirect}>Log in</button>;
  }
}
 
export default MyComponent;

Props

Option	Type	Description
accountId	string	Your account ID
connectDomain	string	The domain for accessing the Connect API
walletDomain	string	The domain of the Portabl wallet

Javascript