Connect SDKs

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.


  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 (


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 (
        Logged In
        <button onClick={logout}>
          Log out
  } else {
    return <button onClick={loginWithRedirect}>Log in</button>;
export default MyComponent;


accountIdstringYour account ID
connectDomainstringThe domain for accessing the Connect API
walletDomainstringThe domain of the Portabl wallet