@clerk/react 6.3.0 → 6.4.0-snapshot.v20260413204347

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,195 +0,0 @@
1
- import * as _clerk_shared_types from '@clerk/shared/types';
2
- import { HandleOAuthCallbackParams, ShowWhenCondition, PendingSessionOptions, UseAuthReturn } from '@clerk/shared/types';
3
- import React from 'react';
4
- import { WithClerkProp } from './types.mjs';
5
-
6
- declare const ClerkLoaded: ({ children }: React.PropsWithChildren<unknown>) => React.ReactNode;
7
- declare const ClerkLoading: ({ children }: React.PropsWithChildren<unknown>) => React.ReactNode;
8
- declare const ClerkFailed: ({ children }: React.PropsWithChildren<unknown>) => React.ReactNode;
9
- declare const ClerkDegraded: ({ children }: React.PropsWithChildren<unknown>) => React.ReactNode;
10
- type ShowProps = React.PropsWithChildren<{
11
- fallback?: React.ReactNode;
12
- when: ShowWhenCondition;
13
- } & PendingSessionOptions>;
14
- /**
15
- * Use `<Show/>` to conditionally render content based on user authorization or sign-in state.
16
- * Returns `null` while auth is loading. Set `treatPendingAsSignedOut` to treat
17
- * pending sessions as signed out during that period.
18
- *
19
- * The `when` prop supports:
20
- * - `"signed-in"` or `"signed-out"` shorthands
21
- * - Authorization descriptors (e.g., `{ permission: "org:billing:manage" }`, `{ role: "admin" }`)
22
- * - A predicate function `(has) => boolean` that receives the `has` helper
23
- *
24
- * @example
25
- * ```tsx
26
- * <Show when={{ permission: "org:billing:manage" }} fallback={<p>Unauthorized</p>}>
27
- * <BillingSettings />
28
- * </Show>
29
- *
30
- * <Show when={{ role: "admin" }}>
31
- * <AdminPanel />
32
- * </Show>
33
- *
34
- * <Show when={(has) => has({ permission: "org:read" }) && isFeatureEnabled}>
35
- * <ProtectedFeature />
36
- * </Show>
37
- * ```
38
- *
39
- */
40
- declare const Show: ({ children, fallback, treatPendingAsSignedOut, when }: ShowProps) => React.ReactNode;
41
- declare const RedirectToSignIn: {
42
- (props: _clerk_shared_types.Without<WithClerkProp<_clerk_shared_types.SignInRedirectOptions>, "clerk">): React.JSX.Element | null;
43
- displayName: string;
44
- };
45
- declare const RedirectToSignUp: {
46
- (props: _clerk_shared_types.Without<WithClerkProp<_clerk_shared_types.SignUpRedirectOptions>, "clerk">): React.JSX.Element | null;
47
- displayName: string;
48
- };
49
- declare const RedirectToTasks: {
50
- (props: _clerk_shared_types.Without<WithClerkProp<_clerk_shared_types.TasksRedirectOptions>, "clerk">): React.JSX.Element | null;
51
- displayName: string;
52
- };
53
- /**
54
- * @function
55
- * @deprecated Use [`redirectToUserProfile()`](https://clerk.com/docs/reference/objects/clerk#redirect-to-user-profile) instead.
56
- */
57
- declare const RedirectToUserProfile: {
58
- (props: _clerk_shared_types.Without<{
59
- clerk: _clerk_shared_types.LoadedClerk;
60
- component?: string;
61
- }, "clerk">): React.JSX.Element | null;
62
- displayName: string;
63
- };
64
- /**
65
- * @function
66
- * @deprecated Use [`redirectToOrganizationProfile()`](https://clerk.com/docs/reference/objects/clerk#redirect-to-organization-profile) instead.
67
- */
68
- declare const RedirectToOrganizationProfile: {
69
- (props: _clerk_shared_types.Without<{
70
- clerk: _clerk_shared_types.LoadedClerk;
71
- component?: string;
72
- }, "clerk">): React.JSX.Element | null;
73
- displayName: string;
74
- };
75
- /**
76
- * @function
77
- * @deprecated Use [`redirectToCreateOrganization()`](https://clerk.com/docs/reference/objects/clerk#redirect-to-create-organization) instead.
78
- */
79
- declare const RedirectToCreateOrganization: {
80
- (props: _clerk_shared_types.Without<{
81
- clerk: _clerk_shared_types.LoadedClerk;
82
- component?: string;
83
- }, "clerk">): React.JSX.Element | null;
84
- displayName: string;
85
- };
86
- declare const AuthenticateWithRedirectCallback: {
87
- (props: _clerk_shared_types.Without<WithClerkProp<HandleOAuthCallbackParams>, "clerk">): React.JSX.Element | null;
88
- displayName: string;
89
- };
90
- declare const MultisessionAppSupport: ({ children }: React.PropsWithChildren<unknown>) => React.JSX.Element;
91
-
92
- /**
93
- * @inline
94
- */
95
- type UseAuthOptions = PendingSessionOptions | undefined | null;
96
- /**
97
- * The `useAuth()` hook provides access to the current user's authentication state and methods to manage the active session.
98
- *
99
- * > [!NOTE]
100
- * > To access auth data server-side, see the [`Auth` object reference doc](https://clerk.com/docs/reference/backend/types/auth-object).
101
- *
102
- * <If sdk="nextjs">
103
- * By default, Next.js opts all routes into static rendering. If you need to opt a route or routes into dynamic rendering because you need to access the authentication data at request time, you can create a boundary by passing the `dynamic` prop to `<ClerkProvider>`. See the [guide on rendering modes](https://clerk.com/docs/guides/development/rendering-modes) for more information, including code examples.
104
- * </If>
105
- *
106
- * @unionReturnHeadings
107
- * ["Initialization", "Signed out", "Signed in (no active organization)", "Signed in (with active organization)"]
108
- *
109
- * @param [options] - An object containing options for the `useAuth()` hook. `treatPendingAsSignedOut` is a boolean that indicates whether pending sessions are considered as signed out or not. Defaults to `true`.
110
- *
111
- * @function
112
- *
113
- * @example
114
- *
115
- * The following example demonstrates how to use the `useAuth()` hook to access the current auth state, like whether the user is signed in or not. It also includes a basic example for using the `getToken()` method to retrieve a session token for fetching data from an external resource.
116
- *
117
- * <Tabs items='React,Next.js'>
118
- * <Tab>
119
- *
120
- * ```tsx {{ filename: 'src/pages/ExternalDataPage.tsx' }}
121
- * import { useAuth } from '@clerk/react'
122
- *
123
- * export default function ExternalDataPage() {
124
- * const { userId, sessionId, getToken, isLoaded, isSignedIn } = useAuth()
125
- *
126
- * const fetchExternalData = async () => {
127
- * const token = await getToken()
128
- *
129
- * // Fetch data from an external API
130
- * const response = await fetch('https://api.example.com/data', {
131
- * headers: {
132
- * Authorization: `Bearer ${token}`,
133
- * },
134
- * })
135
- *
136
- * return response.json()
137
- * }
138
- *
139
- * if (!isLoaded) {
140
- * return <div>Loading...</div>
141
- * }
142
- *
143
- * if (!isSignedIn) {
144
- * return <div>Sign in to view this page</div>
145
- * }
146
- *
147
- * return (
148
- * <div>
149
- * <p>
150
- * Hello, {userId}! Your current active session is {sessionId}.
151
- * </p>
152
- * <button onClick={fetchExternalData}>Fetch Data</button>
153
- * </div>
154
- * )
155
- * }
156
- * ```
157
- *
158
- * </Tab>
159
- * <Tab>
160
- *
161
- * {@include ../../docs/use-auth.md#nextjs-01}
162
- *
163
- * </Tab>
164
- * </Tabs>
165
- */
166
- declare const useAuth: (options?: UseAuthOptions) => UseAuthReturn;
167
- /**
168
- * A hook that derives and returns authentication state and utility functions based on the provided auth object.
169
- *
170
- * @param authObject - An object containing authentication-related properties and functions.
171
- *
172
- * @returns A derived authentication state with helper methods. If the authentication state is invalid, an error is thrown.
173
- *
174
- * @remarks
175
- * This hook inspects session, user, and organization information to determine the current authentication state.
176
- * It returns an object that includes various properties such as whether the state is loaded, if a user is signed in,
177
- * session and user identifiers, Organization Roles, and a `has` function for authorization checks.
178
- * Additionally, it provides `signOut` and `getToken` functions if applicable.
179
- *
180
- * @example
181
- * ```tsx
182
- * const {
183
- * isLoaded,
184
- * isSignedIn,
185
- * userId,
186
- * orgId,
187
- * has,
188
- * signOut,
189
- * getToken
190
- * } = useDerivedAuth(authObject);
191
- * ```
192
- */
193
- declare function useDerivedAuth(authObject: any, { treatPendingAsSignedOut }?: PendingSessionOptions): UseAuthReturn;
194
-
195
- export { AuthenticateWithRedirectCallback as A, ClerkDegraded as C, MultisessionAppSupport as M, RedirectToCreateOrganization as R, Show as S, ClerkFailed as a, ClerkLoaded as b, ClerkLoading as c, RedirectToOrganizationProfile as d, RedirectToSignIn as e, RedirectToSignUp as f, RedirectToTasks as g, RedirectToUserProfile as h, type ShowProps as i, useAuth as j, useDerivedAuth as u };
@@ -1,195 +0,0 @@
1
- import * as _clerk_shared_types from '@clerk/shared/types';
2
- import { HandleOAuthCallbackParams, ShowWhenCondition, PendingSessionOptions, UseAuthReturn } from '@clerk/shared/types';
3
- import React from 'react';
4
- import { WithClerkProp } from './types.js';
5
-
6
- declare const ClerkLoaded: ({ children }: React.PropsWithChildren<unknown>) => React.ReactNode;
7
- declare const ClerkLoading: ({ children }: React.PropsWithChildren<unknown>) => React.ReactNode;
8
- declare const ClerkFailed: ({ children }: React.PropsWithChildren<unknown>) => React.ReactNode;
9
- declare const ClerkDegraded: ({ children }: React.PropsWithChildren<unknown>) => React.ReactNode;
10
- type ShowProps = React.PropsWithChildren<{
11
- fallback?: React.ReactNode;
12
- when: ShowWhenCondition;
13
- } & PendingSessionOptions>;
14
- /**
15
- * Use `<Show/>` to conditionally render content based on user authorization or sign-in state.
16
- * Returns `null` while auth is loading. Set `treatPendingAsSignedOut` to treat
17
- * pending sessions as signed out during that period.
18
- *
19
- * The `when` prop supports:
20
- * - `"signed-in"` or `"signed-out"` shorthands
21
- * - Authorization descriptors (e.g., `{ permission: "org:billing:manage" }`, `{ role: "admin" }`)
22
- * - A predicate function `(has) => boolean` that receives the `has` helper
23
- *
24
- * @example
25
- * ```tsx
26
- * <Show when={{ permission: "org:billing:manage" }} fallback={<p>Unauthorized</p>}>
27
- * <BillingSettings />
28
- * </Show>
29
- *
30
- * <Show when={{ role: "admin" }}>
31
- * <AdminPanel />
32
- * </Show>
33
- *
34
- * <Show when={(has) => has({ permission: "org:read" }) && isFeatureEnabled}>
35
- * <ProtectedFeature />
36
- * </Show>
37
- * ```
38
- *
39
- */
40
- declare const Show: ({ children, fallback, treatPendingAsSignedOut, when }: ShowProps) => React.ReactNode;
41
- declare const RedirectToSignIn: {
42
- (props: _clerk_shared_types.Without<WithClerkProp<_clerk_shared_types.SignInRedirectOptions>, "clerk">): React.JSX.Element | null;
43
- displayName: string;
44
- };
45
- declare const RedirectToSignUp: {
46
- (props: _clerk_shared_types.Without<WithClerkProp<_clerk_shared_types.SignUpRedirectOptions>, "clerk">): React.JSX.Element | null;
47
- displayName: string;
48
- };
49
- declare const RedirectToTasks: {
50
- (props: _clerk_shared_types.Without<WithClerkProp<_clerk_shared_types.TasksRedirectOptions>, "clerk">): React.JSX.Element | null;
51
- displayName: string;
52
- };
53
- /**
54
- * @function
55
- * @deprecated Use [`redirectToUserProfile()`](https://clerk.com/docs/reference/objects/clerk#redirect-to-user-profile) instead.
56
- */
57
- declare const RedirectToUserProfile: {
58
- (props: _clerk_shared_types.Without<{
59
- clerk: _clerk_shared_types.LoadedClerk;
60
- component?: string;
61
- }, "clerk">): React.JSX.Element | null;
62
- displayName: string;
63
- };
64
- /**
65
- * @function
66
- * @deprecated Use [`redirectToOrganizationProfile()`](https://clerk.com/docs/reference/objects/clerk#redirect-to-organization-profile) instead.
67
- */
68
- declare const RedirectToOrganizationProfile: {
69
- (props: _clerk_shared_types.Without<{
70
- clerk: _clerk_shared_types.LoadedClerk;
71
- component?: string;
72
- }, "clerk">): React.JSX.Element | null;
73
- displayName: string;
74
- };
75
- /**
76
- * @function
77
- * @deprecated Use [`redirectToCreateOrganization()`](https://clerk.com/docs/reference/objects/clerk#redirect-to-create-organization) instead.
78
- */
79
- declare const RedirectToCreateOrganization: {
80
- (props: _clerk_shared_types.Without<{
81
- clerk: _clerk_shared_types.LoadedClerk;
82
- component?: string;
83
- }, "clerk">): React.JSX.Element | null;
84
- displayName: string;
85
- };
86
- declare const AuthenticateWithRedirectCallback: {
87
- (props: _clerk_shared_types.Without<WithClerkProp<HandleOAuthCallbackParams>, "clerk">): React.JSX.Element | null;
88
- displayName: string;
89
- };
90
- declare const MultisessionAppSupport: ({ children }: React.PropsWithChildren<unknown>) => React.JSX.Element;
91
-
92
- /**
93
- * @inline
94
- */
95
- type UseAuthOptions = PendingSessionOptions | undefined | null;
96
- /**
97
- * The `useAuth()` hook provides access to the current user's authentication state and methods to manage the active session.
98
- *
99
- * > [!NOTE]
100
- * > To access auth data server-side, see the [`Auth` object reference doc](https://clerk.com/docs/reference/backend/types/auth-object).
101
- *
102
- * <If sdk="nextjs">
103
- * By default, Next.js opts all routes into static rendering. If you need to opt a route or routes into dynamic rendering because you need to access the authentication data at request time, you can create a boundary by passing the `dynamic` prop to `<ClerkProvider>`. See the [guide on rendering modes](https://clerk.com/docs/guides/development/rendering-modes) for more information, including code examples.
104
- * </If>
105
- *
106
- * @unionReturnHeadings
107
- * ["Initialization", "Signed out", "Signed in (no active organization)", "Signed in (with active organization)"]
108
- *
109
- * @param [options] - An object containing options for the `useAuth()` hook. `treatPendingAsSignedOut` is a boolean that indicates whether pending sessions are considered as signed out or not. Defaults to `true`.
110
- *
111
- * @function
112
- *
113
- * @example
114
- *
115
- * The following example demonstrates how to use the `useAuth()` hook to access the current auth state, like whether the user is signed in or not. It also includes a basic example for using the `getToken()` method to retrieve a session token for fetching data from an external resource.
116
- *
117
- * <Tabs items='React,Next.js'>
118
- * <Tab>
119
- *
120
- * ```tsx {{ filename: 'src/pages/ExternalDataPage.tsx' }}
121
- * import { useAuth } from '@clerk/react'
122
- *
123
- * export default function ExternalDataPage() {
124
- * const { userId, sessionId, getToken, isLoaded, isSignedIn } = useAuth()
125
- *
126
- * const fetchExternalData = async () => {
127
- * const token = await getToken()
128
- *
129
- * // Fetch data from an external API
130
- * const response = await fetch('https://api.example.com/data', {
131
- * headers: {
132
- * Authorization: `Bearer ${token}`,
133
- * },
134
- * })
135
- *
136
- * return response.json()
137
- * }
138
- *
139
- * if (!isLoaded) {
140
- * return <div>Loading...</div>
141
- * }
142
- *
143
- * if (!isSignedIn) {
144
- * return <div>Sign in to view this page</div>
145
- * }
146
- *
147
- * return (
148
- * <div>
149
- * <p>
150
- * Hello, {userId}! Your current active session is {sessionId}.
151
- * </p>
152
- * <button onClick={fetchExternalData}>Fetch Data</button>
153
- * </div>
154
- * )
155
- * }
156
- * ```
157
- *
158
- * </Tab>
159
- * <Tab>
160
- *
161
- * {@include ../../docs/use-auth.md#nextjs-01}
162
- *
163
- * </Tab>
164
- * </Tabs>
165
- */
166
- declare const useAuth: (options?: UseAuthOptions) => UseAuthReturn;
167
- /**
168
- * A hook that derives and returns authentication state and utility functions based on the provided auth object.
169
- *
170
- * @param authObject - An object containing authentication-related properties and functions.
171
- *
172
- * @returns A derived authentication state with helper methods. If the authentication state is invalid, an error is thrown.
173
- *
174
- * @remarks
175
- * This hook inspects session, user, and organization information to determine the current authentication state.
176
- * It returns an object that includes various properties such as whether the state is loaded, if a user is signed in,
177
- * session and user identifiers, Organization Roles, and a `has` function for authorization checks.
178
- * Additionally, it provides `signOut` and `getToken` functions if applicable.
179
- *
180
- * @example
181
- * ```tsx
182
- * const {
183
- * isLoaded,
184
- * isSignedIn,
185
- * userId,
186
- * orgId,
187
- * has,
188
- * signOut,
189
- * getToken
190
- * } = useDerivedAuth(authObject);
191
- * ```
192
- */
193
- declare function useDerivedAuth(authObject: any, { treatPendingAsSignedOut }?: PendingSessionOptions): UseAuthReturn;
194
-
195
- export { AuthenticateWithRedirectCallback as A, ClerkDegraded as C, MultisessionAppSupport as M, RedirectToCreateOrganization as R, Show as S, ClerkFailed as a, ClerkLoaded as b, ClerkLoading as c, RedirectToOrganizationProfile as d, RedirectToSignIn as e, RedirectToSignUp as f, RedirectToTasks as g, RedirectToUserProfile as h, type ShowProps as i, useAuth as j, useDerivedAuth as u };