Add the onInitError callback

packages/react/src/components/onboarding/onboarding-form.component.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
-import { useSlashID } from "../../main";
 import { Form } from "../form";
 import { useOnboarding } from "./onboarding-context.hook";
+import { useSlashID } from "../../hooks/use-slash-id";
 
 export function OnboardingForm() {
   const id = "onboarding-login-form";

packages/react/src/components/onboarding/onboarding.component.tsx

@@ -1,9 +1,9 @@
 import { createContext, useEffect, useMemo, useState } from "react";
 import { OnboardingAPI, OnboardingState } from "./onboarding.types";
 import { AnonymousUser, Errors, JsonObject } from "@slashid/slashid";
-import { useSlashID } from "../../main";
 import { ensureError } from "../../domain/errors";
 import { Loading } from "@slashid/react-primitives";
+import { useSlashID } from "../../hooks/use-slash-id";
 
 const initialOnboardingState: OnboardingState = {
   currentStepId: "",

packages/react/src/context/slash-id-context.test.tsx

@@ -0,0 +1,64 @@
+import { render, waitFor, screen } from "@testing-library/react";
+import { SlashIDProviderImplementation } from "./slash-id-context";
+import { MockSlashID } from "../components/test-utils";
+import type { SlashIDOptions } from "@slashid/slashid";
+
+describe("Lifecycle methods", () => {
+  it("calls onInitError if getUserFromURL throws", async () => {
+    const error = new Error("getUserFromURL error");
+    const createSlashID = (options: SlashIDOptions) => {
+      const mockSid = new MockSlashID(options);
+      mockSid.getUserFromURL = jest.fn().mockRejectedValue(error);
+      return mockSid;
+    };
+
+    const onInitError = jest.fn();
+
+    render(
+      <SlashIDProviderImplementation
+        createSlashID={createSlashID}
+        onInitError={onInitError}
+        oid="test-oid"
+        analyticsEnabled={false}
+        tokenStorage="memory"
+      >
+        Test
+      </SlashIDProviderImplementation>
+    );
+
+    await waitFor(() => {
+      expect(onInitError).toHaveBeenCalledWith(error);
+    });
+    expect(screen.getByText("Test")).toBeInTheDocument();
+  });
+
+  it("calls onInitError if createAnonymousUser throws", async () => {
+    const error = new Error("createAnonymousUser error");
+    const createSlashID = (options: SlashIDOptions) => {
+      const mockSid = new MockSlashID(options);
+      mockSid.getUserFromURL = jest.fn().mockResolvedValue(null);
+      mockSid.createAnonymousUser = jest.fn().mockRejectedValue(error);
+      return mockSid;
+    };
+
+    const onInitError = jest.fn();
+
+    render(
+      <SlashIDProviderImplementation
+        createSlashID={createSlashID}
+        onInitError={onInitError}
+        oid="test-oid"
+        analyticsEnabled={false}
+        tokenStorage="memory"
+        anonymousUsersEnabled
+      >
+        Test
+      </SlashIDProviderImplementation>
+    );
+
+    await waitFor(() => {
+      expect(onInitError).toHaveBeenCalledWith(error);
+    });
+    expect(screen.getByText("Test")).toBeInTheDocument();
+  });
+});

packages/react/src/context/slash-id-context.tsx

@@ -13,6 +13,7 @@ import {
   PersonHandleType,
   SlashID,
   SlashIDEnvironment,
+  SlashIDOptions,
   User,
 } from "@slashid/slashid";
 import {
@@ -81,6 +82,12 @@ export interface SlashIDProviderProps {
    * pre-login data is transferred.
    */
   anonymousUsersEnabled?: boolean;
+  /**
+   * On init SlashID SDK will attempt to resolve supported query params to a user token.
+   * If this fails, the SDK will ignore the error and resume work without the initial user token.
+   * You can optionally register a callback to be able to react to this error.
+   */
+  onInitError?: (e: Error) => void;
   themeProps?: ThemeProps;
   children: ReactNode;
 }
@@ -158,6 +165,25 @@ const createStorage = (storageType: StorageOption) => {
 };
 
 export const SlashIDProvider = ({
+  children,
+  ...props
+}: SlashIDProviderProps) => {
+  const createSlashID = useCallback((options: SlashIDOptions) => {
+    return new SlashID(options);
+  }, []);
+
+  return (
+    <SlashIDProviderImplementation {...props} createSlashID={createSlashID}>
+      {children}
+    </SlashIDProviderImplementation>
+  );
+};
+
+type SlashIDProviderImplementationProps = SlashIDProviderProps & {
+  createSlashID: (options: SlashIDOptions) => SlashID;
+};
+
+export function SlashIDProviderImplementation({
   oid: initialOid,
   initialToken,
   tokenStorage = "memory",
@@ -166,9 +192,11 @@ export const SlashIDProvider = ({
   sdkUrl,
   analyticsEnabled,
   anonymousUsersEnabled = false,
+  onInitError,
   themeProps,
+  createSlashID,
   children,
-}: SlashIDProviderProps) => {
+}: SlashIDProviderImplementationProps) {
   const [oid, setOid] = useState(initialOid);
   const [token, setToken] = useState(initialToken);
   const [state, setState] = useState<SDKState>(initialContextValue.sdkState);
@@ -489,7 +517,7 @@ export const SlashIDProvider = ({
 
   useEffect(() => {
     if (state === "initial") {
-      const slashId = new SlashID({
+      const slashId = createSlashID({
         oid,
         ...(environment && { environment }),
         ...(baseApiUrl && { baseURL: baseApiUrl }),
@@ -511,6 +539,7 @@ export const SlashIDProvider = ({
     tokenStorage,
     analyticsEnabled,
     environment,
+    createSlashID,
   ]);
 
   const createAndStoreUserFromToken = useCallback(
@@ -559,7 +588,12 @@ export const SlashIDProvider = ({
 
         return createAndStoreUserFromToken(tokenFromURL);
       } catch (e) {
-        console.error(e);
+        if (typeof onInitError === "function" && e instanceof Error) {
+          onInitError(e);
+        } else {
+          console.error(e);
+        }
+
         return null;
       }
     };
@@ -611,11 +645,17 @@ export const SlashIDProvider = ({
     const createAnonymousUser = async () => {
       if (!anonymousUsersEnabled) return null;
 
-      const anonUser = await sid.createAnonymousUser();
-
-      storeAnonymousUser(anonUser);
-
-      return anonUser;
+      try {
+        const anonUser = await sid.createAnonymousUser();
+        storeAnonymousUser(anonUser);
+        return anonUser;
+      } catch (e) {
+        if (typeof onInitError === "function" && e instanceof Error) {
+          onInitError(e);
+        } else {
+          console.error(e);
+        }
+      }
     };
 
     setState("retrievingToken");
@@ -651,6 +691,7 @@ export const SlashIDProvider = ({
     validateToken,
     oid,
     __switchOrganizationInContext,
+    onInitError,
   ]);
 
   const contextValue = useMemo<ISlashIDContext>(() => {
@@ -710,4 +751,4 @@ export const SlashIDProvider = ({
       <ThemeRoot {...themeProps}>{children}</ThemeRoot>
     </SlashIDContext.Provider>
   );
-};
+}