@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
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.
Access Saascannon Client Methods via
useSaascannon
HookInside 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:
Method | Description |
---|---|
user | Current authenticated user object, or null if not authenticated. |
loginViaRedirect | Initiates a login flow redirect. |
signupViaRedirect | Initiates a signup flow redirect. |
logoutViaRedirect | Logs out the user and redirects them as configured. |
getAccessToken | Returns an access token if the user is authenticated. |
hasPermissions | Checks if the user has specific permissions. |
accountManagement | Provides access to account management functions. |
shopManagement | Provides access to shop management functions. |
Configuration Options
The config object passed to SaascannonProvider includes:
Option | Type | Required | Description |
---|---|---|---|
domain | string | Yes | Your Saascannon domain. |
clientId | string | Yes | The Client ID associated with your application. |
redirectUri | string | Yes | The URI Saascannon redirects to after authentication. |
afterCallback | function | No | A callback that runs after authentication callback handling. |
oAuthErrorHandler | function | No | A handler function for OAuth errors. |
uiBaseUrl | string | No | Base URL for your Saascannon UI, if different from the domain. |
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;