The current sign-up attempt status is {signUp?.status}.
;
-}
-```
-
-
diff --git a/packages/react/src/hooks/useAuth.ts b/packages/react/src/hooks/useAuth.ts
index e5df2986156..593c0f92bca 100644
--- a/packages/react/src/hooks/useAuth.ts
+++ b/packages/react/src/hooks/useAuth.ts
@@ -25,27 +25,10 @@ type UseAuthOptions = Record | PendingSessionOptions | undefined |
/**
* The `useAuth()` hook provides access to the current user's authentication state and methods to manage the active session.
*
- * > [!NOTE]
- * > To access auth data server-side, see the [`Auth` object reference doc](https://clerk.com/docs/reference/backend/types/auth-object).
- *
- *
- * 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 ``. See the [guide on rendering modes](https://clerk.com/docs/guides/development/rendering-modes) for more information, including code examples.
- *
- *
- * @unionReturnHeadings
- * ["Initialization", "Signed out", "Signed in (no active organization)", "Signed in (with active organization)"]
- *
* @param [initialAuthStateOrOptions] - An object containing the initial authentication state or options for the `useAuth()` hook. If not provided, the hook will attempt to derive the state from the context. `treatPendingAsSignedOut` is a boolean that indicates whether pending sessions are considered as signed out or not. Defaults to `true`.
*
- * @function
- *
- * @example
- *
* 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.
*
- *
- *
- *
* ```tsx {{ filename: 'src/pages/ExternalDataPage.tsx' }}
* import { useAuth } from '@clerk/clerk-react'
*
@@ -83,14 +66,6 @@ type UseAuthOptions = Record | PendingSessionOptions | undefined |
* )
* }
* ```
- *
- *
- *
- *
- * {@include ../../docs/use-auth.md#nextjs-01}
- *
- *
- *
*/
export const useAuth = (initialAuthStateOrOptions: UseAuthOptions = {}): UseAuthReturn => {
useAssertWrappedByClerkProvider('useAuth');
diff --git a/packages/react/src/hooks/useSignIn.ts b/packages/react/src/hooks/useSignIn.ts
index 2b7fb2e8082..cce92370ad9 100644
--- a/packages/react/src/hooks/useSignIn.ts
+++ b/packages/react/src/hooks/useSignIn.ts
@@ -8,17 +8,10 @@ import { useAssertWrappedByClerkProvider } from './useAssertWrappedByClerkProvid
/**
* The `useSignIn()` hook provides access to the [`SignIn`](https://clerk.com/docs/reference/javascript/sign-in) object, which allows you to check the current state of a sign-in attempt and manage the sign-in flow. You can use this to create a [custom sign-in flow](https://clerk.com/docs/guides/development/custom-flows/overview#sign-in-flow).
*
- * @unionReturnHeadings
- * ["Initialization", "Loaded"]
- *
- * @example
* ### Check the current state of a sign-in
*
* The following example uses the `useSignIn()` hook to access the [`SignIn`](https://clerk.com/docs/reference/javascript/sign-in) object, which contains the current sign-in attempt status and methods to create a new sign-in attempt. The `isLoaded` property is used to handle the loading state.
*
- *
- *
- *
* ```tsx {{ filename: 'src/pages/SignInPage.tsx' }}
* import { useSignIn } from '@clerk/clerk-react'
*
@@ -34,20 +27,10 @@ import { useAssertWrappedByClerkProvider } from './useAssertWrappedByClerkProvid
* }
* ```
*
- *
- *
- *
- * {@include ../../docs/use-sign-in.md#nextjs-01}
- *
- *
- *
- *
- * @example
* ### Create a custom sign-in flow with `useSignIn()`
*
* The `useSignIn()` hook can also be used to build fully custom sign-in flows, if Clerk's prebuilt components don't meet your specific needs or if you require more control over the authentication flow. Different sign-in flows include email and password, email and phone codes, email links, and multifactor (MFA). To learn more about using the `useSignIn()` hook to create custom flows, see the [custom flow guides](https://clerk.com/docs/guides/development/custom-flows/overview).
*
- * ```empty```
*/
export const useSignIn = (): UseSignInReturn => {
useAssertWrappedByClerkProvider('useSignIn');
diff --git a/packages/react/src/hooks/useSignUp.ts b/packages/react/src/hooks/useSignUp.ts
index 5b3af8e7804..c6ffb8fbba7 100644
--- a/packages/react/src/hooks/useSignUp.ts
+++ b/packages/react/src/hooks/useSignUp.ts
@@ -8,17 +8,10 @@ import { useAssertWrappedByClerkProvider } from './useAssertWrappedByClerkProvid
/**
* The `useSignUp()` hook provides access to the [`SignUp`](https://clerk.com/docs/reference/javascript/sign-up) object, which allows you to check the current state of a sign-up attempt and manage the sign-up flow. You can use this to create a [custom sign-up flow](https://clerk.com/docs/guides/development/custom-flows/overview#sign-up-flow).
*
- * @unionReturnHeadings
- * ["Initialization", "Loaded"]
- *
- * @example
* ### Check the current state of a sign-up
*
* The following example uses the `useSignUp()` hook to access the [`SignUp`](https://clerk.com/docs/reference/javascript/sign-up) object, which contains the current sign-up attempt status and methods to create a new sign-up attempt. The `isLoaded` property is used to handle the loading state.
*
- *
- *
- *
* ```tsx {{ filename: 'src/pages/SignUpPage.tsx' }}
* import { useSignUp } from '@clerk/clerk-react'
*
@@ -34,20 +27,10 @@ import { useAssertWrappedByClerkProvider } from './useAssertWrappedByClerkProvid
* }
* ```
*
- *
- *
- *
- * {@include ../../docs/use-sign-up.md#nextjs-01}
- *
- *
- *
- *
- * @example
* ### Create a custom sign-up flow with `useSignUp()`
*
* The `useSignUp()` hook can also be used to build fully custom sign-up flows, if Clerk's prebuilt components don't meet your specific needs or if you require more control over the authentication flow. Different sign-up flows include email and password, email and phone codes, email links, and multifactor (MFA). To learn more about using the `useSignUp()` hook to create custom flows, see the [custom flow guides](https://clerk.com/docs/guides/development/custom-flows/overview).
*
- * ```empty```
*/
export const useSignUp = (): UseSignUpReturn => {
useAssertWrappedByClerkProvider('useSignUp');
diff --git a/packages/shared/docs/use-clerk.md b/packages/shared/docs/use-clerk.md
deleted file mode 100644
index 839672b69cf..00000000000
--- a/packages/shared/docs/use-clerk.md
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
-```tsx {{ filename: 'app/page.tsx' }}
-'use client';
-
-import { useClerk } from '@clerk/nextjs';
-
-export default function HomePage() {
- const clerk = useClerk();
-
- return ;
-}
-```
-
-
diff --git a/packages/shared/docs/use-session-list.md b/packages/shared/docs/use-session-list.md
deleted file mode 100644
index c4441a59b95..00000000000
--- a/packages/shared/docs/use-session-list.md
+++ /dev/null
@@ -1,24 +0,0 @@
-
-
-```tsx {{ filename: 'app/page.tsx' }}
-'use client';
-
-import { useSessionList } from '@clerk/nextjs';
-
-export default function HomePage() {
- const { isLoaded, sessions } = useSessionList();
-
- if (!isLoaded) {
- // Handle loading state
- return null;
- }
-
- return (
-
-
Welcome back. You've been here {sessions.length} times before.
-
- );
-}
-```
-
-
diff --git a/packages/shared/docs/use-session.md b/packages/shared/docs/use-session.md
deleted file mode 100644
index 95be5884665..00000000000
--- a/packages/shared/docs/use-session.md
+++ /dev/null
@@ -1,28 +0,0 @@
-
-
-```tsx {{ filename: 'app/page.tsx' }}
-'use client';
-
-import { useSession } from '@clerk/nextjs';
-
-export default function HomePage() {
- const { isLoaded, session, isSignedIn } = useSession();
-
- if (!isLoaded) {
- // Handle loading state
- return null;
- }
- if (!isSignedIn) {
- // Handle signed out state
- return null;
- }
-
- return (
-
-
This session has been active since {session.lastActiveAt.toLocaleString()}
-
- );
-}
-```
-
-
-
-
-
-```tsx {{ filename: 'app/page.tsx' }}
-'use client';
-
-import { useUser } from '@clerk/nextjs';
-
-export default function HomePage() {
- const { isSignedIn, isLoaded, user } = useUser();
-
- if (!isLoaded) {
- // Handle loading state
- return null;
- }
-
- if (!isSignedIn) return null;
-
- const updateUser = async () => {
- // Update data via an API endpoint
- const updateMetadata = await fetch('/api/updateMetadata', {
- method: 'POST',
- body: JSON.stringify({
- role: 'admin',
- }),
- });
-
- // Check if the update was successful
- if ((await updateMetadata.json()).message !== 'success') {
- throw new Error('Error updating');
- }
-
- // If the update was successful, reload the user data
- await user.reload();
- };
-
- return (
- <>
-
-
user role: {user.publicMetadata.role}
-
- );
-}
-```
-
-
diff --git a/packages/shared/src/react/hooks/useClerk.ts b/packages/shared/src/react/hooks/useClerk.ts
index 87f36ca3c2c..6be391f0215 100644
--- a/packages/shared/src/react/hooks/useClerk.ts
+++ b/packages/shared/src/react/hooks/useClerk.ts
@@ -8,17 +8,8 @@ import { useAssertWrappedByClerkProvider, useClerkInstanceContext } from '../con
*
* The `useClerk()` hook provides access to the [`Clerk`](https://clerk.com/docs/reference/javascript/clerk) object, allowing you to build alternatives to any Clerk Component.
*
- * @function
- *
- * @returns The `useClerk()` hook returns the `Clerk` object, which includes all the methods and properties listed in the [`Clerk` reference](https://clerk.com/docs/reference/javascript/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/reference/javascript/clerk#sign-in) method to open the sign-in modal.
*
- *
- *
- *
* ```tsx {{ filename: 'src/Home.tsx' }}
* import { useClerk } from '@clerk/clerk-react'
*
@@ -28,14 +19,6 @@ import { useAssertWrappedByClerkProvider, useClerkInstanceContext } from '../con
* return
* }
* ```
- *
- *
- *
- *
- * {@include ../../../docs/use-clerk.md#nextjs-01}
- *
- *
- *
*/
export const useClerk = (): LoadedClerk => {
useAssertWrappedByClerkProvider('useClerk');
diff --git a/packages/shared/src/react/hooks/useSession.ts b/packages/shared/src/react/hooks/useSession.ts
index 7427e53baf3..b9db2e8ffc3 100644
--- a/packages/shared/src/react/hooks/useSession.ts
+++ b/packages/shared/src/react/hooks/useSession.ts
@@ -9,21 +9,10 @@ const hookName = `useSession`;
/**
* The `useSession()` hook provides access to the current user's [`Session`](https://clerk.com/docs/reference/javascript/session) object, as well as helpers for setting the active session.
*
- * @unionReturnHeadings
- * ["Initialization", "Signed out", "Signed in"]
- *
- * @function
- *
- * @param [options] - An object containing options for the `useSession()` hook.
- *
- * @example
* ### Access the `Session` object
*
* 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'
*
@@ -46,14 +35,6 @@ const hookName = `useSession`;
* )
* }
* ```
- *
- *
- *
- *
- * {@include ../../../docs/use-session.md#nextjs-01}
- *
- *
- *
*/
export const useSession: UseSession = () => {
useAssertWrappedByClerkProvider(hookName);
diff --git a/packages/shared/src/react/hooks/useSessionList.ts b/packages/shared/src/react/hooks/useSessionList.ts
index 6d0ee1b0bd1..eb6a357fdf3 100644
--- a/packages/shared/src/react/hooks/useSessionList.ts
+++ b/packages/shared/src/react/hooks/useSessionList.ts
@@ -7,19 +7,10 @@ const hookName = 'useSessionList';
/**
* The `useSessionList()` hook returns an array of [`Session`](https://clerk.com/docs/reference/javascript/session) objects that have been registered on the client device.
*
- * @unionReturnHeadings
- * ["Initialization", "Loaded"]
- *
- * @function
- *
- * @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'
*
@@ -39,13 +30,6 @@ const hookName = 'useSessionList';
* }
* ```
*
- *
- *
- *
- * {@include ../../../docs/use-session-list.md#nextjs-01}
- *
- *
- *
*/
export const useSessionList = (): UseSessionListReturn => {
useAssertWrappedByClerkProvider(hookName);
diff --git a/packages/shared/src/react/hooks/useUser.ts b/packages/shared/src/react/hooks/useUser.ts
index a25367b8c89..d3549ab03cd 100644
--- a/packages/shared/src/react/hooks/useUser.ts
+++ b/packages/shared/src/react/hooks/useUser.ts
@@ -7,10 +7,6 @@ const hookName = 'useUser';
/**
* The `useUser()` hook provides access to the current user's [`User`](https://clerk.com/docs/reference/javascript/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.
*
- * @unionReturnHeadings
- * ["Initialization", "Signed out", "Signed in"]
- *
- * @example
* ### Get the current user
*
* The following example uses the `useUser()` hook to access the [`User`](https://clerk.com/docs/reference/javascript/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.
@@ -33,14 +29,10 @@ const hookName = 'useUser';
* }
* ```
*
- * @example
* ### Update user data
*
* The following example uses the `useUser()` hook to access the [`User`](https://clerk.com/docs/reference/javascript/user) object, which calls the [`update()`](https://clerk.com/docs/reference/javascript/user#update) method to update the current user's information.
*
- *
- *
- *
* ```tsx {{ filename: 'src/Home.tsx' }}
* import { useUser } from '@clerk/clerk-react'
*
@@ -70,22 +62,11 @@ const hookName = 'useUser';
* )
* }
* ```
- *
- *
- *
- * {@include ../../../docs/use-user.md#nextjs-01}
- *
- *
- *
*
- * @example
* ### Reload user data
*
* The following example uses the `useUser()` hook to access the [`User`](https://clerk.com/docs/reference/javascript/user) object, which calls the [`reload()`](https://clerk.com/docs/reference/javascript/user#reload) method to get the latest user's information.
*
- *
- *
- *
* ```tsx {{ filename: 'src/Home.tsx' }}
* import { useUser } from '@clerk/clerk-react'
*
@@ -126,13 +107,6 @@ const hookName = 'useUser';
* }
* ```
*
- *
- *
- *
- * {@include ../../../docs/use-user.md#nextjs-02}
- *
- *
- *
*/
export function useUser(): UseUserReturn {
useAssertWrappedByClerkProvider(hookName);