@descope/web-component
TypeScript icon, indicating that this package has built-in type declarations

3.1.4 • Public • Published

@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:

  1. Clone the repo
  2. Install dependencies pnpm i
  3. Go to package directory cd packages/web-component
  4. 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>
  1. 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"
preview "true" - Run flow in a preview mode"false" - Do run flow in a preview mode "false"
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"
storage-prefix String - A prefix to add to the key of the local storage when persisting tokens ""

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: 'No es posible iniciar sesión en este momento, por favor intenta nuevamente más tarde',
  };
  return translationMap[error.type] || error.text;
}

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

descopeWcEle.errorTransformer = translateError;

logger - An object that defines how to log error, warning and info. Defaults to console.error, console.warn and console.info respectively

Usage example:

const logger = {
  info: (message: string, description: string, state: any) => {
    console.log(message, description);
  },
  warn: (title: string, description: string) => {
    console.warn(`WARN: ${title}`, description);
  },
  error: (title: string, description: string) => {
    console.error(`ERROR: ${title}`, description);
  },
};

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

descopeWcEle.logger = logger;

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)}`));

Readme

Keywords

none

Package Sidebar

Install

npm i @descope/web-component

Weekly Downloads

7,272

Version

3.1.4

License

MIT

Unpacked Size

128 kB

Total Files

8

Last publish

Collaborators

  • nirgur
  • barsdescope
  • omercnet
  • nitz-descope