@saascannon/spa-react v0.0.3

@saascannon/spa-react

React Wrapper for the @saascannon/spa package. It provides a context-based solution to integrate authentication and authorization functionalities provided by Saascannon into your React application. By using the SaascannonProvider component, you can manage authentication flows and access Saascannon's APIs through React hooks.

Installation

Install the package via npm:

npm i @saascannon/spa-react

Usage

1. Wrap your Application with SaascannonProvider

   First, wrap your application with SaascannonProvider. This component initializes the Saascannon client, manages loading states, and passes the client methods to the context for consumption within your React components.

   import React from "react";
   import ReactDOM from "react-dom";
   import { SaascannonProvider } from "@saascannon/spa-react";
   import App from "./App";
   import { apiClient } from "./utils/api"
   
   const saascannonConfig = {
       domain: "your-tenant.region.saascannon.app",
       clientId: "your-client-id",
       redirectUri: "http://localhost:3000/callback",
   };
   
   ReactDOM.render(
       <SaascannonProvider 
           config={saascannonConfig} 
           loading={<div>Loading...</div>}
           clientInitialised={(client) => {
               try {
                   apiClient.config.TOKEN = async () => {
                   const accessToken = await client.getAccessToken();
   
                   if (accessToken === null) {
                       throw "Invalid access token";
                   }
   
                   return accessToken;
                   };
               } finally {
                   setLoadingAuthState(false);
               }
           }}
       >
           <App />
       </SaascannonProvider>,
       document.getElementById("root"),
   );

   The SaascannonProvider component takes the following props:

   • config (required): An object containing configuration options (see type Options for details).
   • loading (optional): A React node that will be displayed while the Saascannon client is loading.
   • clientInitialised (optional): A callback function that will be invoked once the client is initialized. This is useful for setting up any global usage of the saascannon methods (like shown in the example for setting up access token middleware) as you have direct access to the underlying client during this function call.

2. Access Saascannon Client Methods via useSaascannon Hook

   Inside any child component, you can access the Saascannon client and call its methods by using the useSaascannon hook.

   import React, { useEffect } from "react";
   import { useSaascannon } from "@saascannon/spa-react";
   
   const MyComponent = () => {
       const {
           user,
           loginViaRedirect,
           signupViaRedirect,
           logoutViaRedirect,
           getAccessToken,
           hasPermissions,
           accountManagement,
           shopManagement,
       } = useSaascannon();
   
       return (
           <div>
               {user ? (
                   <>
                       <h2>Welcome, {user.name}!</h2>
                       <button onClick={() => logoutViaRedirect()}>Logout</button>
                   </>
               ) : (
                   <>
                       <button onClick={() => loginViaRedirect()}>Login</button>
                       <button onClick={() => signupViaRedirect()}>Sign Up</button>
                   </>
               )}
               <div>
                   {hasPermissions("admin") ? (
                       <p>You have admin access</p>
                   ) : (
                       <p>You do not have admin access</p>
                   )}
               </div>
           </div>
       );
   };
   
   export default MyComponent;

Saascannon Methods Available through useSaascannon

The following methods are available from the useSaascannon hook:

Configuration Options

The config object passed to SaascannonProvider includes:

Example

Here’s how you could use the SaascannonProvider and useSaascannon in a simple app:

import React from "react";
import { SaascannonProvider, useSaascannon } from "@saascannon/spa-react";

const saascannonConfig = {
  domain: "your-tenant.region.saascannon.app",
  clientId: "your-client-id",
  redirectUri: "http://localhost:3000/callback",
};

const Profile = () => {
  const { user, logoutViaRedirect, loginViaRedirect, shopManagement } = useSaascannon();

  return (
    <div>
      <h1>Welcome {user?.name || "Guest"}</h1>
      {user 
        ? <>
            <button onClick={() => logoutViaRedirect()}>Logout</button>
            <button onClick={() => shopManagement.open()}>Manage My Subscriptions</button>
          <>
        : <button onClick={() => loginViaRedirect()}>Login</button>
      }
    </div>
  );
};

const App = () => (
  <SaascannonProvider config={saascannonConfig} loading={<div>Loading...</div>}>
    <Profile />
  </SaascannonProvider>
);

export default App;