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

@descope/web-component

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@descope/web-component

Descope WC

2.7.1
Source
npm

Version published: last year

Maintainers: 4

Created: 2 years ago

Source

@descope/web-component

Create your login pages on our console-app, once done, you can use this library to inject those pages to your app
it registers- a web component and update the web-component content based on the relevant page, See usage example below

Usage

Install the package

npm install @descope/web-component

As a library

import '@descope/web-component' // This import will define `descope-wc` custom element
import { DescopeWc } // In case you need types definition or you want to use the class directly

// Render Descope Web Component, for example:
render(){
  return (
    <descope-wc project="myProjectId"/>
  )
}

In HTML file

Copy the file @descope/web-js/sdk/dist/descope-wc.js and place it where your HTML file is located
Add the following script tag to your HTML file

<head>
  <script src="./my-lib.umd.production.min.js"></script>
</head>

Now you can add the custom element to your HTML

<descope-wc project-id="<project-id>" flow-id="<flow-id>"></descope-wc>

Run Example

To run the example:

Clone the repo
Install dependencies pnpm i
Go to package directory cd packages/web-component
Create a .env file and the following variables:

// .env
# Descope Project ID
DESCOPE_PROJECT_ID=<project-id>
# Flow ID to run, e.g. sign-up-or-in
DESCOPE_FLOW_ID=<flow-id>
# Optional - Descope base URL
DESCOPE_BASE_URL
# Optional - Descope locale (according to the target locales configured in the flow)
DESCOPE_LOCALE=<locale>

Run the sample pnpm run start

NOTE: This package is a part of a monorepo. so if you make changes in a dependency, you will have to rerun npm run start (this is a temporary solution until we improve the process to fit to monorepo).

Optional Attributes

Attribute	Available options	Default value
base-url	Custom Descope base URL	""
theme	"light" - Light theme "dark" - Dark theme "os" - Auto select a theme based on the OS theme settings	"light"
debug	"true" - Enable debugger "false" - Disable debugger	"false"
telemetryKey	String - Telemetry public key provided by Descope Inc	""
auto-focus	"true" - Automatically focus on the first input of each screen "false" - Do not automatically focus on screen's inputs "skipFirstScreen" - Automatically focus on the first input of each screen, except first screen	"true"

Optional Properties

`errorTransformer` - A function that receives an error object and returns a string. The returned string will be displayed to the user.

The function can be used to translate error messages to the user's language or to change the error message.

Usage example:

function translateError(error) {
  const translationMap = {
    SAMLStartFailed: 'לא ניתן להתחבר כרגע, אנא נסה שוב מאוחר יותר',
  };
  return translationMap[error.type] || error.text;
}

const descopeWcEle = document.getElementsByTagName('descope-wc')[0];

descopeWcEle.errorTransformer = translateError;

Events

`error` - Fired when an error occurs. The event detail contains the error object.

Usage example:

const descopeWcEle = document.getElementsByTagName('descope-wc')[0];
descopeWcEle.addEventListener('error', (e) => alert(`Error! - ${e.detail.errorMessage}`));

`success` - Fired when the flow is completed successfully. The event detail contains the flow result.

Usage example:

const descopeWcEle = document.getElementsByTagName('descope-wc')[0];
descopeWcEle.addEventListener('success', (e) => alert(`Success! - ${JSON.stringify(e.detail)}`));

FAQs

What is @descope/web-component?

Is @descope/web-component well maintained?

Package last updated on 08 Aug 2023

Did you know?

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

@descope/web-component

@descope/web-component

Usage

Install the package

As a library

In HTML file

Run Example

Optional Attributes

Optional Properties

errorTransformer - A function that receives an error object and returns a string. The returned string will be displayed to the user.

Events

error - Fired when an error occurs. The event detail contains the error object.

success - Fired when the flow is completed successfully. The event detail contains the flow result.

Related posts

Malicious npm Package Targets Solana Developers and Hijacks Funds

Typosquatting Cryptographic Libraries: Malicious npm Packages Threaten Crypto Developers with Keylogging and Wallet Theft

`errorTransformer` - A function that receives an error object and returns a string. The returned string will be displayed to the user.

`error` - Fired when an error occurs. The event detail contains the error object.

`success` - Fired when the flow is completed successfully. The event detail contains the flow result.