@indietabletop/appkit 3.6.0-2 → 3.6.0-3

package/lib/account/CurrentUserFetcher.stories.tsx

@@ -0,0 +1,339 @@
+import { Story } from "@storybook/addon-docs/blocks";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { http, HttpResponse } from "msw";
+import { fn } from "storybook/test";
+import { sleep } from "../sleep.ts";
+import type { CurrentUser, SessionInfo } from "../types.ts";
+import { CurrentUserFetcher } from "./CurrentUserFetcher.tsx";
+
+function createMocks(options?: { responseSpeed?: number }) {
+  const simulateNetwork = () => sleep(options?.responseSpeed ?? 2000);
+
+  const john: CurrentUser = {
+    id: "john",
+    email: "john@example.com",
+    isVerified: true,
+  };
+
+  const mary: CurrentUser = {
+    id: "mary",
+    email: "mary@example.com",
+    isVerified: true,
+  };
+
+  const vernon: CurrentUser = {
+    id: "vernon",
+    email: "vernon@example.com",
+    isVerified: false,
+  };
+
+  const sessionInfo: SessionInfo = {
+    createdTs: 123,
+    expiresTs: 123,
+  };
+
+  return {
+    data: { john, mary, vernon },
+    handlers: {
+      refreshTokens: {
+        success: () => {
+          return http.post(
+            "http://mock.api/v1/sessions/access-tokens",
+            async () => {
+              await simulateNetwork();
+              return HttpResponse.json({ sessionInfo });
+            },
+          );
+        },
+
+        failed: () => {
+          return http.post(
+            "http://mock.api/v1/sessions/access-tokens",
+            async () => {
+              await simulateNetwork();
+              return HttpResponse.text("Refresh token expired or missing", {
+                status: 401,
+              });
+            },
+          );
+        },
+      },
+
+      getCurrentUser: {
+        success: (currentUser: CurrentUser) => {
+          return http.get("http://mock.api/v1/users/me", async () => {
+            await simulateNetwork();
+            return HttpResponse.json(currentUser);
+          });
+        },
+
+        /**
+         * Cookie is valid, but user doesn't exist any more. This can happen
+         * after user deletion.
+         */
+        notFound: () => {
+          return http.get("http://mock.api/v1/users/me", async () => {
+            await simulateNetwork();
+            return HttpResponse.text("User not found", { status: 404 });
+          });
+        },
+
+        noConnection: () => {
+          return http.get("http://mock.api/v1/users/me", async () => {
+            return HttpResponse.error();
+          });
+        },
+
+        unknownFailure: () => {
+          return http.get("http://mock.api/v1/users/me", async () => {
+            await simulateNetwork();
+            return HttpResponse.text("Internal server error", { status: 500 });
+          });
+        },
+
+        /**
+         * Auth cookies no longer valid to make this request.
+         */
+        notAuthenticated: () => {
+          return http.get("http://mock.api/v1/users/me", async () => {
+            await simulateNetwork();
+            return HttpResponse.text("Not authenticated", { status: 401 });
+          });
+        },
+      },
+
+      createNewSession: {
+        success: (currentUser: CurrentUser) => {
+          return http.post("http://mock.api/v1/sessions", async () => {
+            await simulateNetwork();
+            return HttpResponse.json({ currentUser, sessionInfo });
+          });
+        },
+
+        invalidCredentials: () => {
+          return http.post("http://mock.api/v1/sessions", async () => {
+            await simulateNetwork();
+            return HttpResponse.text("Credentials do not match", {
+              status: 401,
+            });
+          });
+        },
+
+        userNotFound: () => {
+          return http.post("http://mock.api/v1/sessions", async () => {
+            await simulateNetwork();
+            return HttpResponse.text("User not found", { status: 404 });
+          });
+        },
+
+        unknownFailure: () => {
+          return http.post("http://mock.api/v1/sessions", async () => {
+            await simulateNetwork();
+            return HttpResponse.text("Internal server error", { status: 500 });
+          });
+        },
+      },
+
+      requestVerify: {
+        success: () => {
+          return http.post(
+            "http://mock.api/v1/user-verification-tokens",
+            async () => {
+              await simulateNetwork();
+              return HttpResponse.json({ message: "OK", tokenId: "1" });
+            },
+          );
+        },
+      },
+
+      verify: {
+        success: () => {
+          return http.put(
+            "http://mock.api/v1/user-verification-tokens/:id",
+            async () => {
+              await simulateNetwork();
+              return HttpResponse.json({ message: "OK" });
+            },
+          );
+        },
+      },
+    },
+  };
+}
+
+const { data, handlers } = createMocks({ responseSpeed: 700 });
+
+/**
+ * Fetches fresh current user data if local data is provided.
+ *
+ * This component uses the Indie Tabletop Client under the hood, so if new
+ * data is successfully fetched, the onCurrentUser callback will be invoked,
+ * and it is up to the configuration of the client to store the data.
+ *
+ * Importantly, this component also handles the various user account issues
+ * that we could run into: expired session, user mismatch and account deletion.
+ *
+ * All other errors are ignored. This allows users to use the app in offline
+ * more, and doesn't interrupt their session if some unexpected error happens,
+ * which they cannot do anything about anyways.
+ */
+const meta = {
+  title: "Account/Current User Fetcher",
+  component: CurrentUserFetcher,
+  tags: ["autodocs"],
+  args: {
+    localUser: null,
+    onLogout: fn(),
+    onClearLocalContent: fn(),
+    onLogin: fn(),
+    onServerLogout: fn(),
+    children: (
+      <div
+        style={{
+          minBlockSize: "20rem",
+          backgroundColor: "white",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          borderRadius: "1rem",
+        }}
+      >
+        App content
+      </div>
+    ),
+  },
+  parameters: {
+    msw: {
+      handlers: {
+        refreshTokens: handlers.refreshTokens.failed(),
+      },
+    },
+  },
+} satisfies Meta<typeof CurrentUserFetcher>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/**
+ * The default case, in which a local user is provided (so they have previously
+ * logged in), and the current user request returns the same user as is
+ * the local user (determined by the user id).
+ */
+export const Default: Story = {
+  args: {
+    localUser: data.john,
+  },
+  parameters: {
+    msw: {
+      handlers: {
+        getCurrentUser: handlers.getCurrentUser.success(data.john),
+      },
+    },
+  },
+};
+
+/**
+ * In this case, no local user is provided and the component simply renders
+ * its children. There should be no network request in this case.
+ */
+export const NoLocalUser: Story = {};
+
+/**
+ * In this case, the local user is provided and the current user request returns
+ * error 401. The user should supply their credentials again.
+ */
+export const SessionExpired: Story = {
+  args: {
+    localUser: data.john,
+  },
+  parameters: {
+    msw: {
+      handlers: {
+        getCurrentUser: handlers.getCurrentUser.notAuthenticated(),
+      },
+    },
+  },
+};
+
+/**
+ * In this case, the local user is provided and the current user request returns
+ * a different user (determined by user ID).
+ *
+ * This case can happen when user A logs into app X, then user B logs into
+ * app Y. Returning to app X, user B will be logged into ITC with their account
+ * but local data belong to user A.
+ *
+ * In practice this should be a rare case, but with unpleasant circumstances
+ * if not handled correctly.
+ */
+export const UserMismatch: Story = {
+  args: {
+    localUser: data.john,
+  },
+
+  parameters: {
+    msw: {
+      handlers: {
+        getCurrentUser: handlers.getCurrentUser.success(data.mary),
+      },
+    },
+  },
+};
+
+/**
+ */
+export const UserUnverified: Story = {
+  args: {
+    localUser: data.vernon,
+  },
+
+  parameters: {
+    msw: {
+      handlers: {
+        getCurrentUser: handlers.getCurrentUser.success(data.vernon),
+        requestVerify: handlers.requestVerify.success(),
+        verify: handlers.verify.success(),
+        refreshTokens: handlers.refreshTokens.success(),
+      },
+    },
+  },
+};
+
+/**
+ * In this case, the local user is provided and the current user request returns
+ * 404, indicating that the current user no longer exists.
+ *
+ * This can happen if users delete their accounts but
+ */
+export const UserNotFound: Story = {
+  args: {
+    localUser: data.john,
+  },
+
+  parameters: {
+    msw: {
+      handlers: {
+        getCurrentUser: handlers.getCurrentUser.notFound(),
+      },
+    },
+  },
+};
+
+/**
+ * The proactive user session check has failed due to an error that doesn't
+ * carry any special meaning.
+ */
+export const UnknownFailure: Story = {
+  args: {
+    localUser: data.john,
+  },
+
+  parameters: {
+    msw: {
+      handlers: {
+        getCurrentUser: handlers.getCurrentUser.unknownFailure(),
+      },
+    },
+  },
+};

package/lib/account/CurrentUserFetcher.tsx

@@ -0,0 +1,119 @@
+import { useState, type ReactNode } from "react";
+import { ModalDialog } from "../ModalDialog/index.tsx";
+import type { CurrentUser } from "../types.ts";
+import { AccountIssueView } from "./AccountIssueView.tsx";
+import { LoginView } from "./LoginView.tsx";
+import type { EventHandler, EventHandlerWithReload } from "./types.ts";
+import { useCurrentUserResult } from "./useCurrentUserResult.tsx";
+import { UserMismatchView } from "./UserMismatchView.tsx";
+import { VerifyAccountView } from "./VerifyPage.tsx";
+
+export function CurrentUserFetcher(props: {
+  /**
+   * Current user as stored in persistent storage.
+   *
+   * If this property is set, the component will attempt to fetch latest data
+   * from the server and store it (via ITC client).
+   */
+  localUser: CurrentUser | null;
+
+  onLogin: EventHandlerWithReload;
+  onClearLocalContent: EventHandler;
+  onLogout: EventHandlerWithReload;
+  onServerLogout: EventHandlerWithReload;
+
+  children: ReactNode;
+}) {
+  const {
+    localUser,
+    children,
+    onLogin,
+    onLogout,
+    onClearLocalContent,
+    onServerLogout,
+  } = props;
+  const [isOpen, setOpen] = useState(true);
+
+  const { result, reload } = useCurrentUserResult({
+    // We only want to fetch the current user if they exist in local storage
+    performFetch: !!localUser,
+  });
+
+  if (result.isFailure && result.failure.type === "API_ERROR") {
+    // The user's session has expired. They should be prompted to
+    // re-authenticate, as any syncing attemps will fail.
+    if (result.failure.code === 401) {
+      return (
+        <>
+          <ModalDialog size="large" open>
+            <LoginView
+              currentUser={localUser}
+              onLogin={onLogin}
+              onLogout={onLogout}
+              description={undefined}
+              reload={reload}
+            />
+          </ModalDialog>
+          {children}
+        </>
+      );
+    }
+
+    if (result.failure.code === 404) {
+      // The user account is not found. The user might have been deleted.
+      // The user should be notified and instructed to log out, as many
+      // interactions acrosss the app will be broken.
+      return (
+        <>
+          <ModalDialog size="large" open>
+            <AccountIssueView onLogout={onLogout} reload={reload} />
+          </ModalDialog>
+
+          {children}
+        </>
+      );
+    }
+  }
+
+  if (localUser && result.isSuccess) {
+    const serverUser = result.value;
+
+    // The cookie (server) user and the user in local storage are a different
+    // user. The current user needs to decide which account to use.
+    if (serverUser.id !== localUser.id) {
+      return (
+        <>
+          <ModalDialog size="large" open>
+            <UserMismatchView
+              serverUser={result.value}
+              localUser={localUser}
+              onClearLocalContent={onClearLocalContent}
+              onServerLogout={onServerLogout}
+              reload={reload}
+            />
+          </ModalDialog>
+
+          {children}
+        </>
+      );
+    }
+
+    if (!serverUser.isVerified) {
+      return (
+        <>
+          <ModalDialog size="large" open={isOpen}>
+            <VerifyAccountView
+              currentUser={serverUser}
+              onClose={() => setOpen(false)}
+            />
+          </ModalDialog>
+
+          {children}
+        </>
+      );
+    }
+  }
+
+  // In all other cases we simply render the children
+  return <>{children}</>;
+}

package/lib/account/FailureFallbackView.tsx

@@ -0,0 +1,36 @@
+import { Button } from "@ariakit/react";
+import { cx } from "../class-names.ts";
+import { interactiveText } from "../common.css.ts";
+import {
+  Letterhead,
+  LetterheadHeading,
+  LetterheadParagraph,
+} from "../Letterhead/index.tsx";
+
+export function FailureFallbackView() {
+  return (
+    <Letterhead>
+      <LetterheadHeading>Something went wrong</LetterheadHeading>
+
+      <LetterheadParagraph>
+        {"This is probably an issue on our side. Sorry about that!"}
+      </LetterheadParagraph>
+
+      <LetterheadParagraph>
+        {"You can try "}
+        <Button
+          {...cx(interactiveText)}
+          onClick={() => window.location.reload()}
+        >
+          reloading the app
+        </Button>
+        {". "}
+        {"If the issue persists, please get in touch at "}
+        <a {...cx(interactiveText)} href="mailto:support@indietabletop.club">
+          support@indietabletop.club
+        </a>
+        {"."}
+      </LetterheadParagraph>
+    </Letterhead>
+  );
+}