New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@clerk/shared

Package Overview
Dependencies
Maintainers
8
Versions
2129
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@clerk/shared - npm Package Compare versions

Comparing version 2.20.17-canary.v20250131085600 to 2.20.17-canary.v20250131150236

dist/chunk-2UVTND3H.mjs

4

dist/index.js

@@ -1212,3 +1212,3 @@ "use strict";

// src/versionSelector.ts
var versionSelector = (clerkJSVersion, packageVersion = "5.50.2-canary.v20250131085600") => {
var versionSelector = (clerkJSVersion, packageVersion = "5.50.2-canary.v20250131150236") => {
if (clerkJSVersion) {

@@ -1220,3 +1220,3 @@ return clerkJSVersion;

if (prereleaseTag === "snapshot") {
return "5.50.2-canary.v20250131085600";
return "5.50.2-canary.v20250131150236";
}

@@ -1223,0 +1223,0 @@ return prereleaseTag;

@@ -280,3 +280,3 @@ "use strict";

// src/versionSelector.ts
var versionSelector = (clerkJSVersion, packageVersion = "5.50.2-canary.v20250131085600") => {
var versionSelector = (clerkJSVersion, packageVersion = "5.50.2-canary.v20250131150236") => {
if (clerkJSVersion) {

@@ -288,3 +288,3 @@ return clerkJSVersion;

if (prereleaseTag === "snapshot") {
return "5.50.2-canary.v20250131085600";
return "5.50.2-canary.v20250131150236";
}

@@ -291,0 +291,0 @@ return prereleaseTag;

@@ -24,17 +24,66 @@ import React, { PropsWithChildren } from 'react';

type CacheSetter<CData = any> = (data?: CData | ((currentData?: CData) => Promise<undefined | CData> | undefined | CData)) => Promise<CData | undefined>;
/**
* @interface
*/
type PaginatedResources<T = unknown, Infinite = false> = {
/**
* An array that contains the fetched data.
*/
data: T[];
/**
* The total count of data that exist remotely.
*/
count: number;
/**
* Clerk's API response error object.
*/
error: ClerkAPIResponseError | null;
/**
* A boolean that is `true` if there is an ongoing request and there is no fetched data.
*/
isLoading: boolean;
/**
* A boolean that is `true` if there is an ongoing request or a revalidation.
*/
isFetching: boolean;
/**
* A boolean that indicates the request failed.
*/
isError: boolean;
/**
* A number that indicates the current page.
*/
page: number;
/**
* A number that indicates the total amount of pages. It is calculated based on `count`, `initialPage`, and `pageSize`.
*/
pageCount: number;
/**
* A function that triggers a specific page to be loaded.
*/
fetchPage: ValueOrSetter<number>;
/**
*
* A helper function that triggers the previous page to be loaded. This is the same as `fetchPage(page => Math.max(0, page - 1))`.
*/
fetchPrevious: () => void;
/**
* A helper function that triggers the next page to be loaded. This is the same as `fetchPage(page => Math.min(pageCount, page + 1))`.
*/
fetchNext: () => void;
/**
* A boolean that indicates if there are available pages to be fetched.
*/
hasNextPage: boolean;
/**
* A boolean that indicates if there are available pages to be fetched.
*/
hasPreviousPage: boolean;
/**
* A function that triggers a revalidation of the current page.
*/
revalidate: () => Promise<void>;
/**
* A function that allows you to set the data manually.
*/
setData: Infinite extends true ? CacheSetter<(ClerkPaginatedResponse<T> | undefined)[]> : CacheSetter<ClerkPaginatedResponse<T> | undefined>;

@@ -47,7 +96,7 @@ };

/**
* Persists the previous pages with new ones in the same array
* If `true`, newly fetched data will be appended to the existing list rather than replacing it. Useful for implementing infinite scroll functionality. Defaults to `false`.
*/
infinite?: boolean;
/**
* Return the previous key's data until the new data has been loaded
* If `true`, the previous data will be kept in the cache until new data is fetched. Defaults to `false`.
*/

@@ -58,36 +107,111 @@ keepPreviousData?: boolean;

type UseOrganizationParams = {
/**
* If set to `true`, all default properties will be used. Otherwise, accepts an object with an optional `enrollmentMode` property of type [`OrganizationEnrollmentMode`](https://clerk.com/docs/references/react/use-organization#organization-enrollment-mode) and any of the properties described in [Shared properties](https://clerk.com/docs/references/react/use-organization#shared-properties).
*/
domains?: true | PaginatedHookConfig<GetDomainsParams>;
/**
* If set to `true`, all default properties will be used. Otherwise, accepts an object with an optional `status` property of type [`OrganizationInvitationStatus`](https://clerk.com/docs/references/react/use-organization#organization-invitation-status) and any of the properties described in [Shared properties](https://clerk.com/docs/references/react/use-organization#shared-properties).
*/
membershipRequests?: true | PaginatedHookConfig<GetMembershipRequestParams>;
/**
* If set to `true`, all default properties will be used. Otherwise, accepts an object with an optional `role` property of type [`OrganizationCustomRoleKey[]`](https://clerk.com/docs/references/react/use-organization#organization-custome-role-key) and any of the properties described in [Shared properties](https://clerk.com/docs/references/react/use-organization#shared-properties).
*/
memberships?: true | PaginatedHookConfig<GetMembersParams>;
/**
* If set to `true`, all default properties will be used. Otherwise, accepts an object with an optional `status` property of type [`OrganizationInvitationStatus`](https://clerk.com/docs/references/react/use-organization#organization-invitation-status) and any of the properties described in [Shared properties](https://clerk.com/docs/references/react/use-organization#shared-properties).
*/
invitations?: true | PaginatedHookConfig<GetInvitationsParams>;
};
type UseOrganization = <T extends UseOrganizationParams>(params?: T) => {
/**
* A boolean that indicates whether Clerk has completed initialization. Initially `false`, becomes `true` once Clerk loads.
*/
isLoaded: false;
/**
* The currently active organization.
*/
organization: undefined;
/**
* The current organization membership.
*/
membership: undefined;
/**
* Includes a paginated list of the organization's domains.
*/
domains: PaginatedResourcesWithDefault<OrganizationDomainResource>;
/**
* Includes a paginated list of the organization's membership requests.
*/
membershipRequests: PaginatedResourcesWithDefault<OrganizationMembershipRequestResource>;
/**
* Includes a paginated list of the organization's memberships.
*/
memberships: PaginatedResourcesWithDefault<OrganizationMembershipResource>;
/**
* Includes a paginated list of the organization's invitations.
*/
invitations: PaginatedResourcesWithDefault<OrganizationInvitationResource>;
} | {
/**
* A boolean that indicates whether Clerk has completed initialization. Initially `false`, becomes `true` once Clerk loads.
*/
isLoaded: true;
/**
* The currently active organization.
*/
organization: OrganizationResource;
/**
* The current organization membership.
*/
membership: undefined;
/**
* Includes a paginated list of the organization's domains.
*/
domains: PaginatedResourcesWithDefault<OrganizationDomainResource>;
/**
* Includes a paginated list of the organization's membership requests.
*/
membershipRequests: PaginatedResourcesWithDefault<OrganizationMembershipRequestResource>;
/**
* Includes a paginated list of the organization's memberships.
*/
memberships: PaginatedResourcesWithDefault<OrganizationMembershipResource>;
/**
* Includes a paginated list of the organization's invitations.
*/
invitations: PaginatedResourcesWithDefault<OrganizationInvitationResource>;
} | {
/**
* A boolean that indicates whether Clerk has completed initialization. Initially `false`, becomes `true` once Clerk loads.
*/
isLoaded: boolean;
/**
* The currently active organization.
*/
organization: OrganizationResource | null;
/**
* The current organization membership.
*/
membership: OrganizationMembershipResource | null | undefined;
/**
* Includes a paginated list of the organization's domains.
*/
domains: PaginatedResources<OrganizationDomainResource, T['membershipRequests'] extends {
infinite: true;
} ? true : false> | null;
/**
* Includes a paginated list of the organization's membership requests.
*/
membershipRequests: PaginatedResources<OrganizationMembershipRequestResource, T['membershipRequests'] extends {
infinite: true;
} ? true : false> | null;
/**
* Includes a paginated list of the organization's memberships.
*/
memberships: PaginatedResources<OrganizationMembershipResource, T['memberships'] extends {
infinite: true;
} ? true : false> | null;
/**
* Includes a paginated list of the organization's invitations.
*/
invitations: PaginatedResources<OrganizationInvitationResource, T['invitations'] extends {

@@ -97,26 +221,74 @@ infinite: true;

};
/**
* The `useOrganization()` hook retrieves attributes of the currently active organization.
*/
declare const useOrganization: UseOrganization;
type UseOrganizationListParams = {
/**
* `true` or an object with any of the properties described in [Shared properties](https://clerk.com/docs/references/react/use-organization-list#shared-properties). If set to `true`, all default properties will be used.
*/
userMemberships?: true | PaginatedHookConfig<GetUserOrganizationMembershipParams>;
/**
* `true` or an object with [`status: OrganizationInvitationStatus`](https://clerk.com/docs/references/react/use-organization-list#organization-invitation-status) or any of the properties described in [Shared properties](https://clerk.com/docs/references/react/use-organization-list#shared-properties). If set to `true`, all default properties will be used.
*/
userInvitations?: true | PaginatedHookConfig<GetUserOrganizationInvitationsParams>;
/**
* `true` or an object with [`status: OrganizationSuggestionsStatus | OrganizationSuggestionStatus[]`](https://clerk.com/docs/references/react/use-organization-list#organization-suggestion-status) or any of the properties described in [Shared properties](https://clerk.com/docs/references/react/use-organization-list#shared-properties). If set to `true`, all default properties will be used.
*/
userSuggestions?: true | PaginatedHookConfig<GetUserOrganizationSuggestionsParams>;
};
type UseOrganizationList = <T extends UseOrganizationListParams>(params?: T) => {
/**
* A boolean that indicates whether Clerk has completed initialization. Initially `false`, becomes `true` once Clerk loads.
*/
isLoaded: false;
/**
* A function that returns a `Promise` which resolves to the newly created `Organization`.
*/
createOrganization: undefined;
/**
* A function that sets the active session and/or organization.
*/
setActive: undefined;
/**
* Returns `PaginatedResources` which includes a list of the user's organization memberships.
*/
userMemberships: PaginatedResourcesWithDefault<OrganizationMembershipResource>;
/**
* Returns `PaginatedResources` which includes a list of the user's organization invitations.
*/
userInvitations: PaginatedResourcesWithDefault<UserOrganizationInvitationResource>;
/**
* Returns `PaginatedResources` which includes a list of suggestions for organizations that the user can join.
*/
userSuggestions: PaginatedResourcesWithDefault<OrganizationSuggestionResource>;
} | {
/**
* A boolean that indicates whether Clerk has completed initialization. Initially `false`, becomes `true` once Clerk loads.
*/
isLoaded: boolean;
/**
* A function that returns a `Promise` which resolves to the newly created `Organization`.
*/
createOrganization: (params: CreateOrganizationParams) => Promise<OrganizationResource>;
/**
* A function that sets the active session and/or organization.
*/
setActive: SetActive;
/**
* Returns `PaginatedResources` which includes a list of the user's organization memberships.
*/
userMemberships: PaginatedResources<OrganizationMembershipResource, T['userMemberships'] extends {
infinite: true;
} ? true : false>;
/**
* Returns `PaginatedResources` which includes a list of the user's organization invitations.
*/
userInvitations: PaginatedResources<UserOrganizationInvitationResource, T['userInvitations'] extends {
infinite: true;
} ? true : false>;
/**
* Returns `PaginatedResources` which includes a list of suggestions for organizations that the user can join.
*/
userSuggestions: PaginatedResources<OrganizationSuggestionResource, T['userSuggestions'] extends {

@@ -126,2 +298,5 @@ infinite: true;

};
/**
* The `useOrganizationList()` hook provides access to the current user's organization memberships, invitations, and suggestions. It also includes methods for creating new organizations and managing the active organization.
*/
declare const useOrganizationList: UseOrganizationList;

@@ -133,44 +308,186 @@

/**
* Returns the current auth state and if a session exists, the session object.
* The `useSession()` hook provides access to the current user's [`Session`](https://clerk.com/docs/references/javascript/session) object, as well as helpers for setting the active session.
*
* Until Clerk loads and initializes, `isLoaded` will be set to `false`.
* Once Clerk loads, `isLoaded` will be set to `true`, and you can
* safely access `isSignedIn` state and `session`.
* @example
* ### Access the `Session` object
*
* @example
* The following example uses the `useSession()` hook to access the `Session` object, which has the `lastActiveAt` property. The `lastActiveAt` property is a `Date` object used to show the time the session was last active.
*
* ```tsx {{ filename: 'src/Home.tsx' }}
* import { useSession } from '@clerk/clerk-react'
*
* function Hello() {
* const { isSignedIn, session } = useSession();
* if(!isSignedIn) {
* return null;
* export default function Home() {
* const { isLoaded, session, isSignedIn } = useSession()
*
* if (!isLoaded) {
* // Handle loading state
* return null
* }
* return <div>{session.updatedAt}</div>
* if (!isSignedIn) {
* // Handle signed out state
* return null
* }
*
* return (
* <div>
* <p>This session has been active since {session.lastActiveAt.toLocaleString()}</p>
* </div>
* )
* }
* ```
*/
declare const useSession: UseSession;
type UseSessionList = () => UseSessionListReturn;
declare const useSessionList: UseSessionList;
/**
* The `useSessionList()` hook returns an array of [`Session`](https://clerk.com/docs/references/javascript/session) objects that have been registered on the client device.
*
* @example
* ### Get a list of sessions
*
* The following example uses `useSessionList()` to get a list of sessions that have been registered on the client device. The `sessions` property is used to show the number of times the user has visited the page.
*
* ```tsx {{ filename: 'src/Home.tsx' }}
* import { useSessionList } from '@clerk/clerk-react'
*
* export default function Home() {
* const { isLoaded, sessions } = useSessionList()
*
* if (!isLoaded) {
* // Handle loading state
* return null
* }
*
* return (
* <div>
* <p>Welcome back. You've been here {sessions.length} times before.</p>
* </div>
* )
* }
* ```
*/
declare const useSessionList: () => UseSessionListReturn;
/**
* Returns the current auth state and if a user is signed in, the user object.
* The `useUser()` hook provides access to the current user's [`User`](https://clerk.com/docs/references/javascript/user/user) object, which contains all the data for a single user in your application and provides methods to manage their account. This hook also allows you to check if the user is signed in and if Clerk has loaded and initialized.
*
* Until Clerk loads and initializes, `isLoaded` will be set to `false`.
* Once Clerk loads, `isLoaded` will be set to `true`, and you can
* safely access `isSignedIn` state and `user`.
* @example
* ### Get the current user
*
* The following example uses the `useUser()` hook to access the [`User`](https://clerk.com/docs/references/javascript/user/user) object, which contains the current user's data such as their full name. The `isLoaded` and `isSignedIn` properties are used to handle the loading state and to check if the user is signed in, respectively.
*
* ```tsx {{ filename: 'src/Example.tsx' }}
* export default function Example() {
* const { isSignedIn, user, isLoaded } = useUser()
*
* if (!isLoaded) {
* return <div>Loading...</div>
* }
*
* if (!isSignedIn) {
* return <div>Sign in to view this page</div>
* }
*
* return <div>Hello {user.firstName}!</div>
* }
* ```
*
* @example
* ### Update user data
*
* The following example uses the `useUser()` hook to access the [`User`](https://clerk.com/docs/references/javascript/user/user) object, which calls the [`update()`](https://clerk.com/docs/references/javascript/user/user#update) method to update the current user's information.
*
* ```tsx {{ filename: 'src/Home.tsx' }}
* import { useUser } from '@clerk/clerk-react'
*
* function Hello() {
* const { isSignedIn, user } = useUser();
* if(!isSignedIn) {
* return null;
* export default function Home() {
* const { isLoaded, user } = useUser()
*
* if (!isLoaded) {
* // Handle loading state
* return null
* }
* return <div>Hello, {user.firstName}</div>
*
* if (!user) return null
*
* const updateUser = async () => {
* await user.update({
* firstName: 'John',
* lastName: 'Doe',
* })
* }
*
* return (
* <>
* <button onClick={updateUser}>Update your name</button>
* <p>user.firstName: {user?.firstName}</p>
* <p>user.lastName: {user?.lastName}</p>
* </>
* )
* }
* ```
*
* @example
* ### Reload user data
*
* The following example uses the `useUser()` hook to access the [`User`](https://clerk.com/docs/references/javascript/user/user) object, which calls the [`reload()`](https://clerk.com/docs/references/javascript/user/user#reload) method to get the latest user's information.
*
* ```tsx {{ filename: 'src/Home.tsx' }}
* import { useUser } from '@clerk/clerk-react'
*
* export default function Home() {
* const { isLoaded, user } = useUser()
*
* if (!isLoaded) {
* // Handle loading state
* return null
* }
*
* if (!user) return null
*
* const updateUser = async () => {
* // Update data via an API endpoint
* const updateMetadata = await fetch('/api/updateMetadata')
*
* // Check if the update was successful
* if (updateMetadata.message !== 'success') {
* throw new Error('Error updating')
* }
*
* // If the update was successful, reload the user data
* await user.reload()
* }
*
* return (
* <>
* <button onClick={updateUser}>Update your metadata</button>
* <p>user role: {user?.publicMetadata.role}</p>
* </>
* )
* }
* ```
*/
declare function useUser(): UseUserReturn;
/**
* The `useClerk()` hook provides access to the [`Clerk`](https://clerk.com/docs/references/javascript/clerk/clerk) object, allowing you to build alternatives to any Clerk Component.
*
* @warning
* This composable should only be used for advanced use cases, such as building a completely custom OAuth flow or as an escape hatch to access to the `Clerk` object.
*
* @returns The `Clerk` object, which includes all the methods and properties listed in the [`Clerk` reference](https://clerk.com/docs/references/javascript/clerk/clerk).
*
* @example
*
* The following example uses the `useClerk()` hook to access the `clerk` object. The `clerk` object is used to call the [`openSignIn()`](https://clerk.com/docs/references/javascript/clerk/clerk#sign-in) method to open the sign-in modal.
*
* ```tsx {{ filename: 'src/Home.tsx' }}
* import { useClerk } from '@clerk/clerk-react'
*
* export default function Home() {
* const clerk = useClerk()
*
* return <button onClick={() => clerk.openSignIn({})}>Sign in</button>
* }
* ```
*/
declare const useClerk: () => LoadedClerk;

@@ -189,4 +506,13 @@

} ? never : null) : T;
/**
* The optional options object.
*/
type UseReverificationOptions = {
/**
* A callback function that is invoked when the user cancels the reverification process.
*/
onCancel?: () => void;
/**
* Determines if an error should throw when the user cancels the reverification process. Defaults to `false`.
*/
throwOnCancel?: boolean;

@@ -196,18 +522,62 @@ };

/**
* Receives a fetcher async function and returned an enhanced fetcher that automatically handles the reverification flow
* by displaying a prebuilt UI component when the request from the fetcher fails with a reverification error response.
* The `useReverification()` hook is used to handle a session's reverification flow. If a request requires reverification, a modal will display, prompting the user to verify their credentials. Upon successful verification, the original request will automatically retry.
*
* While the UI component is displayed the promise is still pending.
* On success: the original request is retried one more time.
* On error:
* (1) by default the fetcher will return `null` and the `onCancel` callback will be executed.
* (2) when `throwOnCancel: true` instead of returning null, the returned fetcher will throw a `ClerkRuntimeError`.
* @warning
*
* This feature is currently in public beta. **It is not recommended for production use.**
*
* Depending on the SDK you're using, this feature requires `@clerk/nextjs@6.5.0` or later, `@clerk/clerk-react@5.17.0` or later, and `@clerk/clerk-js@5.35.0` or later.
*
* @example
* A simple example:
* ### Handle cancellation of the reverification process
*
* function Hello() {
* const [fetchBalance] = useReverification(()=> fetch('/transfer-balance',{method:"POST"}));
* return <button onClick={fetchBalance}>...</button>
* The following example demonstrates how to handle scenarios where a user cancels the reverification flow, such as closing the modal, which might result in `myData` being `null`.
*
* In the following example, `myFetcher` would be a function in your backend that fetches data from the route that requires reverification. See the [guide on how to require reverification](https://clerk.com/docs/guides/reverification) for more information.
*
* ```tsx {{ filename: 'src/components/MyButton.tsx' }}
* import { useReverification } from '@clerk/react'
*
* export function MyButton() {
* const [enhancedFetcher] = useReverification(myFetcher)
*
* const handleClick = async () => {
* const myData = await enhancedFetcher()
* // If `myData` is null, the user canceled the reverification process
* // You can choose how your app responds. This example returns null.
* if (!myData) return
* }
*
* return <button onClick={handleClick}>Update User</button>
* }
* ```
*
* @example
* ### Handle `throwOnCancel`
*
* When `throwOnCancel` is set to `true`, the fetcher will throw a `ClerkRuntimeError` with the code `"reverification_cancelled"` if the user cancels the reverification flow (for example, by closing the modal). This error can be caught and handled according to your app's needs. For example, by displaying a toast notification to the user or silently ignoring the cancellation.
*
* In this example, `myFetcher` would be a function in your backend that fetches data from the route that requires reverification. See the [guide on how to require reverification](https://clerk.com/docs/guides/reverification) for more information.
*
* ```tsx {{ filename: 'src/components/MyButton.tsx' }}
* import { useReverification } from '@clerk/clerk-react'
* import { isClerkRuntimeError } from '@clerk/clerk-react/errors'
*
* export function MyButton() {
* const [enhancedFetcher] = useReverification(myFetcher, { throwOnCancel: true })
*
* const handleClick = async () => {
* try {
* const myData = await enhancedFetcher()
* } catch (e) {
* // Handle if user cancels the reverification process
* if (isClerkRuntimeError(e) && e.code === 'reverification_cancelled') {
* console.error('User cancelled reverification', e.code)
* }
* }
* }
*
* return <button onClick={handleClick}>Update user</button>
* }
* ```
*/

@@ -214,0 +584,0 @@ declare function useReverification<Fetcher extends (...args: any[]) => Promise<any> | undefined, Options extends UseReverificationOptions>(fetcher: Fetcher, options?: Options): UseReverificationResult<Fetcher, Options>;

@@ -27,3 +27,3 @@ "use strict";

module.exports = __toCommonJS(versionSelector_exports);
var versionSelector = (clerkJSVersion, packageVersion = "5.50.2-canary.v20250131085600") => {
var versionSelector = (clerkJSVersion, packageVersion = "5.50.2-canary.v20250131150236") => {
if (clerkJSVersion) {

@@ -35,3 +35,3 @@ return clerkJSVersion;

if (prereleaseTag === "snapshot") {
return "5.50.2-canary.v20250131085600";
return "5.50.2-canary.v20250131150236";
}

@@ -38,0 +38,0 @@ return prereleaseTag;

{
"name": "@clerk/shared",
"version": "2.20.17-canary.v20250131085600",
"version": "2.20.17-canary.v20250131150236",
"description": "Internal package utils used by the Clerk SDKs",

@@ -126,3 +126,3 @@ "repository": {

"swr": "^2.2.0",
"@clerk/types": "^4.44.2"
"@clerk/types": "^4.44.3-canary.v20250131150236"
},

@@ -129,0 +129,0 @@ "devDependencies": {

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc