Skip to content

Commit 2e109d3

Browse files
jake-slashidjake-slashid
committed
3more
add web component compile target
1 parent 601cf37 commit 2e109d3

23 files changed

+1562
-129
lines changed

‎packages/react/.gitignore‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,4 +28,7 @@ storybook-static
2828

2929
# yalc
3030
.yalc
31-
yalc.lock
31+
yalc.lock
32+
33+
# vite hackery
34+
index.html

‎packages/react/README.web-component.md‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
## Usage
2+
3+
The SlashID form is available as a custom element: `<slashid-form>`.
4+
5+
There are two files which need to be included in your HTML document:
6+
1. `main.js`
7+
2. `style.css`
8+
9+
By nature of being a custom element, props follow the HTML specification so they must be strings.
10+
11+
To work around this limitation:
12+
- Provide boolean and number props as string, they're later parsed to their respective type.
13+
- Provide array and object props as stringified JSON, they will be parsed with `JSON.parse()` later.
14+
- Provide function props by first defining the function on `globalThis`, then providing the function name to the prop as a string.
15+
16+
Props are reactive, but keep in mind that reference checks for array and object types are not possible since they are stringified. Function references are not reactive, redefine the function on `globalThis` and provide the new name to the prop to achieve reactivity.
17+
18+
### Example
19+
```html
20+
<!DOCTYPE html>
21+
<html lang="en">
22+
<head>
23+
<meta charset="UTF-8" />
24+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
25+
<link rel="stylesheet" href="style.css">
26+
<title>Hello world</title>
27+
</head>
28+
<body>
29+
<script>
30+
function sidOnSuccess() {
31+
alert('Success!')
32+
}
33+
</script>
34+
35+
<slashid-form
36+
factors='[{ "method": "email_link" }]'
37+
oid="YOUR_ORG_ID"
38+
base-api-url="https://api.slashid.com"
39+
token-storage="memory"
40+
on-success="sidOnSuccess"
41+
analytics-enabled="true"
42+
></slashid-form>
43+
44+
<script type="module" src="main.js"></script>
45+
</body>
46+
</html>
47+
```
48+
49+
## Props
50+
51+
| Name | Type | Default | Description |
52+
|---------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
53+
| oid | `string` | | The organization ID you get when signing up with /id |
54+
| initialToken? | `string` | | Given a valid initial token, SDK will initialize with a `User` based on that token |
55+
| tokenStorage? | `"memory" \| "localStorage"` | `"memory"` | Where SlashID user tokens are stored. Set to `"localStorage"` to enable persistence. |
56+
| baseApiUrl? | `string` | `"https://api.sandbox.slashid.com"` | The base SlashID API endpoint |
57+
| sdkUrl? | `string` | `"https://cdn.sandbox.slashid.com/sdk.html"` | The location where your organization's custom SDK is served |
58+
| analyticsEnabled? | `boolean` | `true` | Enable collection of client side analytics events |
59+
| themeProps? | `{ theme?: Theme, className?: string}` | `{ theme: "auto" }` | Set the UI theme (`auto`, `light` or `dark`) and apply a CSS class name to the theme root |
60+
| logo? | `string` | Defaults to SlashID logo | The logo shown in the SlashID components, must be URL. |
61+
| text? | `Record<string, string>` | See [default](https://developer.slashid.dev/docs/access/react-sdk/reference/components/react-sdk-reference-configurationprovider#text-overrides). | Overrides for text shown in the SlashID components. |
62+
| factors? | [`FactorConfiguration[]`](https://developer.slashid.dev/docs/access/react-sdk/reference/components/react-sdk-reference-configurationprovider#type-factorconfiguration) | `[{ method: "webauthn" }, { method: "email_link" }]` | The [authentication methods](https://developer.slashid.dev/docs/access/sdk/interfaces/Types.Factor) to be used. |
63+
| storeLastHandle? | `boolean` | `false` | Flag where `true` means the handle type and value used in a successful log in action will be persisted in `window.localStorage`. |
64+
| defaultCountryCode? | `string` | `US` | Default country code to be used for the phone number input. Accepts an Alpha-2 ISO-3166 country code. |
65+
| onSuccess? | `(user: User) => void` | | Callback function that gets called with a User object returned from core SDK upon successful log in action. Note: callback functions must be defined in `globalThis`, this prop accepts the function name as `string`. |
66+
| onError? | `(error: Error, context: ErrorContext) => void` | | Callback function that gets called with a User object returned from core SDK upon log in action failure. Note: callback functions must be defined in `globalThis`, this prop accepts the function name as `string`. |
67+
| middleware? | [`LoginMiddleware`](https://developer.slashid.dev/docs/access/react-sdk/reference/middleware/react-sdk-reference-login-middleware) | | Effects to be run post-login but before `onSuccess` fires, and before the next render cycle. See [`LoginMiddleware`](https://developer.slashid.dev/docs/access/react-sdk/reference/middleware/react-sdk-reference-login-middleware) for more. |
68+
69+
## How does this work?
70+
71+
We are using [Web components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements) as an interopability interface only.
72+
73+
Internally, we mount a React app with three components from `@slashid/react`:
74+
- `<SlashIDProvider>`
75+
- `<ConfigurationProvider>`
76+
- `<Form>`
77+
78+
The available props are a subset of those available in `@slashid/react`.

‎packages/react/index.html‎

Lines changed: 0 additions & 29 deletions
This file was deleted.

‎packages/react/index.npm.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>@slashid/react (npm)</title>
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
<script type="module" src="/src/dev.tsx"></script>
11+
</body>
12+
</html>

‎packages/react/index.web-component.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>@slashid/react (web component)</title>
7+
</head>
8+
<body>
9+
<script>
10+
function sidOnSuccess() {
11+
alert('Success!')
12+
}
13+
</script>
14+
15+
<slashid-form
16+
factors='[{"method":"webauthn"},{"method":"email_link"},{"method":"otp_via_email"},{"method":"otp_via_sms"},{"method":"password"}]'
17+
theme-props='{ "theme": "dark" }'
18+
oid="%VITE_ORG_ID%"
19+
base-api-url="https://api.slashid.com"
20+
sdk-url="https://cdn.slashid.com/sdk.html"
21+
token-storage="memory"
22+
on-success="sidOnSuccess"
23+
analytics-enabled="true"
24+
success-indeterminate="true"
25+
></slashid-form>
26+
27+
<script type="module" src="/src/entry.web-component.tsx"></script>
28+
</body>
29+
</html>

‎packages/react/package.json‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,9 +39,15 @@
3939
"dist/*"
4040
],
4141
"scripts": {
42-
"dev": "vite",
42+
"html:npm": "cp ./index.npm.html ./index.html",
43+
"html:web-component": "cp ./index.web-component.html ./index.html",
44+
"dev": "echo 'Please specify the compile target i.e. dev:npm, dev:web-component, dev:storybook'",
45+
"dev:npm": "pnpm html:npm && vite -c vite.config.npm.ts",
46+
"dev:web-component": "pnpm html:web-component && vite -c vite.config.web-component.ts",
4347
"dev:storybook": "storybook dev -p 6006",
44-
"build": "vite build && tsc",
48+
"build": "echo 'Please specify the compile target i.e. build:npm, build:web-component, build:storybook'",
49+
"build:npm": "pnpm html:npm && vite -c vite.config.npm.ts build && tsc",
50+
"build:web-component": "pnpm html:web-component && vite -c vite.config.web-component.ts build && tsc",
4551
"build:storybook": "storybook build",
4652
"lint": "eslint ./src",
4753
"test:types": "tsc --noEmit --emitDeclarationOnly false",

‎packages/react/src/components/dynamic-flow/dynamic-flow.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { createTestUser, inputEmail } from "../test-utils";
66

77
import { TestSlashIDProvider } from "../../context/test-providers";
88
import { DynamicFlow } from ".";
9-
import { ConfigurationProvider } from "../../main";
9+
import { ConfigurationProvider } from "../../entry.npm";
1010

1111
describe("#DynamicFlow", () => {
1212
test("should render in the initial state", () => {

‎packages/react/src/components/form/authenticating/otp.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { OtpInput } from "@slashid/react-primitives";
1111

1212
import { useConfiguration } from "../../../hooks/use-configuration";
1313
import { useForm } from "../../../hooks/use-form";
14-
import { useSlashID } from "../../../main";
14+
import { useSlashID } from "../../../entry.npm";
1515
import { Props } from "./authenticating.types";
1616
import { getAuthenticatingMessage } from "./messages";
1717
import { OTP_CODE_LENGTH, isValidOTPCode } from "./validation";

‎packages/react/src/components/form/authenticating/password.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { FormEventHandler, useCallback, useEffect, useState } from "react";
22

33
import { useForm } from "../../../hooks/use-form";
4-
import { useSlashID } from "../../../main";
4+
import { useSlashID } from "../../../entry.npm";
55
import { Props } from "./authenticating.types";
66
import { ErrorMessage } from "../error-message";
77
import { Text } from "../../text";

‎packages/react/src/components/form/form-customisation.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { TestSlashIDProvider } from "../../context/test-providers";
44
import { createTestUser, inputEmail } from "../test-utils";
55
import { Slot } from "../slot";
66
import userEvent from "@testing-library/user-event";
7-
import { ConfigurationProvider } from "../../main";
7+
import { ConfigurationProvider } from "../../entry.npm";
88
import { useState } from "react";
99
import { Factor } from "@slashid/slashid";
1010
import { Handle } from "../../domain/types";

0 commit comments

Comments
 (0)