3.27.3 • Published 2 months ago

@descope/web-component v3.27.3

Weekly downloads
-
License
MIT
Repository
github
Last release
2 months ago

@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-id="myProjectId"/>
  )
}

In HTML file

  • Copy the file @descope/web-component/dist/index.js rename it to descope-wc.js and place it where your HTML file is located

  • Add the following script tag to your HTML file

<head>
  <script src="./descope-wc.js"></script>
</head>
  • Now you can add the custom element to your HTML
<descope-wc project-id="<project-id>" flow-id="<flow-id>" form='{ "email": "predefinedname@domain.com", "myCustomInput": "12" }' client='{ "browserVersion": window.navigator.appVersion }'></descope-wc>
  • Note: the form and client are optional parameters to add additional information that can be used in the flow. For more information click here.

Run Example

To run the example:

  1. Install dependencies pnpm i
  2. 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 / pnpm run start-web-sample

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 / pnpm run start-web-sample (this is a temporary solution until we improve the process to fit to monorepo).

Optional Attributes

AttributeAvailable optionsDefault value
base-urlCustom 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-prefixString - A prefix to add to the key of the local storage when persisting tokens""
store-last-authenticated-user"true" - Stores last-authenticated user details in local storage when flow is completed"false" - Do not store last-auth user details. Disabling this flag may cause last-authenticated user features to not function properly"true"
keep-last-authenticated-user-after-logout"true" - Do not clear the last authenticated user details from the browser storage after logout"false" - Clear the last authenticated user details from the browser storage after logout"false"
style-id"String" - Set a specific style to load rather then the default style""

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

ready - Fired when the page is ready.

This event is useful for showing/hiding a loading indication before the page is loading. Note: in cases where the flow involves redirection to a non-initial stage of the process, such as with Magic Link or OAuth, this event is also dispatched.

Usage example:

const descopeWcEle = document.getElementsByTagName('descope-wc')[0];
descopeWcEle.addEventListener('ready', () => {
  // Remove/hide the loading indication
});
3.27.1

2 months ago

3.27.3

2 months ago

3.27.2

2 months ago

3.27.0

2 months ago

3.26.0

2 months ago

3.25.3

3 months ago

3.25.2

3 months ago

3.25.1

3 months ago

3.25.0

3 months ago

3.24.2

3 months ago

3.24.1

4 months ago

3.24.0

4 months ago

3.13.2

7 months ago

3.13.1

7 months ago

3.13.3

7 months ago

3.12.1

7 months ago

3.12.0

7 months ago

3.14.1

7 months ago

3.14.0

7 months ago

3.13.0

7 months ago

3.22.0

5 months ago

3.22.2

5 months ago

3.22.1

5 months ago

3.19.4

5 months ago

3.19.3

6 months ago

3.19.6

5 months ago

3.19.5

5 months ago

3.19.8

5 months ago

3.19.7

5 months ago

3.19.9

5 months ago

3.19.0

6 months ago

3.19.2

6 months ago

3.19.1

6 months ago

3.23.1

4 months ago

3.23.0

4 months ago

3.12.3

7 months ago

3.12.2

7 months ago

3.12.5

7 months ago

3.12.4

7 months ago

3.12.7

7 months ago

3.12.6

7 months ago

3.12.9

7 months ago

3.12.8

7 months ago

3.23.2

4 months ago

3.19.10

5 months ago

3.20.0

5 months ago

3.20.2

5 months ago

3.20.1

5 months ago

3.20.3

5 months ago

3.17.6

6 months ago

3.17.5

6 months ago

3.17.0

6 months ago

3.17.2

6 months ago

3.17.1

6 months ago

3.17.4

6 months ago

3.17.3

6 months ago

3.21.1

5 months ago

3.21.0

5 months ago

3.12.10

7 months ago

3.18.1

6 months ago

3.18.0

6 months ago

3.18.3

6 months ago

3.18.2

6 months ago

3.11.24

7 months ago

3.11.25

7 months ago

3.15.0

7 months ago

3.15.2

6 months ago

3.15.1

7 months ago

3.15.4

6 months ago

3.15.3

6 months ago

3.15.6

6 months ago

3.15.5

6 months ago

3.16.6

6 months ago

3.16.1

6 months ago

3.16.0

6 months ago

3.16.3

6 months ago

3.16.2

6 months ago

3.16.5

6 months ago

3.16.4

6 months ago

3.11.23

7 months ago

3.11.20

7 months ago

3.11.22

7 months ago

3.11.21

7 months ago

3.11.19

7 months ago

3.11.18

7 months ago

3.11.17

7 months ago

3.11.16

7 months ago

3.11.15

8 months ago

3.11.13

8 months ago

3.11.14

8 months ago

3.11.12

8 months ago

3.11.11

8 months ago

3.11.10

8 months ago

3.11.9

8 months ago

3.11.6

8 months ago

3.11.8

8 months ago

3.11.7

8 months ago

3.11.4

8 months ago

3.11.3

8 months ago

3.11.5

8 months ago

3.11.2

8 months ago

3.11.1

8 months ago

3.10.1

8 months ago

3.10.2

8 months ago

3.11.0

8 months ago

3.10.0

8 months ago

3.9.0

8 months ago

3.8.40

9 months ago

3.8.39

9 months ago

3.8.38

9 months ago

3.8.37

9 months ago

3.8.36

9 months ago

3.8.35

9 months ago

3.8.34

9 months ago

3.8.33

9 months ago

3.8.32

9 months ago

3.8.30

9 months ago

3.8.31

9 months ago

3.8.27

9 months ago

3.8.28

9 months ago

3.8.25

9 months ago

3.8.26

9 months ago

3.8.23

9 months ago

3.8.24

9 months ago

3.8.21

9 months ago

3.8.22

9 months ago

3.8.29

9 months ago

3.8.20

9 months ago

3.8.19

9 months ago

3.8.16

9 months ago

3.8.17

9 months ago

3.8.18

9 months ago

3.8.14

9 months ago

3.8.15

9 months ago

3.8.12

9 months ago

3.8.13

9 months ago

3.8.11

9 months ago

3.8.10

10 months ago

3.8.9

10 months ago

3.8.8

10 months ago

3.8.7

10 months ago

3.8.6

10 months ago

3.8.5

10 months ago

3.8.4

10 months ago

3.8.3

10 months ago

3.8.2

10 months ago

3.8.1

11 months ago

3.8.0

11 months ago

3.7.6

11 months ago

3.7.5

11 months ago

3.7.4

11 months ago

3.7.3

11 months ago

3.7.2

11 months ago

3.7.1

11 months ago

3.7.0

12 months ago

3.6.0

12 months ago

3.5.0

12 months ago

3.4.4

12 months ago

3.4.3

12 months ago

3.4.2

12 months ago

3.4.1

1 year ago

3.4.0

1 year ago

3.3.1

1 year ago

3.3.0

1 year ago

3.2.0

1 year ago

3.1.6

1 year ago

3.1.5

1 year ago

3.1.3

1 year ago

3.1.4

1 year ago

3.0.0-alpha.6

1 year ago

2.11.0

1 year ago

2.11.1

1 year ago

3.0.0-alpha.1

1 year ago

3.0.0-alpha.3

1 year ago

3.0.0-alpha.2

1 year ago

3.0.0-alpha.5

1 year ago

2.8.1

1 year ago

3.0.0-alpha.4

1 year ago

2.8.0

1 year ago

2.11.8

1 year ago

2.5.6

1 year ago

2.11.6

1 year ago

2.11.7

1 year ago

2.5.7

1 year ago

2.11.4

1 year ago

2.11.5

1 year ago

2.11.2

1 year ago

2.11.3

1 year ago

2.10.0

1 year ago

2.7.0

1 year ago

2.7.2

1 year ago

2.7.1

1 year ago

3.1.2

1 year ago

3.1.1

1 year ago

3.1.0

1 year ago

2.8.3

1 year ago

2.8.2

1 year ago

2.8.5

1 year ago

2.8.4

1 year ago

2.8.7

1 year ago

2.8.6

1 year ago

2.8.9

1 year ago

2.8.8

1 year ago

2.6.1

1 year ago

2.6.0

1 year ago

2.6.3

1 year ago

2.6.2

1 year ago

3.0.0

1 year ago

2.9.0

1 year ago

2.8.12

1 year ago

2.8.11

1 year ago

2.8.10

1 year ago

2.6.4

1 year ago

2.5.5

1 year ago

2.5.4

2 years ago

2.5.3

2 years ago

2.5.0

2 years ago

2.5.2

2 years ago

2.5.1

2 years ago

2.0.28

2 years ago

2.4.1

2 years ago

2.4.0

2 years ago

2.4.3

2 years ago

2.4.2

2 years ago

2.4.5

2 years ago

2.4.4

2 years ago

2.3.0

2 years ago

2.3.2

2 years ago

2.3.1

2 years ago

2.3.4

2 years ago

2.3.3

2 years ago

2.3.6

2 years ago

2.3.5

2 years ago

2.2.1

2 years ago

2.2.0

2 years ago

2.2.3

2 years ago

2.2.2

2 years ago

2.2.5

2 years ago

2.2.4

2 years ago

2.3.8

2 years ago

2.3.7

2 years ago

2.3.9

2 years ago

2.1.0

2 years ago

2.0.26

2 years ago

2.0.27

2 years ago

2.0.24

2 years ago

2.0.25

2 years ago

2.3.12

2 years ago

2.3.11

2 years ago

2.3.10

2 years ago

2.0.15

2 years ago

2.0.16

2 years ago

2.0.19

2 years ago

2.0.17

2 years ago

2.0.18

2 years ago

2.0.22

2 years ago

2.0.23

2 years ago

2.0.20

2 years ago

2.0.21

2 years ago

2.0.13

2 years ago

2.0.14

2 years ago

2.0.7

2 years ago

2.0.6

2 years ago

2.0.9

2 years ago

2.0.8

2 years ago

2.0.11

2 years ago

2.0.12

2 years ago

2.0.10

2 years ago

2.0.5

2 years ago

2.0.3

2 years ago

2.0.2

2 years ago

2.0.4

2 years ago

2.0.1

2 years ago

2.0.0

2 years ago

0.1.0-alpha.23

2 years ago

0.1.0-alpha.25

2 years ago

0.1.0-alpha.24

2 years ago

0.1.0-alpha.27

2 years ago

0.1.0-alpha.26

2 years ago

0.1.0-alpha.29

2 years ago

0.1.0-alpha.28

2 years ago

0.1.0

2 years ago

0.1.2

2 years ago

0.1.1

2 years ago

0.1.4

2 years ago

0.1.3

2 years ago

0.1.0-alpha.30

2 years ago

0.1.0-alpha.32

2 years ago

0.1.0-alpha.31

2 years ago

0.1.0-alpha.34

2 years ago

0.1.0-alpha.33

2 years ago

0.1.0-alpha.36

2 years ago

0.1.0-alpha.35

2 years ago

0.1.0-alpha.38

2 years ago

0.1.0-alpha.37

2 years ago

0.1.0-alpha.39

2 years ago

0.1.0-alpha.41

2 years ago

0.1.0-alpha.40

2 years ago

0.1.0-alpha.42

2 years ago

0.1.0-alpha.12

2 years ago

0.1.0-alpha.14

2 years ago

0.1.0-alpha.13

2 years ago

0.1.0-alpha.16

2 years ago

0.1.0-alpha.15

2 years ago

0.1.0-alpha.18

2 years ago

0.1.0-alpha.17

2 years ago

0.1.0-alpha.19

2 years ago

0.1.0-alpha.21

2 years ago

0.1.0-alpha.20

2 years ago

0.1.0-alpha.22

2 years ago

0.1.0-alpha.11

2 years ago

0.1.0-alpha.10

2 years ago

0.1.0-alpha.9

2 years ago

0.1.0-alpha.8

2 years ago

0.1.0-alpha.7

2 years ago

0.1.0-alpha.6

2 years ago

0.1.0-alpha.5

2 years ago

0.1.0-alpha.4

2 years ago

0.1.0-alpha.3

2 years ago

0.1.0-alpha.2

2 years ago

1.0.0

2 years ago

0.1.0-alpha.1

2 years ago

0.1.0-alpha.0

2 years ago

0.0.26-alpha.14

2 years ago

0.0.26-alpha.13

2 years ago

0.0.26-alpha.10

2 years ago

0.0.26-alpha.11

2 years ago

0.0.26-alpha.12

2 years ago

0.0.26-alpha.9

2 years ago

0.0.26-alpha.8

2 years ago

0.0.26-alpha.7

2 years ago

0.0.26-alpha.6

2 years ago

0.0.26-alpha.5

2 years ago

0.0.26-alpha.4

2 years ago

0.0.26-alpha.3

2 years ago

0.0.26-alpha.2

2 years ago

0.0.26-alpha.1

2 years ago

0.0.26-alpha.0

2 years ago

0.0.25

2 years ago