@workos-inc/widgets 1.1.0 → 1.1.2

package/src/api/errors.ts

@@ -0,0 +1,48 @@
+type QueryType = "query" | "mutation";
+
+export class FetchError extends Error {
+  queryType: QueryType;
+  recordType?: string;
+  context: unknown;
+  constructor(args: {
+    message: string;
+    queryType: QueryType;
+    recordType?: string;
+    context?: unknown;
+  }) {
+    super(args.message);
+    this.name = "FetchError";
+    this.queryType = args.queryType;
+    this.recordType = args.recordType;
+    this.context = args.context;
+  }
+}
+
+export class ApiError extends Error {
+  status: number;
+  queryType: QueryType;
+  recordType?: string;
+  context: unknown;
+  constructor(args: {
+    message: string;
+    queryType: QueryType;
+    recordType?: string;
+    status: number;
+    context?: unknown;
+  }) {
+    super(args.message);
+    this.name = "ApiError";
+    this.status = args.status;
+    this.queryType = args.queryType;
+    this.recordType = args.recordType;
+  }
+}
+
+export class NoAuthTokenError extends Error {
+  context: unknown;
+  constructor(args?: { context?: unknown }) {
+    super("No auth token provided");
+    this.name = "NoAuthTokenError";
+    this.context = args?.context;
+  }
+}

package/src/api/index.ts

@@ -0,0 +1,2 @@
+export * from "./endpoint";
+export * from "./api-provider";

package/src/api/utils.ts

@@ -0,0 +1,42 @@
+import { WIDGETS_API_VERSION } from "./constants";
+
+export function getAuthHeaders(authToken: string): HeadersInit {
+  return {
+    Authorization: `Bearer ${authToken}`,
+    "WorkOS-Widgets-Version": WIDGETS_API_VERSION,
+  };
+}
+
+export function isObjectLike(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null;
+}
+
+export function isErrorLike(
+  value: unknown,
+): value is Record<string, unknown> & { message: string } {
+  return isObjectLike(value) && typeof value.message === "string";
+}
+
+export async function parseErrorResponse(
+  response: Response,
+): Promise<{ message: string; status: number }> {
+  try {
+    const json = await response.json();
+    if (!isObjectLike(json) || typeof json.message !== "string") {
+      return {
+        status: response.status,
+        message: response.statusText,
+      };
+    }
+    return {
+      ...json,
+      status: response.status,
+      message: json.message || response.statusText,
+    };
+  } catch {
+    return {
+      status: response.status,
+      message: response.statusText,
+    };
+  }
+}

package/src/api/widgets-api-client.ts

@@ -0,0 +1,86 @@
+import { QueryKey } from "@tanstack/react-query";
+import { useApi } from "./api-provider";
+import { ApiError, FetchError } from "./errors";
+import { getAuthHeaders, parseErrorResponse } from "./utils";
+
+type WidgetsApiClient<T> = (data: {
+  url: string;
+  method: "GET" | "POST" | "PUT" | "DELETE" | "PATCH";
+  params?: Record<string, any>;
+  headers?: Record<string, any>;
+  data?: BodyType<unknown>;
+  signal?: AbortSignal;
+}) => Promise<T>;
+
+export const useWidgetsApiClient = <T>(): WidgetsApiClient<T> => {
+  const { authToken, baseUrl, elevatedAccess } = useApi();
+
+  return async ({ url: pathname, method, params, data }) => {
+    const url = new URL(baseUrl);
+    url.pathname = pathname;
+
+    if (params) {
+      const cleanParams = Object.fromEntries(
+        Object.entries(params).filter(([_, value]) => value !== undefined),
+      );
+      url.search = new URLSearchParams(cleanParams).toString();
+    }
+
+    const queryType = method.toLowerCase() === "get" ? "query" : "mutation";
+    const headers = {
+      ...getAuthHeaders(await Promise.resolve(authToken)),
+      ...(elevatedAccess && queryType === "mutation"
+        ? { "x-elevated-access-token": elevatedAccess.token }
+        : {}),
+      "Content-Type": "application/json",
+    };
+
+    const response = await fetch(url, {
+      method,
+      cache: "no-store",
+      headers,
+      ...(data ? { body: JSON.stringify(data) } : {}),
+    }).catch((error) => {
+      throw new FetchError({
+        message: `Failed to ${method} ${url.toString()}`,
+        queryType,
+        context: { error },
+      });
+    });
+
+    if (!response.ok) {
+      const { message, status } = await parseErrorResponse(response);
+
+      throw new ApiError({
+        message,
+        status,
+        queryType: method.toLowerCase() === "get" ? "query" : "mutation",
+      });
+    }
+
+    return response.json();
+  };
+};
+
+export type ErrorType<ErrorData> = ErrorData;
+
+export type BodyType<BodyData> = BodyData & { headers?: any };
+
+export const useWidgetsApiQueryOptions = <
+  QueryOptions extends { queryKey: QK },
+  QK extends QueryKey,
+>(
+  queryOptions: QueryOptions,
+) => {
+  const { authTokenQueryKey, baseUrl } = useApi();
+  const queryKey = [
+    // initial query key needs to go first to allow invalidation of the query name to work
+    ...queryOptions.queryKey,
+    { authTokenQueryKey, baseUrl },
+  ] as unknown as QK;
+
+  return {
+    ...queryOptions,
+    queryKey: queryKey as QK,
+  };
+};

package/src/index.ts

@@ -2,6 +2,7 @@ export {
   WorkOsWidgets,
   type WorkOsWidgetsProps,
 } from "./workos-widgets.client";
+export { OrganizationSwitcher } from "./organization-switcher.client";
 export { UserProfile } from "./user-profile.client";
 export { UserSecurity } from "./user-security.client";
 export { UserSessions } from "./user-sessions.client";

package/src/lib/add-mfa-dialog.tsx

@@ -21,7 +21,7 @@ import {
   useCreateTotpFactor,
   useElevatedAccessToken,
   useVerifyTotpFactor,
-} from "@repo/api";
+} from "../api";
 import * as Form from "@radix-ui/react-form";
 import { Marker } from "./marker";
 import { CopyButton } from "./copy-button";

package/src/lib/api/user.ts

@@ -6,7 +6,7 @@ import {
   useResendInvite,
   useRevokeInvite,
   useUpdateMember,
-} from "@repo/api";
+} from "../../api";
 import { keepPreviousData, useQueryClient } from "@tanstack/react-query";
 import { USER_ROW_LIMIT } from "../constants";
 import {

package/src/lib/change-password-dialog.tsx

@@ -11,7 +11,7 @@ import {
   PrimaryButton,
   SecondaryButton,
 } from "./elements";
-import { useUpdatePassword } from "@repo/api";
+import { useUpdatePassword } from "../api";
 import { SaveButton } from "./save-button";
 
 interface ChangePasswordDialogProps extends Dialog.RootProps {

package/src/lib/delete-user-dialog.tsx

@@ -15,7 +15,7 @@ import {
   DestructiveButton,
   SecondaryButton,
 } from "./elements";
-import { Member } from "@repo/api";
+import { Member } from "../api";
 
 interface DeleteUserDialogProps extends AlertDialog.RootProps {
   open: boolean;

package/src/lib/edit-user-profile-dialog.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Callout, Dialog, Flex, Text, VisuallyHidden } from "@radix-ui/themes";
-import { getMeQueryKey, Me, useUpdateMe } from "@repo/api";
+import { getMeQueryKey, Me, useUpdateMe } from "../api";
 import { useQueryClient } from "@tanstack/react-query";
 import * as React from "react";
 import { type ReactNode } from "react";

package/src/lib/edit-user-role-dialog.tsx

@@ -21,7 +21,7 @@ import {
   Skeleton,
 } from "./elements";
 import { getBestName } from "./utils";
-import { Member, useRoles } from "@repo/api";
+import { Member, useRoles } from "../api";
 
 interface EditUserRoleDialogProps extends Dialog.RootProps {
   open: boolean;

package/src/lib/elevated-access.tsx

@@ -5,7 +5,7 @@ import {
   useMe,
   useSendVerification,
   useVerify,
-} from "@repo/api";
+} from "../api";
 import { PropsWithChildren, useEffect, useRef, useState } from "react";
 import { PrimaryButton, SecondaryButton } from "./elements";
 import * as Otp from "./otp-input";

package/src/lib/invite-user-dialog.tsx

@@ -21,7 +21,7 @@ import {
 import { Label } from "./elements";
 import { isErrorLike } from "./utils";
 import { useInviteUser } from "./api/user";
-import { InviteMemberInput, MemberRole, useRoles } from "@repo/api";
+import { InviteMemberInput, MemberRole, useRoles } from "../api";
 
 /**
  * Used to stub a fake value for the role select. It will be selected by default

package/src/lib/logout-all-sessions-dialog.tsx

@@ -8,7 +8,7 @@ import {
   DestructiveButton,
   SecondaryButton,
 } from "./elements";
-import { getSessionsQueryKey, useRevokeAllSessions } from "@repo/api";
+import { getSessionsQueryKey, useRevokeAllSessions } from "../api";
 import { useQueryClient } from "@tanstack/react-query";
 import { SaveButton } from "./save-button";
 

package/src/lib/logout-dialog.tsx

@@ -8,11 +8,7 @@ import {
   DestructiveButton,
   SecondaryButton,
 } from "./elements";
-import {
-  ActiveSession,
-  getSessionsQueryKey,
-  useRevokeSession,
-} from "@repo/api";
+import { ActiveSession, getSessionsQueryKey, useRevokeSession } from "../api";
 import { useQueryClient } from "@tanstack/react-query";
 import { SaveButton } from "./save-button";
 import { parseUserAgent } from "./utils";

package/src/lib/organization-switcher.tsx

@@ -11,11 +11,7 @@ import {
   Text,
   VisuallyHidden,
 } from "@radix-ui/themes";
-import {
-  OrganizationInfo,
-  Organizations403,
-  Organizations404,
-} from "@repo/api";
+import { OrganizationInfo, Organizations403, Organizations404 } from "../api";
 
 type OrganizationSwitcherVariant = "ghost" | "outline";
 

package/src/lib/resend-invite-dialog.tsx

@@ -17,7 +17,7 @@ import {
   PrimaryButton,
   SecondaryButton,
 } from "./elements";
-import { Member } from "@repo/api";
+import { Member } from "../api";
 
 interface ResendInviteDialogProps extends AlertDialog.RootProps {
   user: Member;

package/src/lib/reset-mfa-dialog.tsx

@@ -8,7 +8,7 @@ import {
   DestructiveButton,
   SecondaryButton,
 } from "./elements";
-import { useDeleteTotpFactors } from "@repo/api";
+import { useDeleteTotpFactors } from "../api";
 import { useSecuritySettings } from "./use-security-settings";
 import { ElevatedAccess } from "./elevated-access";
 import { SaveButton } from "./save-button";

package/src/lib/revoke-invite-dialog.tsx

@@ -14,7 +14,7 @@ import {
   DestructiveButton,
   SecondaryButton,
 } from "./elements";
-import { Member } from "@repo/api";
+import { Member } from "../api";
 
 interface RevokeInviteDialogProps extends AlertDialog.RootProps {
   user: Member;

package/src/lib/set-password-dialog.tsx

@@ -11,7 +11,7 @@ import {
   SecondaryButton,
 } from "./elements";
 import * as Form from "@radix-ui/react-form";
-import { useCreatePassword } from "@repo/api";
+import { useCreatePassword } from "../api";
 import { useSecuritySettings } from "./use-security-settings";
 import { ElevatedAccess } from "./elevated-access";
 import { SaveButton } from "./save-button";

package/src/lib/use-security-settings.tsx

@@ -1,7 +1,7 @@
 import {
   AuthenticationInformationResponse,
   getAuthenticationInformationQueryKey,
-} from "@repo/api";
+} from "../api";
 import { useQueryClient } from "@tanstack/react-query";
 
 type Methods = "Password" | "Mfa" | "Passkey";

package/src/lib/user-actions-dropdown.tsx

@@ -2,7 +2,7 @@
 
 import { DropdownMenu } from "@radix-ui/themes";
 import * as React from "react";
-import { Member } from "@repo/api";
+import { Member } from "../api";
 import { DeleteUserDialog } from "./delete-user-dialog";
 import { EditUserRoleDialog } from "./edit-user-role-dialog";
 import {
@@ -12,7 +12,7 @@ import {
 } from "./elements";
 import { ResendInviteDialog } from "./resend-invite-dialog";
 import { RevokeInviteDialog } from "./revoke-invite-dialog";
-import { useRoles } from "@repo/api";
+import { useRoles } from "../api";
 
 interface UserActionsDropdownProps {
   user: Member;

package/src/lib/user-profile.tsx

@@ -12,7 +12,7 @@ import {
 } from "@radix-ui/themes";
 import clsx from "clsx";
 import { Avatar, SecondaryButton, Skeleton } from "./elements";
-import { Me } from "@repo/api";
+import { Me } from "../api";
 import { EditUserProfileDialog } from "./edit-user-profile-dialog";
 import { getBestName } from "./utils";
 import { getOAuthIcon, getOAuthName } from "./oauth-icons";
@@ -126,20 +126,9 @@ export function UserProfileLoading() {
       <DataList.Root>
         <DataList.Item align="center">
           <DataList.Label minWidth="220px" highContrast>
-            <Strong>Profile picture</Strong>
-          </DataList.Label>
-          <DataList.Value>
-            <Skeleton>
-              <Avatar size="2" fallback={<FallbackUserIcon />} />
-            </Skeleton>
-          </DataList.Value>
-        </DataList.Item>
-
-        <ListSeparator />
-
-        <DataList.Item align="center">
-          <DataList.Label highContrast>
-            <Strong>Full name</Strong>
+            <Strong>
+              <Skeleton>Full name</Skeleton>
+            </Strong>
           </DataList.Label>
           <DataList.Value>
             <Flex
@@ -159,7 +148,9 @@ export function UserProfileLoading() {
 
         <DataList.Item align="center">
           <DataList.Label highContrast>
-            <Strong>Email address</Strong>
+            <Strong>
+              <Skeleton>Email address</Skeleton>
+            </Strong>
           </DataList.Label>
           <DataList.Value>
             <Flex align="center" minHeight="var(--space-6)">
@@ -169,17 +160,6 @@ export function UserProfileLoading() {
             </Flex>
           </DataList.Value>
         </DataList.Item>
-
-        <ListSeparator />
-
-        <DataList.Item>
-          <DataList.Label highContrast>
-            <Strong>Connected accounts</Strong>
-          </DataList.Label>
-          <DataList.Value>
-            <Skeleton>Connected accounts</Skeleton>
-          </DataList.Value>
-        </DataList.Item>
       </DataList.Root>
     </Card>
   );

package/src/lib/user-security.tsx

@@ -10,9 +10,9 @@ import { ChangePasswordDialog } from "./change-password-dialog";
 import { AddMfaDialog } from "./add-mfa-dialog";
 import type {
   AuthenticationInformationResponseData as AuthenticationSettings,
-  PasswordVerificationMethod,
-  MfaVerificationMethod,
-} from "@repo/api";
+  AuthenticationInformationResponseDataVerificationMethodsPassword as PasswordVerificationMethod,
+  AuthenticationInformationResponseDataVerificationMethodsMfa as MfaVerificationMethod,
+} from "../api";
 import { ResetMfaDialog } from "./reset-mfa-dialog";
 import * as CardList from "../card-list";
 import { GenericError } from "./generic-error";
@@ -87,7 +87,7 @@ export function UserSecurityLoading() {
 function PasswordSettings({
   settings,
 }: {
-  settings: PasswordVerificationMethod;
+  settings: NonNullable<PasswordVerificationMethod>;
 }) {
   return (
     <Grid columns="auto 1fr auto" align="center" gap="4">
@@ -134,7 +134,7 @@ function MfaSettings({
   settings,
   isPasswordSet,
 }: {
-  settings: MfaVerificationMethod;
+  settings: NonNullable<MfaVerificationMethod>;
   isPasswordSet: boolean;
 }) {
   return (

package/src/lib/user-sessions.tsx

@@ -10,7 +10,7 @@ import {
 } from "./utils";
 import { LogoutDialog } from "./logout-dialog";
 import { LogoutAllSessionsDialog } from "./logout-all-sessions-dialog";
-import { ActiveSession } from "@repo/api";
+import { ActiveSession } from "../api";
 import * as CardList from "../card-list";
 import { IconPanel } from "./icon-panel";
 import { useState } from "react";

package/src/lib/users-filter.tsx

@@ -4,7 +4,7 @@ import { Select } from "@radix-ui/themes";
 import * as React from "react";
 import { SelectContent, SelectItem, SelectTrigger } from "./elements";
 import { useUsersManagementContext } from "./users-management-context";
-import { MemberRole } from "@repo/api";
+import { MemberRole } from "../api";
 
 const ALL_ROLES_NAME = "All";
 const ALL_ROLES_VALUE = "null";

package/src/lib/users-management-context.tsx

@@ -6,7 +6,7 @@ import {
   UsersManagementState,
   useUsersManagementState,
 } from "./users-management-state";
-import { ListMetadata } from "@repo/api";
+import { ListMetadata } from "../api";
 
 export interface UsersManagementContextType {
   state: UsersManagementState;

package/src/lib/users-management-state.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { canUseDOM } from "./utils";
-import { ListMetadata } from "@repo/api";
+import { ListMetadata } from "../api";
 
 export function useUsersManagementState(initialState: UsersManagementState) {
   const [[state, effects], dispatch] = React.useReducer(reducer, [

package/src/lib/users-management.tsx

@@ -34,7 +34,7 @@ import { getBestName, getComparativeReadableDate } from "./utils";
 import { USER_ROW_LIMIT } from "./constants";
 import { useUsersManagementContext } from "./users-management-context";
 import clsx from "clsx";
-import { Member, MemberRole, MembersQueryResult } from "@repo/api";
+import { Member, MemberRole, MembersQueryResult } from "../api";
 import { GenericError } from "./generic-error";
 
 interface UsersManagementProps {

package/src/lib/utils.ts

@@ -1,4 +1,4 @@
-import { Member } from "@repo/api";
+import { Member } from "../api";
 import { UAParser } from "ua-parser-js";
 import { WIDGETS_CLASS_NAMESPACE } from "./constants";
 

package/src/organization-switcher.client.tsx

@@ -5,7 +5,7 @@ import {
   AuthToken,
   OrganizationInfo,
   useOrganizations,
-} from "@repo/api";
+} from "./api";
 import * as React from "react";
 import { ErrorBoundary } from "./lib/error-boundary";
 import { useIsHydrated } from "./lib/use-is-hydrated";

package/src/user-profile.client.tsx

@@ -7,7 +7,7 @@ import {
   UserProfile as UserProfilePresentational,
 } from "./lib/user-profile";
 import { useIsHydrated } from "./lib/use-is-hydrated";
-import { ApiProvider, AuthToken, useMe } from "@repo/api";
+import { ApiProvider, AuthToken, useMe } from "./api";
 import { useWorkOsApiUrl } from "./lib/widgets-context";
 import { ErrorBoundary } from "./lib/error-boundary";
 

package/src/user-security.client.tsx

@@ -1,11 +1,7 @@
 "use client";
 
 import * as React from "react";
-import {
-  ApiProvider,
-  AuthToken,
-  useAuthenticationInformation,
-} from "@repo/api";
+import { ApiProvider, AuthToken, useAuthenticationInformation } from "./api";
 import {
   UserSecurityError,
   UserSecurityLoading,

package/src/user-sessions.client.tsx

@@ -7,7 +7,7 @@ import {
   UserSessions as UserSessionsPresentational,
 } from "./lib/user-sessions";
 import { useIsHydrated } from "./lib/use-is-hydrated";
-import { ApiProvider, useApi, useSessions } from "@repo/api";
+import { ApiProvider, useApi, useSessions } from "./api";
 import { useWorkOsApiUrl } from "./lib/widgets-context";
 import { ErrorBoundary } from "./lib/error-boundary";
 import { useQuery } from "@tanstack/react-query";

package/src/users-management.client.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ApiProvider, AuthToken, useRoles } from "@repo/api";
+import { ApiProvider, AuthToken, useRoles } from "./api";
 import * as React from "react";
 import { useUsers } from "./lib/api/user";
 import { useIsHydrated } from "./lib/use-is-hydrated";

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2024 WorkOS
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.