@stytch/vanilla-js 0.0.2-0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/README.md +4 -4
  2. package/dist/index.d.ts +69 -3
  3. package/dist/index.esm.d.ts +69 -3
  4. package/dist/index.esm.js +5251 -1
  5. package/dist/index.headless.d.ts +13 -0
  6. package/dist/index.headless.esm.d.ts +13 -0
  7. package/dist/index.headless.esm.js +5415 -4
  8. package/dist/index.headless.js +5425 -4
  9. package/dist/index.js +5251 -1
  10. package/package.json +18 -8
package/README.md CHANGED
@@ -1,6 +1,5 @@
1
1
  # Stytch Javascript SDK
2
2
 
3
- [![npm version](https://img.shields.io/node/v/@stytch/stytch-js)](https://stytch.com/docs/javascript-sdk)
4
3
  [![Slack Link](https://img.shields.io/badge/chat-stytch.slack.com-FD4E43)](https://stytch.slack.com)
5
4
 
6
5
  ## Installation
@@ -26,9 +25,9 @@ const stytch = new StytchUIClient('public-token-test-xxxxxxxx-xxxx-xxxx-xxxx-xxx
26
25
  stytch.magicLinks.email.loginOrCreate('charles.babbage@example.com');
27
26
 
28
27
  // Render prebuilt UI
29
- stytch.mount({
28
+ stytch.mountLogin({
30
29
  elementId: '#magic-link',
31
- loginOrSignupView: {
30
+ config: {
32
31
  products: ['emailMagicLinks', 'oauth'],
33
32
  emailMagicLinksOptions: {
34
33
  loginRedirectURL: 'https://example.com/authenticate',
@@ -66,4 +65,5 @@ For more information on how to use the Stytch SDK, please refer to the
66
65
 
67
66
  - For usage with React: see the [@stytch/react](https://www.npmjs.com/package/@stytch/react) library
68
67
  and [sample app](https://github.com/stytchauth/stytchjs-react-magic-links)
69
- - For usage with Next.js: see the [sample app](https://github.com/stytchauth/stytch-nextjs-integration)
68
+ - For usage with Next.js: see the [@stytch/nextjs](https://www.npmjs.com/package/@stytch/nextjs) library
69
+ and [sample app](https://github.com/stytchauth/stytch-nextjs-integration)
package/dist/index.d.ts CHANGED
@@ -1,4 +1,17 @@
1
- import { IHeadlessCryptoWalletClient, IHeadlessMagicLinksClient, IHeadlessOAuthClient, IHeadlessOTPsClient, IHeadlessPasswordClient, IHeadlessSessionClient, IHeadlessUserClient, IHeadlessTOTPClient, IHeadlessWebAuthnClient, Callbacks, Config, StyleConfig } from "@stytch/core/public";
1
+ import { IHeadlessCryptoWalletClient, IHeadlessMagicLinksClient, IHeadlessOAuthClient, IHeadlessOTPsClient, IHeadlessPasswordClient, IHeadlessSessionClient, IHeadlessUserClient, IHeadlessTOTPClient, IHeadlessWebAuthnClient, Callbacks, StytchLoginConfig, StyleConfig } from "@stytch/core/public";
2
+ /**
3
+ * A headless client used for invoking the Stytch API.
4
+ * The Stytch Headless Client can be used as a drop-in solution for authentication and session management.
5
+ * Full documentation can be found {@link https://stytch.com/docs/sdks/javascript-sdk online}.
6
+ * @example
7
+ * const stytch = new StytchHeadlessClient('public-token-<find yours in the stytch dashboard>');
8
+ * stytch.magicLinks.email.loginOrCreate('sandbox@stytch.com', {
9
+ * login_magic_link_url: 'https://example.com/authenticate',
10
+ * login_expiration_minutes: 60,
11
+ * signup_magic_link_url: 'https://example.com/authenticate',
12
+ * signup_expiration_minutes: 60,
13
+ * });
14
+ */
2
15
  declare class StytchHeadlessClient {
3
16
  private readonly _subscriptionService;
4
17
  private readonly _sessionManager;
@@ -17,14 +30,67 @@ declare class StytchHeadlessClient {
17
30
  passwords: IHeadlessPasswordClient;
18
31
  constructor(_PUBLIC_TOKEN: string);
19
32
  }
33
+ /**
34
+ * A client used for invoking the Stytch API an.
35
+ * The Stytch UI Client can be used as a drop-in solution for authentication and session management.
36
+ * The Stytch UI client also can be used to render various UI elements for managing users.
37
+ * Full documentation can be found {@link https://stytch.com/docs/sdks/javascript-sdk online.}
38
+ * @example
39
+ * const stytch = new StytchUIClient('public-token-<find yours in the stytch dashboard>');
40
+ * stytch.magicLinks.email.loginOrCreate('sandbox@stytch.com', {
41
+ * login_magic_link_url: 'https://example.com/authenticate',
42
+ * login_expiration_minutes: 60,
43
+ * signup_magic_link_url: 'https://example.com/authenticate',
44
+ * signup_expiration_minutes: 60,
45
+ * });
46
+ */
20
47
  declare class StytchUIClient extends StytchHeadlessClient {
21
48
  constructor(...args: ConstructorParameters<typeof StytchHeadlessClient>);
22
- mount({ elementId, config, styles, callbacks }: {
49
+ /**
50
+ * Mounts a login screen inside the element provided.
51
+ * If a login screen has already been rendered inside the element,
52
+ * it will be updated to use the new config, style, and callback options passed in.
53
+ * @example
54
+ * stytchClient.mountLogin({
55
+ * elementId: '#login-container',
56
+ * config: {...}
57
+ * });
58
+ *
59
+ * @param elementId - A string containing the id of the element that should contain the login screen.
60
+ * @param config - A {@link StytchLoginConfig} object containing the products that should be registered
61
+ * @param styles - A {@link StyleConfig} object containing custom styling info
62
+ * @param callbacks - Optional {@link Callbacks} triggered by various events in the Stytch SDK.
63
+ * @throws An error when the element specified by elementId cannot be found.
64
+ */
65
+ mountLogin({ elementId, config, styles, callbacks }: {
23
66
  elementId: string;
24
- config: Config;
67
+ config: StytchLoginConfig;
25
68
  styles?: StyleConfig;
26
69
  callbacks?: Callbacks;
27
70
  }): void;
71
+ /**
72
+ * Mounts a reset password screen inside the element provided.
73
+ * If a reset password screen has already been rendered inside the element,
74
+ * it will be updated to use the new config, style, and callback options passed in.
75
+ * @example
76
+ * stytchClient.mountResetPassword({
77
+ * elementId: '#login-container',
78
+ * config: {...}
79
+ * });
80
+ *
81
+ * @param elementId - A string containing the id of the element that should contain the login screen.
82
+ * @param config - A {@link StytchLoginConfig} object containing the products that should be registered
83
+ * @param styles - A {@link StyleConfig} object containing custom styling info
84
+ * @param callbacks - Optional {@link Callbacks} triggered by various events in the Stytch SDK.
85
+ * @throws An error when the element specified by elementId cannot be found.
86
+ */
87
+ mountResetPassword({ elementId, config, styles, callbacks, passwordResetToken }: {
88
+ elementId: string;
89
+ config: StytchLoginConfig;
90
+ styles?: StyleConfig;
91
+ callbacks?: Callbacks;
92
+ passwordResetToken: string;
93
+ }): void;
28
94
  }
29
95
  export { StytchUIClient };
30
96
  export * from '@stytch/core/public';
package/dist/index.esm.d.ts CHANGED
@@ -1,4 +1,17 @@
1
- import { IHeadlessCryptoWalletClient, IHeadlessMagicLinksClient, IHeadlessOAuthClient, IHeadlessOTPsClient, IHeadlessPasswordClient, IHeadlessSessionClient, IHeadlessUserClient, IHeadlessTOTPClient, IHeadlessWebAuthnClient, Callbacks, Config, StyleConfig } from "@stytch/core/public";
1
+ import { IHeadlessCryptoWalletClient, IHeadlessMagicLinksClient, IHeadlessOAuthClient, IHeadlessOTPsClient, IHeadlessPasswordClient, IHeadlessSessionClient, IHeadlessUserClient, IHeadlessTOTPClient, IHeadlessWebAuthnClient, Callbacks, StytchLoginConfig, StyleConfig } from "@stytch/core/public";
2
+ /**
3
+ * A headless client used for invoking the Stytch API.
4
+ * The Stytch Headless Client can be used as a drop-in solution for authentication and session management.
5
+ * Full documentation can be found {@link https://stytch.com/docs/sdks/javascript-sdk online}.
6
+ * @example
7
+ * const stytch = new StytchHeadlessClient('public-token-<find yours in the stytch dashboard>');
8
+ * stytch.magicLinks.email.loginOrCreate('sandbox@stytch.com', {
9
+ * login_magic_link_url: 'https://example.com/authenticate',
10
+ * login_expiration_minutes: 60,
11
+ * signup_magic_link_url: 'https://example.com/authenticate',
12
+ * signup_expiration_minutes: 60,
13
+ * });
14
+ */
2
15
  declare class StytchHeadlessClient {
3
16
  private readonly _subscriptionService;
4
17
  private readonly _sessionManager;
@@ -17,14 +30,67 @@ declare class StytchHeadlessClient {
17
30
  passwords: IHeadlessPasswordClient;
18
31
  constructor(_PUBLIC_TOKEN: string);
19
32
  }
33
+ /**
34
+ * A client used for invoking the Stytch API an.
35
+ * The Stytch UI Client can be used as a drop-in solution for authentication and session management.
36
+ * The Stytch UI client also can be used to render various UI elements for managing users.
37
+ * Full documentation can be found {@link https://stytch.com/docs/sdks/javascript-sdk online.}
38
+ * @example
39
+ * const stytch = new StytchUIClient('public-token-<find yours in the stytch dashboard>');
40
+ * stytch.magicLinks.email.loginOrCreate('sandbox@stytch.com', {
41
+ * login_magic_link_url: 'https://example.com/authenticate',
42
+ * login_expiration_minutes: 60,
43
+ * signup_magic_link_url: 'https://example.com/authenticate',
44
+ * signup_expiration_minutes: 60,
45
+ * });
46
+ */
20
47
  declare class StytchUIClient extends StytchHeadlessClient {
21
48
  constructor(...args: ConstructorParameters<typeof StytchHeadlessClient>);
22
- mount({ elementId, config, styles, callbacks }: {
49
+ /**
50
+ * Mounts a login screen inside the element provided.
51
+ * If a login screen has already been rendered inside the element,
52
+ * it will be updated to use the new config, style, and callback options passed in.
53
+ * @example
54
+ * stytchClient.mountLogin({
55
+ * elementId: '#login-container',
56
+ * config: {...}
57
+ * });
58
+ *
59
+ * @param elementId - A string containing the id of the element that should contain the login screen.
60
+ * @param config - A {@link StytchLoginConfig} object containing the products that should be registered
61
+ * @param styles - A {@link StyleConfig} object containing custom styling info
62
+ * @param callbacks - Optional {@link Callbacks} triggered by various events in the Stytch SDK.
63
+ * @throws An error when the element specified by elementId cannot be found.
64
+ */
65
+ mountLogin({ elementId, config, styles, callbacks }: {
23
66
  elementId: string;
24
- config: Config;
67
+ config: StytchLoginConfig;
25
68
  styles?: StyleConfig;
26
69
  callbacks?: Callbacks;
27
70
  }): void;
71
+ /**
72
+ * Mounts a reset password screen inside the element provided.
73
+ * If a reset password screen has already been rendered inside the element,
74
+ * it will be updated to use the new config, style, and callback options passed in.
75
+ * @example
76
+ * stytchClient.mountResetPassword({
77
+ * elementId: '#login-container',
78
+ * config: {...}
79
+ * });
80
+ *
81
+ * @param elementId - A string containing the id of the element that should contain the login screen.
82
+ * @param config - A {@link StytchLoginConfig} object containing the products that should be registered
83
+ * @param styles - A {@link StyleConfig} object containing custom styling info
84
+ * @param callbacks - Optional {@link Callbacks} triggered by various events in the Stytch SDK.
85
+ * @throws An error when the element specified by elementId cannot be found.
86
+ */
87
+ mountResetPassword({ elementId, config, styles, callbacks, passwordResetToken }: {
88
+ elementId: string;
89
+ config: StytchLoginConfig;
90
+ styles?: StyleConfig;
91
+ callbacks?: Callbacks;
92
+ passwordResetToken: string;
93
+ }): void;
28
94
  }
29
95
  export { StytchUIClient };
30
96
  export * from '@stytch/core/public';