\n\n
\n\n---\n\n## Overview\n\nThe `@slashid/docusaurus-theme-slashid` package extends [@docusaurus/preset-classic](https://docusaurus.io/docs/using-plugins#docusauruspreset-classic) to add authentication to websites generated using Docusaurus.\n\nKey Features:\n\n- **Compatible:** Supports Magic Links, Passkeys, OTP via sms and SSO.\n- **Personalization:** Allows to load per-user configuration data into docusaurus.\n\n## Installation\n\nTheme:\n\n```bash\n# npm\nnpm install @slashid/slashid @slashid/react @slashid/docusaurus-theme-slashid\n# yarn\nyarn add @slashid/slashid @slashid/react @slashid/docusaurus-theme-slashid\n```\n\n## Configuring `docusaurus.config.js`\n\nAdd the following to `docusaurus.config.js` to start using the theme:\n\n```js\n// docusaurus.config.js\n\n{\n ...\n\n themeConfig:\n /** @type {import('@docusaurus/preset-classic').ThemeConfig} */\n ({\n ...\n slashID: {\n orgID: \"your slash id org id\",\n forceLogin: \"boolean flag to determine if login is required\",\n baseURL: \"optional base API URL for the SDK, defaults to the production environment\",\n sdkURL: \"optional base SDK page URL for the SDK, defaults to the production environment\",\n privatePaths: [\n {\n path: \"a glob or a regex specifiying the path to protect\",\n groups: [\"optional list of groups that can access the path\"],\n }\n ],\n formConfiguration: {\n // authentication methods presented to end users\n factors: [{ method: \"email_link\" }],\n // logo you want to display on the login form\n logo: \"\n\n
\n\n---\n\n## Overview\n\nThe `@slashid/docusaurus-theme-slashid` package extends [@docusaurus/preset-classic](https://docusaurus.io/docs/using-plugins#docusauruspreset-classic) to add authentication to websites generated using Docusaurus.\n\nKey Features:\n\n- **Compatible:** Supports Magic Links, Passkeys, OTP via sms and SSO.\n- **Personalization:** Allows to load per-user configuration data into docusaurus.\n\n## Documentation\n\nFor detailed setup & usage instructions, please check the [documentation in our developer portal](https://developer.slashid.dev/docs/access/integrations/docusaurus-login). Below you'll find a short summary of steps required to get started quickly.\n\n## Installation\n\nTheme:\n\n```bash\n# npm\nnpm install @slashid/docusaurus-theme-slashid\n# yarn\nyarn add @slashid/docusaurus-theme-slashid\n```\n\n## Configuring `docusaurus.config.js`\n\nAfter installing the app and [signing up with SlashID](https://console.slashid.dev/signup) go through the following steps in order.\n\n### Adding the styles\n\nInclude the login form styles:\n\n```js\n// under presets\n\n{\n theme: {\n customCss: [\n require.resolve(\"@slashid/react/style.css\"), // add this line\n ],\n }\n}\n```\n\n### Adding the Auth button\n\nYou can render a button in the navbar to allow customers to log in. To do so, add this item to the `navbar.items` field in the `themeConfig`:\n\n```js\n{\n // ...\n themeConfig: ({\n // ...\n navbar: {\n // ...\n items: [\n // ...\n {\n type: \"custom-AuthButton\",\n position: \"right\",\n className: \"button button--secondary button--lg\",\n },\n ],\n },\n });\n}\n```\n\n### Configure the theme\n\nAdd the following to the `themeConfig` in `docusaurus.config.js`:\n\n```js\n// docusaurus.config.js\n\n{\n ...\n\n themeConfig:\n /** @type {import('@docusaurus/preset-classic').ThemeConfig} */\n ({\n ...\n slashID: {\n orgID: \"your slash id org id\",\n forceLogin: \"boolean flag to determine if login is required\",\n baseURL: \"optional base API URL for the SDK, defaults to the production environment\",\n sdkURL: \"optional base SDK page URL for the SDK, defaults to the production environment\",\n privatePaths: [\n {\n path: \"a glob or a regex specifiying the path to protect\",\n groups: [\"optional list of groups that can access the path\"],\n }\n ],\n formConfiguration: {\n // authentication methods presented to end users\n factors: [{ method: \"email_link\" }],\n // logo you want to display on the login form\n logo: \"\n\n
\n\n---\n\n## Overview\n\nThe `@slashid/docusaurus-theme-slashid` package extends [@docusaurus/preset-classic](https://docusaurus.io/docs/using-plugins#docusauruspreset-classic) to add authentication to websites generated using Docusaurus.\n\nKey Features:\n\n- **Compatible:** Supports Magic Links, Passkeys, OTP via sms and SSO.\n- **Personalization:** Allows to load per-user configuration data into docusaurus.\n\n## Documentation\n\nFor detailed setup & usage instructions, please check the [documentation in our developer portal](https://developer.slashid.dev/docs/access/integrations/docusaurus-login). Below you'll find a short summary of steps required to get started quickly.\n\n## Installation\n\nTheme:\n\n```bash\n# npm\nnpm install @slashid/docusaurus-theme-slashid\n# yarn\nyarn add @slashid/docusaurus-theme-slashid\n```\n\n## Configuring `docusaurus.config.js`\n\nAfter installing the app and [signing up with SlashID](https://console.slashid.dev/signup) go through the following steps in order.\n\n### Adding the styles\n\nInclude the login form styles:\n\n```js\n// under presets\n\n{\n theme: {\n customCss: [\n require.resolve(\"@slashid/react/style.css\"), // add this line\n ],\n }\n}\n```\n\n### Adding the Auth button\n\nYou can render a button in the navbar to allow customers to log in. To do so, add this item to the `navbar.items` field in the `themeConfig`:\n\n```js\n{\n // ...\n themeConfig: ({\n // ...\n navbar: {\n // ...\n items: [\n // ...\n {\n type: \"custom-AuthButton\",\n position: \"right\",\n className: \"button button--secondary button--lg\",\n },\n ],\n },\n });\n}\n```\n\n### Configure the theme\n\nAdd the following to the `themeConfig` in `docusaurus.config.js`:\n\n```js\n// docusaurus.config.js\n\n{\n ...\n\n themeConfig:\n /** @type {import('@docusaurus/preset-classic').ThemeConfig} */\n ({\n ...\n slashID: {\n orgID: \"your slash id org id\",\n forceLogin: \"boolean flag to determine if login is required\",\n baseURL: \"optional base API URL for the SDK, defaults to the production environment\",\n sdkURL: \"optional base SDK page URL for the SDK, defaults to the production environment\",\n privatePaths: [\n {\n path: \"a glob or a regex specifiying the path to protect\",\n groups: [\"optional list of groups that can access the path\"],\n }\n ],\n formConfiguration: {\n // authentication methods presented to end users\n factors: [{ method: \"email_link\" }],\n // logo you want to display on the login form\n logo: \"\n\n
\n\n---\n\n## Overview\n\nThe `@slashid/docusaurus-theme-slashid` package extends [@docusaurus/preset-classic](https://docusaurus.io/docs/using-plugins#docusauruspreset-classic) to add authentication to websites generated using Docusaurus.\n\nKey Features:\n\n- **Compatible:** Supports Magic Links, Passkeys, OTP via sms and SSO.\n- **Personalization:** Allows to load per-user configuration data into docusaurus.\n\n## Documentation\n\nFor detailed setup & usage instructions, please check the [documentation in our developer portal](https://developer.slashid.dev/docs/access/integrations/docusaurus-login). Below you'll find a short summary of steps required to get started quickly.\n\n## Installation\n\nTheme:\n\n```bash\n# npm\nnpm install @slashid/docusaurus-theme-slashid\n# yarn\nyarn add @slashid/docusaurus-theme-slashid\n```\n\n## Configuring `docusaurus.config.js`\n\nAfter installing the app and [signing up with SlashID](https://console.slashid.dev/signup) go through the following steps in order.\n\n### Adding the styles\n\nInclude the login form styles:\n\n```js\n// under presets\n\n{\n theme: {\n customCss: [\n require.resolve(\"@slashid/react/style.css\"), // add this line\n ],\n }\n}\n```\n\n### Adding the Auth button\n\nYou can render a button in the navbar to allow customers to log in. To do so, add this item to the `navbar.items` field in the `themeConfig`:\n\n```js\n{\n // ...\n themeConfig: ({\n // ...\n navbar: {\n // ...\n items: [\n // ...\n {\n type: \"custom-AuthButton\",\n position: \"right\",\n className: \"button button--secondary button--lg\",\n },\n ],\n },\n });\n}\n```\n\n### Configure the theme\n\nAdd the following to the `themeConfig` in `docusaurus.config.js`:\n\n```js\n// docusaurus.config.js\n\n{\n ...\n\n themeConfig:\n /** @type {import('@docusaurus/preset-classic').ThemeConfig} */\n ({\n ...\n slashID: {\n orgID: \"your slash id org id\",\n forceLogin: \"boolean flag to determine if login is required\",\n baseURL: \"optional base API URL for the SDK, defaults to the production environment\",\n sdkURL: \"optional base SDK page URL for the SDK, defaults to the production environment\",\n privatePaths: [\n {\n path: \"a glob or a regex specifiying the path to protect\",\n groups: [\"optional list of groups that can access the path\"],\n }\n ],\n formConfiguration: {\n // authentication methods presented to end users\n factors: [{ method: \"email_link\" }],\n // logo you want to display on the login form\n logo: \"\n\n
\n\n---\n\n## Overview\n\nThe `@slashid/docusaurus-theme-slashid` package extends [@docusaurus/preset-classic](https://docusaurus.io/docs/using-plugins#docusauruspreset-classic) to add authentication to websites generated using Docusaurus.\n\nKey Features:\n\n- **Compatible:** Supports Magic Links, Passkeys, OTP via sms and SSO.\n- **Personalization:** Allows to load per-user configuration data into docusaurus.\n\n## Documentation\n\nFor detailed setup & usage instructions, please check the [documentation in our developer portal](https://developer.slashid.dev/docs/access/integrations/docusaurus-login). Below you'll find a short summary of steps required to get started quickly.\n\n## Installation\n\nTheme:\n\n```bash\n# npm\nnpm install @slashid/docusaurus-theme-slashid\n# yarn\nyarn add @slashid/docusaurus-theme-slashid\n```\n\n## Configuring `docusaurus.config.js`\n\nAfter installing the app and [signing up with SlashID](https://console.slashid.dev/signup) go through the following steps in order.\n\n### Adding the styles\n\nInclude the login form styles:\n\n```js\n// under presets\n\n{\n theme: {\n customCss: [\n require.resolve(\"@slashid/react/style.css\"), // add this line\n ],\n }\n}\n```\n\n### Adding the Auth button\n\nYou can render a button in the navbar to allow customers to log in. To do so, add this item to the `navbar.items` field in the `themeConfig`:\n\n```js\n{\n // ...\n themeConfig: ({\n // ...\n navbar: {\n // ...\n items: [\n // ...\n {\n type: \"custom-AuthButton\",\n position: \"right\",\n className: \"button button--secondary button--lg\",\n },\n ],\n },\n });\n}\n```\n\n### Configure the theme\n\nAdd the following to the `themeConfig` in `docusaurus.config.js`:\n\n```js\n// docusaurus.config.js\n\n{\n ...\n\n themeConfig:\n /** @type {import('@docusaurus/preset-classic').ThemeConfig} */\n ({\n ...\n slashID: {\n orgID: \"your slash id org id\",\n forceLogin: \"boolean flag to determine if login is required\",\n baseURL: \"optional base API URL for the SDK, defaults to the production environment\",\n sdkURL: \"optional base SDK page URL for the SDK, defaults to the production environment\",\n privatePaths: [\n {\n path: \"a glob or a regex specifiying the path to protect\",\n groups: [\"optional list of groups that can access the path\"],\n }\n ],\n formConfiguration: {\n // authentication methods presented to end users\n factors: [{ method: \"email_link\" }],\n // logo you want to display on the login form\n logo: \"