@stytch/vanilla-js 4.9.0 → 4.10.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @stytch/vanilla-js
 
+## 4.10.0
+
+### Minor Changes
+
+- 807fcec: B2B Google One Tap is now available in the Javascript SDK and pre-built UI components!
+
+  You can enable One Tap in the UI components by editing the `B2BOAuthOptions` in your UI config - we've updated the `providers` type to accommodate One Tap. If you add `{ type: 'google', one_tap: true }` to your `providers` list, we'll show the Google One Tap prompt in the top right of the user's browser.
+
+  In the Javascript SDK, you can use the `stytch.oauth.googleOneTap.start()` and `stytch.oauth.googleOneTap.discovery.start()` methods to render the One Tap prompt, depending on if you are using an organization-specific or discovery flow.
+
+### Patch Changes
+
+- Updated dependencies [807fcec]
+  - @stytch/core@2.14.0
+
+## 4.9.1
+
+### Patch Changes
+
+- 6fb5732: Ensure we display friendly error messages where possible
+- Updated dependencies [0055ad8]
+  - @stytch/core@2.13.1
+
 ## 4.9.0
 
 ### Minor Changes

package/dist/b2b/index.d.ts

@@ -1,5 +1,102 @@
 import { StateChangeRegisterFunction } from "@stytch/core";
-import { IHeadlessB2BDiscoveryClient, IHeadlessB2BMagicLinksClient, IHeadlessB2BMemberClient, IHeadlessB2BSelfClient, IHeadlessB2BOAuthClient, IHeadlessB2BOrganizationClient, IHeadlessB2BOTPsClient, IHeadlessB2BTOTPsClient, IHeadlessB2BSessionClient, IHeadlessB2BSSOClient, IHeadlessB2BRecoveryCodesClient, IHeadlessB2BRBACClient, StytchClientOptions, B2BState, IHeadlessB2BPasswordClient, Callbacks, StyleConfig, StytchB2BUIConfig } from "@stytch/core/public";
+import { IHeadlessB2BDiscoveryClient, IHeadlessB2BMagicLinksClient, IHeadlessB2BMemberClient, IHeadlessB2BSelfClient, IHeadlessB2BOrganizationClient, IHeadlessB2BOTPsClient, IHeadlessB2BTOTPsClient, IHeadlessB2BSessionClient, IHeadlessB2BSSOClient, IHeadlessB2BRecoveryCodesClient, IHeadlessB2BRBACClient, StytchClientOptions, B2BState, IHeadlessB2BPasswordClient, IHeadlessB2BOAuthClient } from "@stytch/core/public";
+import { Callbacks as Callbacks$0 } from "@stytch/core/public";
+import { StyleConfig as StyleConfig$0 } from "@stytch/core/public";
+import { StytchB2BUIConfig as StytchB2BUIConfig$0 } from "@stytch/core/public";
+import { PromptMomentNotification } from "google-one-tap";
+type OneTapNotShownReason = ReturnType<PromptMomentNotification["getNotDisplayedReason"]> | ReturnType<PromptMomentNotification["getSkippedReason"]>;
+type OneTapRenderResult = {
+    success: true;
+} | {
+    success: false;
+    reason: OneTapNotShownReason;
+};
+declare global {
+    // The telemetry.js script will set a global function called GetTelemetryID on the window
+    // object. This interface is allows us to call that function while pleasing the TypeScript
+    // compiler.
+    interface Window {
+        GetTelemetryID: (publicToken: string, submitURL: string) => Promise<string>;
+    }
+}
+type B2BGoogleOneTapDiscoveryOAuthOptions = {
+    /**
+     * The URL that Stytch redirects to after the Google One Tap discovery flow is completed.
+     * This should be a URL that verifies the request by querying Stytch's /oauth/discovery/authenticate endpoint.
+     * If this value is not passed, the default discovery redirect URL that you set in your Dashboard is used.
+     * If you have not set a default discovery redirect URL, an error is returned.
+     */
+    discovery_redirect_url?: string;
+};
+type B2BGoogleOneTapOAuthOptions = {
+    /**
+     * The ID of the organization that the end user is logging in to.
+     */
+    organization_id: string;
+    /**
+     * The URL that Stytch redirects to after the Google One Tap flow is completed for a member who already exists.
+     * This should be a URL that verifies the request by querying Stytch's /oauth/authenticate endpoint.
+     * If this value is not passed, the default login redirect URL that you set in your Dashboard is used.
+     * If you have not set a default login redirect URL, an error is returned.
+     */
+    login_redirect_url?: string;
+    /**
+     * The URL that Stytch redirects to after the Google One Tap flow is completed for a member who does not yet exist.
+     * This should be a URL that verifies the request by querying Stytch's /oauth/authenticate endpoint.
+     * If this value is not passed, the default signup redirect URL that you set in your Dashboard is used.
+     * If you have not set a default signup redirect URL, an error is returned.
+     */
+    signup_redirect_url?: string;
+};
+interface IB2BGoogleOneTapOAuthProvider {
+    discovery: {
+        /**
+         * Start a discovery OAuth flow by showing the Google one tap prompt in the top right corner of the user's browser.
+         * You can configure this to be started by a user action (i.e Button click) or on load/render.
+         * @example
+         * const showGoogleOneTap = useCallback(()=> {
+         *   stytch.oauth.googleOneTap.discovery.start({
+         *     discovery_redirect_url: 'https://example.com/oauth/callback',
+         *   })
+         * }, [stytch]);
+         * return (
+         *   <Button onClick={showGoogleOneTap}> Show Google one tap </Button>
+         * );
+         *
+         * @param options - A {@link B2BGoogleOneTapDiscoveryOAuthOptions} object
+         *
+         * @returns A {@link OneTapRenderResult} object. The result object includes if the one-tap prompt
+         * was rendered, and a reason if it couldn't be rendered.
+         *
+         * @throws An Error if the one tap client cannot be created.
+         */
+        start(options?: B2BGoogleOneTapDiscoveryOAuthOptions): Promise<OneTapRenderResult>;
+    };
+    /**
+     * Start an OAuth flow by showing the Google one tap prompt in the top right corner of the user's browser.
+     * You can configure this to be started by a user action (i.e Button click) or on load/render.
+     * @example
+     * const showGoogleOneTap = useCallback(()=> {
+     *   stytch.oauth.googleOneTap.start({
+     *     organization_id: 'organization-test-123',
+     *   })
+     * }, [stytch]);
+     * return (
+     *   <Button onClick={showGoogleOneTap}> Show Google one tap </Button>
+     * );
+     *
+     * @param options - A {@link B2BGoogleOneTapOAuthOptions} object
+     *
+     * @returns A {@link OneTapRenderResult} object. The result object includes if the one-tap prompt
+     * was rendered, and a reason if it couldn't be rendered.
+     *
+     * @throws An Error if the one tap client cannot be created.
+     */
+    start(options?: B2BGoogleOneTapOAuthOptions): Promise<OneTapRenderResult>;
+}
+interface IWebB2BOAuthClient extends IHeadlessB2BOAuthClient {
+    googleOneTap: IB2BGoogleOneTapOAuthProvider;
+}
 /**
  * A headless client used for invoking Stytch's B2B APIs.
  * The Stytch Headless Client can be used as a drop-in solution for authentication and session management.
@@ -16,6 +113,9 @@ declare class StytchB2BHeadlessClient {
     private readonly _subscriptionService;
     private readonly _sessionManager;
     private readonly _networkClient;
+    // The _apiNetworkClient uses the API instead of web-backend as the SDK backend URL. We choose between the test and
+    // live URL based on the public token.
+    private readonly _apiNetworkClient;
     private readonly _dataLayer;
     private readonly _stateChangeClient;
     // External API Clients
@@ -25,7 +125,7 @@ declare class StytchB2BHeadlessClient {
     member: IHeadlessB2BMemberClient;
     self: IHeadlessB2BSelfClient;
     organization: IHeadlessB2BOrganizationClient;
-    oauth: IHeadlessB2BOAuthClient;
+    oauth: IWebB2BOAuthClient;
     sso: IHeadlessB2BSSOClient;
     discovery: IHeadlessB2BDiscoveryClient;
     passwords: IHeadlessB2BPasswordClient;
@@ -81,9 +181,9 @@ declare class StytchB2BUIClient extends StytchB2BHeadlessClient {
      */
     mount({ elementId, styles, callbacks, config }: {
         elementId: string;
-        styles?: StyleConfig;
-        callbacks?: Callbacks;
-        config: StytchB2BUIConfig;
+        styles?: StyleConfig$0;
+        callbacks?: Callbacks$0;
+        config: StytchB2BUIConfig$0;
     }): void;
 }
 export { StytchB2BUIClient };

package/dist/b2b/index.esm.d.ts

@@ -1,5 +1,102 @@
 import { StateChangeRegisterFunction } from "@stytch/core";
-import { IHeadlessB2BDiscoveryClient, IHeadlessB2BMagicLinksClient, IHeadlessB2BMemberClient, IHeadlessB2BSelfClient, IHeadlessB2BOAuthClient, IHeadlessB2BOrganizationClient, IHeadlessB2BOTPsClient, IHeadlessB2BTOTPsClient, IHeadlessB2BSessionClient, IHeadlessB2BSSOClient, IHeadlessB2BRecoveryCodesClient, IHeadlessB2BRBACClient, StytchClientOptions, B2BState, IHeadlessB2BPasswordClient, Callbacks, StyleConfig, StytchB2BUIConfig } from "@stytch/core/public";
+import { IHeadlessB2BDiscoveryClient, IHeadlessB2BMagicLinksClient, IHeadlessB2BMemberClient, IHeadlessB2BSelfClient, IHeadlessB2BOrganizationClient, IHeadlessB2BOTPsClient, IHeadlessB2BTOTPsClient, IHeadlessB2BSessionClient, IHeadlessB2BSSOClient, IHeadlessB2BRecoveryCodesClient, IHeadlessB2BRBACClient, StytchClientOptions, B2BState, IHeadlessB2BPasswordClient, IHeadlessB2BOAuthClient } from "@stytch/core/public";
+import { Callbacks as Callbacks$0 } from "@stytch/core/public";
+import { StyleConfig as StyleConfig$0 } from "@stytch/core/public";
+import { StytchB2BUIConfig as StytchB2BUIConfig$0 } from "@stytch/core/public";
+import { PromptMomentNotification } from "google-one-tap";
+type OneTapNotShownReason = ReturnType<PromptMomentNotification["getNotDisplayedReason"]> | ReturnType<PromptMomentNotification["getSkippedReason"]>;
+type OneTapRenderResult = {
+    success: true;
+} | {
+    success: false;
+    reason: OneTapNotShownReason;
+};
+declare global {
+    // The telemetry.js script will set a global function called GetTelemetryID on the window
+    // object. This interface is allows us to call that function while pleasing the TypeScript
+    // compiler.
+    interface Window {
+        GetTelemetryID: (publicToken: string, submitURL: string) => Promise<string>;
+    }
+}
+type B2BGoogleOneTapDiscoveryOAuthOptions = {
+    /**
+     * The URL that Stytch redirects to after the Google One Tap discovery flow is completed.
+     * This should be a URL that verifies the request by querying Stytch's /oauth/discovery/authenticate endpoint.
+     * If this value is not passed, the default discovery redirect URL that you set in your Dashboard is used.
+     * If you have not set a default discovery redirect URL, an error is returned.
+     */
+    discovery_redirect_url?: string;
+};
+type B2BGoogleOneTapOAuthOptions = {
+    /**
+     * The ID of the organization that the end user is logging in to.
+     */
+    organization_id: string;
+    /**
+     * The URL that Stytch redirects to after the Google One Tap flow is completed for a member who already exists.
+     * This should be a URL that verifies the request by querying Stytch's /oauth/authenticate endpoint.
+     * If this value is not passed, the default login redirect URL that you set in your Dashboard is used.
+     * If you have not set a default login redirect URL, an error is returned.
+     */
+    login_redirect_url?: string;
+    /**
+     * The URL that Stytch redirects to after the Google One Tap flow is completed for a member who does not yet exist.
+     * This should be a URL that verifies the request by querying Stytch's /oauth/authenticate endpoint.
+     * If this value is not passed, the default signup redirect URL that you set in your Dashboard is used.
+     * If you have not set a default signup redirect URL, an error is returned.
+     */
+    signup_redirect_url?: string;
+};
+interface IB2BGoogleOneTapOAuthProvider {
+    discovery: {
+        /**
+         * Start a discovery OAuth flow by showing the Google one tap prompt in the top right corner of the user's browser.
+         * You can configure this to be started by a user action (i.e Button click) or on load/render.
+         * @example
+         * const showGoogleOneTap = useCallback(()=> {
+         *   stytch.oauth.googleOneTap.discovery.start({
+         *     discovery_redirect_url: 'https://example.com/oauth/callback',
+         *   })
+         * }, [stytch]);
+         * return (
+         *   <Button onClick={showGoogleOneTap}> Show Google one tap </Button>
+         * );
+         *
+         * @param options - A {@link B2BGoogleOneTapDiscoveryOAuthOptions} object
+         *
+         * @returns A {@link OneTapRenderResult} object. The result object includes if the one-tap prompt
+         * was rendered, and a reason if it couldn't be rendered.
+         *
+         * @throws An Error if the one tap client cannot be created.
+         */
+        start(options?: B2BGoogleOneTapDiscoveryOAuthOptions): Promise<OneTapRenderResult>;
+    };
+    /**
+     * Start an OAuth flow by showing the Google one tap prompt in the top right corner of the user's browser.
+     * You can configure this to be started by a user action (i.e Button click) or on load/render.
+     * @example
+     * const showGoogleOneTap = useCallback(()=> {
+     *   stytch.oauth.googleOneTap.start({
+     *     organization_id: 'organization-test-123',
+     *   })
+     * }, [stytch]);
+     * return (
+     *   <Button onClick={showGoogleOneTap}> Show Google one tap </Button>
+     * );
+     *
+     * @param options - A {@link B2BGoogleOneTapOAuthOptions} object
+     *
+     * @returns A {@link OneTapRenderResult} object. The result object includes if the one-tap prompt
+     * was rendered, and a reason if it couldn't be rendered.
+     *
+     * @throws An Error if the one tap client cannot be created.
+     */
+    start(options?: B2BGoogleOneTapOAuthOptions): Promise<OneTapRenderResult>;
+}
+interface IWebB2BOAuthClient extends IHeadlessB2BOAuthClient {
+    googleOneTap: IB2BGoogleOneTapOAuthProvider;
+}
 /**
  * A headless client used for invoking Stytch's B2B APIs.
  * The Stytch Headless Client can be used as a drop-in solution for authentication and session management.
@@ -16,6 +113,9 @@ declare class StytchB2BHeadlessClient {
     private readonly _subscriptionService;
     private readonly _sessionManager;
     private readonly _networkClient;
+    // The _apiNetworkClient uses the API instead of web-backend as the SDK backend URL. We choose between the test and
+    // live URL based on the public token.
+    private readonly _apiNetworkClient;
     private readonly _dataLayer;
     private readonly _stateChangeClient;
     // External API Clients
@@ -25,7 +125,7 @@ declare class StytchB2BHeadlessClient {
     member: IHeadlessB2BMemberClient;
     self: IHeadlessB2BSelfClient;
     organization: IHeadlessB2BOrganizationClient;
-    oauth: IHeadlessB2BOAuthClient;
+    oauth: IWebB2BOAuthClient;
     sso: IHeadlessB2BSSOClient;
     discovery: IHeadlessB2BDiscoveryClient;
     passwords: IHeadlessB2BPasswordClient;
@@ -81,9 +181,9 @@ declare class StytchB2BUIClient extends StytchB2BHeadlessClient {
      */
     mount({ elementId, styles, callbacks, config }: {
         elementId: string;
-        styles?: StyleConfig;
-        callbacks?: Callbacks;
-        config: StytchB2BUIConfig;
+        styles?: StyleConfig$0;
+        callbacks?: Callbacks$0;
+        config: StytchB2BUIConfig$0;
     }): void;
 }
 export { StytchB2BUIClient };