@descope/web-component
Advanced tools
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
npm install @descope/web-component
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"/>
)
}
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>
<descope-wc project-id="<project-id>" flow-id="<flow-id>"></descope-wc>
To run the example:
pnpm icd packages/web-component.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>
pnpm run startNOTE: 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).
| 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" |
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 respectivelyUsage 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;
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
Descope WC
The npm package @descope/web-component receives a total of 13,295 weekly downloads. As such, @descope/web-component popularity was classified as popular.
We found that @descope/web-component demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
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.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.
Security News
Research
Socket researchers found a malicious Maven package impersonating the legitimate ‘XZ for Java’ library, introducing a backdoor for remote code execution.