Skip to content

Commit bfb9064

Browse files
jake-slashidjake-slashid
committed
add environment prop
1 parent 2bb8b8b commit bfb9064

File tree

2 files changed

+15
-15
lines changed

2 files changed

+15
-15
lines changed

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

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,32 +3,35 @@
33
The SlashID form is available as a custom element: `<slashid-form>`.
44

55
There are two files which need to be included in your HTML document:
6+
67
1. `main.js`
78
2. `style.css`
89

910
By nature of being a custom element, props follow the HTML specification so they must be strings.
1011

1112
To work around this limitation:
13+
1214
- Provide boolean and number props as string, they're later parsed to their respective type.
1315
- Provide array and object props as stringified JSON, they will be parsed with `JSON.parse()` later.
1416
- Provide function props by first defining the function on `globalThis`, then providing the function name to the prop as a string.
1517

1618
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.
1719

1820
### Example
21+
1922
```html
2023
<!DOCTYPE html>
2124
<html lang="en">
2225
<head>
2326
<meta charset="UTF-8" />
2427
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
25-
<link rel="stylesheet" href="style.css">
28+
<link rel="stylesheet" href="style.css" />
2629
<title>Hello world</title>
2730
</head>
2831
<body>
2932
<script>
3033
function sidOnSuccess() {
31-
alert('Success!')
34+
alert("Success!");
3235
}
3336
</script>
3437

@@ -49,11 +52,11 @@ Props are reactive, but keep in mind that reference checks for array and object
4952
## Props
5053

5154
| Name | Type | Default | Description |
52-
|---------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
55+
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
5356
| oid | `string` | | The organization ID you get when signing up with /id |
5457
| initialToken? | `string` | | Given a valid initial token, SDK will initialize with a `User` based on that token |
5558
| 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 |
59+
| environment? | `"production" \| "sandbox"` | `"production"` | The SlashID environment you wish to interact with to |
5760
| sdkUrl? | `string` | `"https://cdn.sandbox.slashid.com/sdk.html"` | The location where your organization's custom SDK is served |
5861
| analyticsEnabled? | `boolean` | `true` | Enable collection of client side analytics events |
5962
| 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 |
@@ -62,17 +65,18 @@ Props are reactive, but keep in mind that reference checks for array and object
6265
| 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. |
6366
| 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`. |
6467
| 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`. |
68+
| 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`. |
69+
| 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`. |
6770
| 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. |
6871

6972
## How does this work?
7073

7174
We are using [Web components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements) as an interopability interface only.
7275

7376
Internally, we mount a React app with three components from `@slashid/react`:
77+
7478
- `<SlashIDProvider>`
7579
- `<ConfigurationProvider>`
7680
- `<Form>`
7781

78-
The available props are a subset of those available in `@slashid/react`.
82+
The available props are a subset of those available in `@slashid/react`.

‎packages/react/src/entry.web-component.tsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,9 @@ type SlashIDFormInternalProps = Pick<
1919
| "oid"
2020
| "initialToken"
2121
| "tokenStorage"
22-
| "baseApiUrl"
23-
| "sdkUrl"
2422
| "analyticsEnabled"
2523
| "themeProps"
24+
| "environment"
2625
> &
2726
Pick<
2827
IConfigurationContext,
@@ -37,8 +36,7 @@ const SlashIDFormInternal = ({
3736
oid,
3837
initialToken,
3938
tokenStorage,
40-
baseApiUrl,
41-
sdkUrl,
39+
environment,
4240
analyticsEnabled,
4341
themeProps,
4442

@@ -63,8 +61,7 @@ const SlashIDFormInternal = ({
6361
oid={oid}
6462
initialToken={initialToken}
6563
themeProps={themeProps}
66-
baseApiUrl={baseApiUrl}
67-
sdkUrl={sdkUrl}
64+
environment={environment}
6865
tokenStorage={tokenStorage}
6966
analyticsEnabled={analyticsEnabled}
7067
>
@@ -106,10 +103,9 @@ const SlashIDForm = r2wc(SlashIDFormInternal, {
106103
oid: "string",
107104
initialToken: "string",
108105
tokenStorage: "string",
109-
baseApiUrl: "string",
110-
sdkUrl: "string",
111106
analyticsEnabled: "boolean",
112107
themeProps: "json",
108+
environment: "string",
113109

114110
// config provider
115111
logo: "string",

0 commit comments

Comments
 (0)