VanillaJS
VanillaJS
Learn how to add the Corbado UI components to your JavaScript application.
Installation
First, you need to set up a Corbado project. To get started with the integration, either install the Corbado web-js package via npm or add the JavaScript library via CDN.
Note: UI components added via CDN do currently not support icon coloring which may impact dark mode and other custom UI stylings.
Set up Corbado
As a prerequisite to all future actions, Corbado has to be loaded. We do this by using the Corbado.load function.
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
href="https://unpkg.com/@corbado/web-js@2/dist/bundle/index.css"
/>
<script src="https://unpkg.com/@corbado/web-js@2/dist/bundle/index.js"></script>
<body>
<script type="module">
await Corbado.load({
projectId: "pro-XXX"
});
</script>
</body>
</html>
Configuration
Most configuration is done in the . The following options are available:
Name | Type | Default | Description |
---|---|---|---|
projectId | string (e.g. pro-1234567890) | required | The ID of your Corbado project. This setting is mandatory and can be found in the Developer Panel. |
autoDetectLanguage | boolean | true | If set to true the language used in UI components will be derived from the browser. |
defaultLanguage | string | en | The default language to be used if auto-detection is disabled or fails. Corbado supports “en”, “de” and “fr”. You can define custom translations though. |
customTranslations | object | null | A map from language (e.g. “en”) to an object containing your custom translation overrides. Find more details here |
darkMode | on | off | auto | auto | Controls if your components are rendered in dark mode. If set to auto the darkMode setting will be derived from the browser. |
theme | string | undefined | Controls the style of your components. Currently, the only alternative theme that can be set here is emerald-funk . To create your own custom theme find all information here. |
customerSupportEmail | string | undefined | Email address for customer support in case of critical errors. |
isDevMode | boolean | false | If set to true, the UI components will log debug messages to console. |
frontendApiUrl | string | Set to your Frontend API URL | Please set this value when you go live to your defined CNAME. |
setShortSessionCookie | boolean | false | If set to true, a cbo_short_session cookie will be set automatically by the Corbado component for the current domain. This setting makes sense if you are running a full stack application (e.g. Next.js) or a multi page application (e.g. PHP). |
apiTimeout | number | 30000 | Front-end api timeout time in miliseconds |
Next
- Add authentication UI components to your application.
- Let your users manage their passkeys with the PasskeyList.
- Learn how you can access the users authentication state.
Was this page helpful?