{"id":22787358,"url":"https://github.com/aserto-dev/aserto-react","last_synced_at":"2025-04-15T23:38:45.819Z","repository":{"id":47444897,"uuid":"323231761","full_name":"aserto-dev/aserto-react","owner":"aserto-dev","description":"Aserto React SDK","archived":false,"fork":false,"pushed_at":"2024-11-18T11:10:01.000Z","size":2771,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-29T02:41:59.969Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aserto-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-12-21T04:38:59.000Z","updated_at":"2024-11-18T11:10:06.000Z","dependencies_parsed_at":"2024-11-19T03:56:33.371Z","dependency_job_id":null,"html_url":"https://github.com/aserto-dev/aserto-react","commit_stats":{"total_commits":117,"total_committers":3,"mean_commits":39.0,"dds":0.03418803418803418,"last_synced_commit":"69af9c1f24518e10b6f411a3e06e453734879181"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aserto-dev%2Faserto-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aserto-dev%2Faserto-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aserto-dev%2Faserto-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aserto-dev%2Faserto-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aserto-dev","download_url":"https://codeload.github.com/aserto-dev/aserto-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249173059,"owners_count":21224481,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-12T00:54:22.728Z","updated_at":"2025-04-15T23:38:45.802Z","avatar_url":"https://github.com/aserto-dev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Aserto React SDK\n\nLoosely modeled after the [Auth0 React SDK](https://github.com/auth0/auth0-react).\n\nThis SDK uses the [Aserto javascript SPA SDK](https://github.com/aserto-dev/aserto-spa-js).\n\n## Installation\n\nUsing [npm](https://npmjs.org):\n\n```sh\nnpm install @aserto/aserto-react\n```\n\nUsing [yarn](https://yarnpkg.com):\n\n```sh\nyarn add @aserto/aserto-react\n```\n\n## Getting Started\n\nConfigure the SDK by wrapping your application in `AsertoProvider`. If using in conjunction with the `Auth0Provider`, `AsertoProvider` should be nested inside of it.\n\n```jsx\n// src/index.tsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { AsertoProvider } from '@aserto/aserto-react'\nimport { Auth0Provider } from '@auth0/auth0-react'\nimport App from './App'\n\nReactDOM.render(\n  \u003cAuth0Provider\n    domain=\"YOUR_AUTH0_DOMAIN\"\n    clientId=\"YOUR_AUTH0_CLIENT_ID\"\n    redirectUri={window.location.origin}\n  \u003e\n    \u003cAsertoProvider\u003e\n      \u003cApp /\u003e\n    \u003c/AsertoProvider\u003e\n  \u003c/Auth0Provider\u003e,\n  document.getElementById('app')\n);\n```\n\nUse the `useAserto` hook in your components to initialize (`init`), reload the display state map (`reload`) or to access its state (`loading`, `displayStateMap`, `getDisplayState`, etc):\n\n```jsx\n// src/App.js\nimport React from 'react'\nimport { useAserto } from '@aserto/aserto-react'\nimport { useAuth0 } from '@auth0/auth0-react'\n\nfunction App() {\n  const {\n    loading,         // true while the state is loading\n    isLoaded,        // true if the displayStateMap was loaded\n    error,           // error object (if initOptions.throwOnError is false)\n    identity,        // identity header to send to displaystatemap call\n    setIdentity,     // set the identity header\n    displayStateMap, // display state map\n    getDisplayState, // getDisplayState() function (see below)\n    init,            // init() function (see below)\n    reload           // reload() function (see below)\n  } = useAserto();\n\n  // the Aserto hook needs a valid access token.\n  // to use Auth0 to return an access token, you can use the following:\n  const { isLoading, isAuthenticated, getAccessTokenSilently } = useAuth0();\n\n  // use an effect to load the Aserto display state map\n  useEffect(() =\u003e {\n    async function load() {\n      const token = await getAccessTokenSilently();\n      if (token) {\n        await init({ accessToken: token });\n      }\n    }\n\n    // load the display state map when Auth0 has finished initializing\n    if (!isLoading \u0026\u0026 isAuthenticated) {\n      load();\n    }\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isAuthenticated]);\n\n  if (loading) {\n    return \u003cdiv\u003eLoading...\u003c/div\u003e;\n  }\n\n  if (error) {\n    return \u003cdiv\u003eError: {error}\u003c/div\u003e;\n  } else {\n    return (\n      \u003cdiv\u003e\n        {\n          // output the display state map as a string\n          displayStateMap\n        }\n      \u003c/div\u003e\n    );\n  }\n}\n\nexport default App\n```\n\n### init(options, body)\n\nInitialize the Aserto client using the (required) `options` map.\n\nIf the `body` parameter is passed in, it is passed through to the `AsertoClient` instance that will retrieve the display state map from the API endpoint (and used as the resource context for the `decisiontree` API call).\n\n```js\nconst { init, displayStateMap } = useAserto();\nawait init({\n  serviceUrl: 'http://service-url', // defaults to windows.location.origin\n  endpointName: '/__displaystatemap', // defaults to '/__displaystatemap'\n  accessToken: '\u003cVALID ACCESS TOKEN\u003e', // REQUIRED\n  throwOnError: true, // true: re-throw errors. false: set error object. defaults to true.\n  defaultDisplayState: { // an optional default display state (default values below)\n    visible: false,\n    enabled: false\n  }\n});\n\n// log the display state map to the console\nconsole.log(displayStateMap);\n```\n\n### reload(body, headers)\n\nRe-load the display state map for a service that exposes it.  \n\nIf the `body` parameter is passed in, it is passed through to the `AsertoClient` instance that will retrieve the display state map from the API endpoint (and used as the resource context for the `decisiontree` API call).\n\nIf the `headers` parameter is passed in, it is likewise passed through to the `AsertoClient` instance that will retrieve the display state map from the API endpoint.\n\nNote: `init()` must be called before `reload()`.\n\n```js\nconst { reload, displayStateMap } = useAserto();\nawait reload();\n\n// log the display state map to the console\nconsole.log(displayStateMap);\n```\n\n### identity and setIdentity\n\n- `setIdentity` can be used to set the identity to pass as an `identity` HTTP header.  It will override an `identity` header that is passed into `reload(headers)`.  This is the preferred way to send an identity to the displayStateMap API, which can be used to override the Authorization header by the `displayStateMap` middleware in the `express-jwt-aserto` Node.js SDK.\n- `identity` will return the current identity (or undefined if it hasn't been set).\n\n### getDisplayState('method, 'path')\n\nRetrieves a displayState associated with a specific resource.\n\nBy convention, the `method` argument is an HTTP method (GET, POST, PUT, DELETE), and the `path` argument is in the form `/path/to/resource`. It may contain a `__id` component to indicate an parameter - for example, `/mycars/__id`.\n\nIf only the `method` argument is passed in, it is assumed to be a key into the `displayStateMap` (typically in the form of `METHOD/path/to/resource`).\n\nThe returned map will be in the following format:\n```js\n{\n  visible: true,\n  enabled: false,\n}\n```\n\nNote: `init()` must be called before `getDisplayState()`.\n\n```js\nconst { getDisplayState } = useAserto();\nconst path = '/api/path';\n\n// retrieve visibility of an element\nconst isVisible = aserto.getDisplayState('GET', path).visible;\n\n// determine whether an update operation is enabled\nconst isUpdateEnabled = aserto.getDisplayState('PUT', path).enabled;\n\n// print out display state values for each verb on a resource\nfor (const verb of ['GET', 'POST', 'PUT', 'DELETE']) {\n  const resource = aserto.getDisplayState(verb, path));\n  for (const value of ['visible', 'enabled']) {\n    console.log(`${verb} ${path} ${value} is ${resource[verb][value]}`);\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faserto-dev%2Faserto-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faserto-dev%2Faserto-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faserto-dev%2Faserto-react/lists"}