Allow HTTP options (#468)

Allow setting `fetchOptions` to `useAudiences` and `AudienceEditor`, so
client apps can use a remote audiences service with proper
authentication.

audiences-react/docs/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Unreleased
 
+# Version 1.4.0 (2024-12-18)
+
+- Allow setting fetch options to all API [#468](https://github.com/powerhome/audiences/pull/468)
+
 # Version 1.3.0 (2024-12-12)
 
 - Protect SCIM search from backend [#451](https://github.com/powerhome/audiences/pull/451)

audiences-react/docs/README.md

@@ -14,6 +14,16 @@ With everything in place, the usage should look like this:
 <AudienceEditor uri={audienceContextUri} scimUri={scimV2Uri} />
 ```
 
+You can also add arguments to the fetch calls, like headers:
+
+```jsx
+<AudienceEditor
+  uri={audienceContextUri}
+  scimUri={scimV2Uri}
+  fetchOptions={{ headers: { Authorization: "Bearer my-token" } }}
+/>
+```
+
 See [example](../src/example.tsx).
 
 ### Peer Dependencies

audiences-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "audiences",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Audiences SCIM client",
   "files": [
     "dist/*.*",

audiences-react/src/AudienceForm/index.tsx

@@ -15,13 +15,15 @@ type AudienceFormProps = {
   userResource: string
   groupResources: string[]
   allowIndividuals: boolean
+  fetchOptions: Parameters<typeof useAudiences>[1]
 }
 
 export const AudienceForm = ({
   uri,
   userResource,
   groupResources,
   allowIndividuals = true,
+  fetchOptions,
 }: AudienceFormProps) => {
   const [editing, setEditing] = useState<number>()
 
@@ -36,7 +38,7 @@ export const AudienceForm = ({
     reset,
     removeCriteria,
     updateCriteria,
-  } = useAudiences(uri)
+  } = useAudiences(uri, fetchOptions)
 
   const handleRemoveCriteria = (index: number) => {
     if (confirm("Remove criteria?")) {

audiences-react/src/audiences.ts

@@ -1,5 +1,5 @@
 import { useEffect } from "react"
-import useFetch, { CachePolicies } from "use-http"
+import useFetch, { CachePolicies, IncomingOptions } from "use-http"
 
 import useFormReducer, {
   RegistryAction,
@@ -16,7 +16,7 @@ type UpdateCriteriaAction = RegistryAction & {
   criterion: GroupCriterion
 }
 
-type UseAudienceContext = UseFormReducer<AudienceContext> & {
+export type UseAudienceContext = UseFormReducer<AudienceContext> & {
   saving: boolean
   save: () => void
   fetchUsers: (
@@ -28,14 +28,17 @@ type UseAudienceContext = UseFormReducer<AudienceContext> & {
   updateCriteria: (index: number, criteria: GroupCriterion) => void
 }
 
-export function useAudiences(uri: string): UseAudienceContext {
-  const { data } = useFetch(uri, [uri])
+export function useAudiences(
+  uri: string,
+  options: IncomingOptions = {},
+): UseAudienceContext {
+  const { data } = useFetch(uri, options, [uri])
   const {
     get,
     put,
     response,
     loading: saving,
-  } = useFetch(uri, { cachePolicy: CachePolicies.NO_CACHE })
+  } = useFetch(uri, { ...options, cachePolicy: CachePolicies.NO_CACHE })
   const criteriaForm = useFormReducer<AudienceContext>(data, {
     "remove-criteria": (
       context,

audiences-react/src/index.tsx

@@ -1,5 +1,6 @@
 import { AudienceForm } from "./AudienceForm"
 import Scim from "./scim"
+import { useAudiences } from "./audiences"
 
 const UserResourceId = "Users"
 const AllowedGroupIds = ["Territories", "Departments", "Titles"]
@@ -8,11 +9,13 @@ type AudienceEditorProps = {
   uri: string
   scimUri: string
   allowIndividuals?: boolean
+  fetchOptions?: Parameters<typeof useAudiences>[1]
 }
 export function AudienceEditor({
   uri,
   scimUri,
   allowIndividuals = true,
+  fetchOptions = {},
 }: AudienceEditorProps) {
   return (
     <Scim.Provider value={scimUri}>
@@ -21,6 +24,7 @@ export function AudienceEditor({
         userResource={UserResourceId}
         groupResources={AllowedGroupIds}
         allowIndividuals={allowIndividuals}
+        fetchOptions={fetchOptions}
       />
     </Scim.Provider>
   )