Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@descope/audit-management-widget

Package Overview
Dependencies
Maintainers
0
Versions
99
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@descope/audit-management-widget

Descope audit management widget

  • 0.1.57
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
18K
increased by24.43%
Maintainers
0
Weekly downloads
 
Created
Source

@descope/audit-management-widget

Setup

Create an .env file

In the widget package create an .env file which includes;

DESCOPE_BASE_URL=   # env base url, default: "https://app.descope.com"
DESCOPE_PROJECT_ID= # your Descope's project ID
DESCOPE_TENANT=     # tenant ID
DEBUG_MODE=         # "true" / "false", default: "false"
DESCOPE_THEME=      # "light" / "dark" / "os", default: "light"
DESCOPE_WIDGET_ID=  # default: "audit-management-widget"

Example

<script src="https://cdn.jsdelivr.net/npm/@descope/audit-management-widget/dist/index.js"></script>
<descope-audit-management-widget
  base-url="<DESCOPE_BASE_URL>"
  project-id="<DESCOPE_PROJECT_ID>"
  tenant="<DESCOPE_TENANT>"
  debug="<DEBUG_MODE>"
  theme="<DESCOPE_THEME>"
  widget-id="<DESCOPE_WIDGET_ID>"
></descope-audit-management-widget>

Project Structure

  • /app - contains index.html
  • /lib - widget's source code
  • lib/widget - widget related implementations
  • lib/widget/api - Logic related to API calls
  • lib/widget/mixins - Widget specific logic
  • lib/widget/state - State management logic

API


Mixins

The widget is composed of mixins, each mixin contains specific logic parts, and sometime exposes an API that can be used in other mixins.

Mixins can be composed on top of each other, so we can create new mixins by composing several mixins together.

Mixins Creators

Functions that create mixins, can get a configuration, and returns the mixin functions.

Singleton Mixin

Since mixins are composable, in some cases we want to make sure a mixin is loaded only once. For example: When there is no need for its logic to run multiple times when composed in different mixins.

For this case we have a wrapper function (createSingletonMixin) to ensure that a mixin is loaded only once, regardless how many times it will be composed.

Mixins should be wrapped with the createSingletonMixin wrapper function, unless there is a reason for running the mixin's logic multiple times.

State

We're using several tools to handle the widget's state:

  • Redux Toolkit for the widget's state management.
  • Redux Thunk for API calls and async operations we're using
  • Reselect to compute derived data without hitting performance or triggering state recalculation when state is not mutated.

Drivers

An abstraction layer that provides an API for components, and enables handling interactions with components within the widget.

The motivation to use drivers is to decouple the widget's code from the component's implementation, and therefore it's important to interact with components only using drivers (and not relying on component's implementation details).

UI Components

Widget UI is composed of @descope/web-components-ui, which is loaded during the widget init in runtime.

For optimization, we load only the relevant components, defined on the widget screens DOM.

Dev

Use mock screens

Since screen are fetched dynamically, when developing a new screen for the widget you will probably want to use mock templates. To do so, simply replace the call to fetchWidgetPage with a string which includes your HTML.

Use local components

In some cases you want to make changes to components anf see how it affects the widget. To do so, you need to build web-components-ui and serve the dist folder from your machine (with npx serve or other util).

Add the key base.ui.components.url to your localStorage and set its value to the URL of the served dist umd/index.js file.

Pay attention that theme changes will not take affect until the components

FAQs

Package last updated on 26 Jun 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc