Skip to content

Commit a8c4e97

Browse files
alexisintechalexisintech
committed
code review
1 parent 2b8bcd2 commit a8c4e97

File tree

11 files changed

+87
-153
lines changed

11 files changed

+87
-153
lines changed

‎docs/_partials/react-hooks.mdx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
- [`useUser()`](/docs/references/react/use-user){{ target: '_blank' }}
2+
- [`useClerk()`](/docs/references/react/use-clerk){{ target: '_blank' }}
3+
- [`useAuth()`](/docs/references/react/use-auth){{ target: '_blank' }}
4+
- [`useSignIn()`](/docs/references/react/use-sign-in){{ target: '_blank' }}
5+
- [`useSignUp()`](/docs/references/react/use-sign-up){{ target: '_blank' }}
6+
- [`useSession()`](/docs/references/react/use-session){{ target: '_blank' }}
7+
- [`useSessionList()`](/docs/references/react/use-session-list){{ target: '_blank' }}
8+
- [`useOrganization()`](/docs/references/react/use-organization){{ target: '_blank' }}
9+
- [`useOrganizationList()`](/docs/references/react/use-organization-list){{ target: '_blank' }}

‎docs/quickstarts/react-router.mdx

Lines changed: 12 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -19,19 +19,19 @@ description: Learn how to use Clerk to quickly and easily add secure authenticat
1919
icon: "clerk",
2020
},
2121
{
22-
title: "Install React Router as a framework",
22+
title: "Create a React Router application",
2323
link: "https://reactrouter.com/start/framework/installation",
2424
icon: "react-router",
2525
}
2626
]}
2727
>
2828
- Install `@clerk/react-router`
2929
- Set your Clerk API keys
30-
- Configure `rootAuthLoader`
31-
- Add `<ClerkProvider />` and Clerk components
30+
- Configure `rootAuthLoader()`
31+
- Add `<ClerkProvider>` and Clerk components
3232
</TutorialHero>
3333

34-
Clerk's [React SDK](/docs/references/react-router/overview) provides prebuilt components, hooks, and stores to make it easy to integrate authentication and user management in your React Router app. This guide assumes that you're using [React Router v7 or later](https://api.reactrouter.com/v7).
34+
Clerk's [React Router SDK](/docs/references/react-router/overview) provides prebuilt components, hooks, and stores to make it easy to integrate authentication and user management in your React Router app. This guide assumes that you're using [React Router v7 or later](https://api.reactrouter.com/v7).
3535

3636
<Steps>
3737
### Install `@clerk/react-router`
@@ -55,7 +55,7 @@ Clerk's [React SDK](/docs/references/react-router/overview) provides prebuilt co
5555
### Set your Clerk API keys
5656

5757
<SignedIn>
58-
Add the following keys to your `.env` file. These keys can always be retrieved from the [**API keys**](https://dashboard.clerk.com/last-active?path=api-keys) page of your Clerk Dashboard.
58+
Add the following keys to your `.env` file. These keys can always be retrieved from the [**API keys**](https://dashboard.clerk.com/last-active?path=api-keys) page in the Clerk Dashboard.
5959
</SignedIn>
6060

6161
<SignedOut>
@@ -71,9 +71,9 @@ Clerk's [React SDK](/docs/references/react-router/overview) provides prebuilt co
7171
CLERK_SECRET_KEY={{secret}}
7272
```
7373

74-
### Configure `rootAuthLoader`
74+
### Configure `rootAuthLoader()`
7575

76-
The `rootAuthLoader` function provides access to authentication state in any React Router route.
76+
The `rootAuthLoader()` function provides access to authentication state in any React Router route.
7777

7878
The following code shows how to add this function to your `root.tsx` file. If you're using [Clerk's React Router quickstart](https://github.com/clerk/clerk-react-router-quickstart) or the [React Router template](https://reactrouter.com/start/framework/installation), most of this code will already be present.
7979

@@ -153,39 +153,21 @@ Clerk's [React SDK](/docs/references/react-router/overview) provides prebuilt co
153153
}
154154
```
155155

156-
### Add `<ClerkProvider>`
156+
### Add `<ClerkProvider>` and Clerk components to your app
157157

158158
<Include src="_partials/clerk-provider" />
159159

160-
Pass `loaderData` as a prop to the component.
160+
You must pass `loaderData` to the `<ClerkProvider>` component. This data is provided by the `rootAuthLoader()` function.
161161

162-
```tsx {{ filename: 'app/root.tsx' }}
163-
import { ClerkProvider } from '@clerk/react-router'
164-
165-
export default function App({ loaderData }: Route.ComponentProps) {
166-
return (
167-
<ClerkProvider loaderData={loaderData}>
168-
<Outlet />
169-
</ClerkProvider>
170-
)
171-
}
172-
173-
// Rest of the root.tsx code
174-
```
175-
176-
### Add Clerk components
177-
178-
You can control which content signed-in and signed-out users can see with Clerk's [prebuilt control components](/docs/components/overview#what-are-control-components).
179-
180-
This example uses the following components to create a header to allow users to sign up, sign in, and sign out.
162+
You can control which content signed-in and signed-out users can see with Clerk's [prebuilt control components](/docs/components/overview#what-are-control-components). The following example creates a header using the following components:
181163

182164
- [`<SignedIn>`](/docs/components/control/signed-in): Children of this component can only be seen while **signed in**.
183165
- [`<SignedOut>`](/docs/components/control/signed-out): Children of this component can only be seen while **signed out**.
184166
- [`<UserButton />`](/docs/components/user/user-button): Shows the signed-in user's avatar. Selecting it opens a dropdown menu with account management options.
185167
- [`<SignInButton />`](/docs/components/unstyled/sign-in-button): An unstyled component that links to the sign-in page. In this example, since no props or [environment variables](/docs/deployments/clerk-environment-variables) are set for the sign-in URL, this component links to the [Account Portal sign-in page](/docs/customization/account-portal/overview#sign-in).
186168

187-
```tsx {{ filename: 'app/root.tsx', mark: [3, [8, 18]] }}
188-
// Imports
169+
```tsx {{ filename: 'app/root.tsx' }}
170+
// Other imports
189171

190172
import { ClerkProvider, SignedIn, SignedOut, UserButton, SignInButton } from '@clerk/react-router'
191173

‎docs/quickstarts/react.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,7 @@ description: Add authentication and user management to your React app with Clerk
148148

149149
### Create a header with Clerk components
150150

151-
You can control which content signed-in and signed-out users can see with the [prebuilt control components](/docs/components/overview#what-are-control-components). Create a header using the following components:
151+
You can control which content signed-in and signed-out users can see with the [prebuilt control components](/docs/components/overview#what-are-control-components). The following example creates a header using the following components:
152152

153153
- [`<SignedIn>`](/docs/components/control/signed-in): Children of this component can only be seen while **signed in**.
154154
- [`<SignedOut>`](/docs/components/control/signed-out): Children of this component can only be seen while **signed out**.

‎docs/references/nextjs/auth-object.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
2-
title: '`Auth` object'
2+
title: Auth object
33
description: The Auth object contains information about the current user's session.
44
---
55

6-
The `Auth` object contains important information like the current user's session ID, user ID, and organization ID. It also contains methods to check for permissions and retrieve the current user's session token. It's returned by the [`useAuth()`](/docs/references/react/use-auth) hook, the [`auth()`](/docs/references/nextjs/auth) and [`getAuth()`](/docs/references/nextjs/get-auth) helpers, and the `request` object in server contexts.
6+
The `Auth` object contains important information like the current user's session ID, user ID, and organization ID. It also contains methods to check for permissions and retrieve the current user's session token. It's returned by the [`useAuth()`](/docs/references/react/use-auth) hook, the [`auth()`](/docs/references/nextjs/auth) and `getAuth()` helpers, and the `request` object in server contexts.
77

88
## `Auth` object properties
99

‎docs/references/nextjs/overview.mdx

Lines changed: 9 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,42 +3,28 @@ title: Clerk Next.js SDK
33
description: Learn how to use Clerk to quickly and easily add secure authentication and user management to your Next.js application.
44
---
55

6-
Clerk makes it simple to add authentication to your Next.js application. This documentation covers the capabilities and methods available from Clerk's Next.js SDK.
7-
8-
## Guides
9-
10-
- [Read session and user data](/docs/references/nextjs/read-session-data)
11-
- [Add custom sign up and sign in pages](/docs/references/nextjs/custom-signup-signin-pages)
12-
- [Integrate Clerk into your app with tRPC](/docs/references/nextjs/trpc)
6+
Clerk makes it simple to add authentication to your Next.js application. This reference lists the features and methods available in Clerk's Next.js SDK.
137

148
## Client-side helpers
159

16-
Because Clerk Next.js is a wrapper around Clerk React, you can utilize the hooks that Clerk React provides. These hooks give you access to the [`Clerk`](/docs/references/javascript/clerk/clerk) object, and a set of useful helper methods for signing in and signing up. You can learn more about these hooks [in the React SDK reference](/docs/references/react/overview).
10+
Because the Next.js SDK is built on top of the Clerk React SDK, you can utilize the hooks that the React SDK provides. These hooks give you access to the [`Clerk`](/docs/references/javascript/clerk/clerk) object and a set of useful helper methods for signing in and signing up. Learn more about these hooks in the [React SDK reference](/docs/references/react/overview).
1711

18-
{/* TODO: We can use a partial here. */}
12+
<Include src="_partials/react-hooks" />
1913

20-
- [`useUser()`](/docs/references/react/use-user)
21-
- [`useClerk()`](/docs/references/react/use-clerk)
22-
- [`useAuth()`](/docs/references/react/use-auth)
23-
- [`useSignIn()`](/docs/references/react/use-sign-in)
24-
- [`useSignUp()`](/docs/references/react/use-sign-up)
25-
- [`useSession()`](/docs/references/react/use-session)
26-
- [`useSessionList()`](/docs/references/react/use-session-list)
27-
- [`useOrganization()`](/docs/references/react/use-organization)
28-
- [`useOrganizationList()`](/docs/references/react/use-organization-list)
14+
## Server-side helpers
2915

30-
## App router references
16+
### App router
3117

32-
Clerk provides first-class support for the [Next.js App Router](https://nextjs.org/docs/app). The below methods and references show how to integrate Clerk features into applications that take advantage of the latest App Router and React Server Components features.
18+
Clerk provides first-class support for the [Next.js App Router](https://nextjs.org/docs/app). The following references show how to integrate Clerk features into apps using the latest App Router and React Server Components features.
3319

3420
- [`auth()`](/docs/references/nextjs/auth)
3521
- [`currentUser()`](/docs/references/nextjs/current-user)
3622
- [Route Handlers](/docs/references/nextjs/route-handlers)
3723
- [Server Actions](/docs/references/nextjs/server-actions)
3824

39-
## Pages router references
25+
### Pages router
4026

41-
Clerk continues to provide drop-in support for the Next.js Pages Router. In addition to the main Clerk integration, several methods are available for instrumenting authentication within Pages Router-based applications.
27+
Clerk continues to provide drop-in support for the Next.js Pages Router. In addition to the main Clerk integration, the following references are available for apps using Pages Router.
4228

4329
- [`getAuth()`](/docs/references/nextjs/get-auth)
4430
- [`buildClerkProps()`](/docs/references/nextjs/build-clerk-props)
@@ -47,7 +33,7 @@ Clerk continues to provide drop-in support for the Next.js Pages Router. In addi
4733

4834
### `Auth` object
4935

50-
Both `auth()` and `getAuth()` return an `Auth` object. This JavaScript object contains important information like session data, your user's ID, as well as their organization ID. Learn more about the `Auth` object [here](/docs/references/nextjs/auth-object).
36+
Both `auth()` (App Router) and `getAuth()` (Pages Router) return an `Auth` object. This JavaScript object contains important information like the current user's session ID, user ID, and organization ID. Learn more about the [`Auth` object](/docs/references/nextjs/auth-object){{ target: '_blank' }}.
5137

5238
### `clerkMiddleware()`
5339

‎docs/references/react-router/custom-signup-signin-pages.mdx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
2-
title: Build your own sign-in and sign-up pages for your React Router app with Clerk
3-
description: Learn how to add custom sign-in and sign-up pages to your React Router app with Clerk's prebuilt components.
2+
title: Build your own sign-up and sign-in pages for your React Router app with Clerk
3+
description: Learn how to add custom sign-up and sign-in pages to your React Router app with Clerk's prebuilt components.
44
---
55

6-
This guide shows you how to use the [`<SignIn />`](/docs/components/authentication/sign-in) and [`<SignUp />`](/docs/components/authentication/sign-up) components with the [React Router Splat route](https://reactrouter.com/start/framework/routing#splats) to build custom sign-in and sign-up pages for your React Router app. See the [quickstart tutorial](/docs/quickstarts/react-router) for a step-by-step guide.
6+
This guide shows you how to use the [`<SignIn />`](/docs/components/authentication/sign-in) and [`<SignUp />`](/docs/components/authentication/sign-up) components with the [React Router Splat route](https://reactrouter.com/start/framework/routing#splats) to build custom sign-up and sign-in pages for your React Router app. See the [quickstart tutorial](/docs/quickstarts/react-router) for a step-by-step guide.
77

88
If the prebuilt components don't meet your specific needs or if you require more control over the logic, you can rebuild the existing Clerk flows using the Clerk API. For more information, see the [custom flow guides](/docs/custom-flows/overview).
99

@@ -58,16 +58,16 @@ If the prebuilt components don't meet your specific needs or if you require more
5858

5959
### Configure redirect behavior
6060

61-
Update your environment variables to point to your custom sign-in and sign-up pages. Learn more about the available [environment variables](/docs/deployments/clerk-environment-variables).
61+
Update your environment variables to point to your custom sign-up and sign-in pages. Learn more about the available [environment variables](/docs/deployments/clerk-environment-variables).
6262

6363
```env {{ filename: '.env' }}
64-
CLERK_SIGN_IN_URL=/sign-in
65-
CLERK_SIGN_UP_URL=/sign-up
6664
CLERK_SIGN_IN_FALLBACK_URL=/
6765
CLERK_SIGN_UP_FALLBACK_URL=/
66+
CLERK_SIGN_IN_URL=/sign-in
67+
CLERK_SIGN_UP_URL=/sign-up
6868
```
6969

70-
These values control the behavior of the components when you sign in or sign up and when you click on the respective links at the bottom of each component.
70+
These values control the behavior of the `<SignUp />` and `<SignIn />` components and when you visit the respective links at the bottom of each component.
7171

7272
### Visit your new pages
7373

@@ -87,5 +87,5 @@ If the prebuilt components don't meet your specific needs or if you require more
8787
```
8888
</CodeBlockTabs>
8989

90-
Visit your new custom pages locally at [localhost:5173/sign-in](http://localhost:5173/sign-in) and [localhost:5173/sign-up](http://localhost:5173/sign-up).
90+
Visit your new custom pages locally at [localhost:5173/sign-up](http://localhost:5173/sign-up) and [localhost:5173/sign-in](http://localhost:5173/sign-in).
9191
</Steps>

‎docs/references/react-router/get-auth.mdx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,7 @@ The `getAuth()` helper retrieves authentication state from the request object.
3030
### Server data loading
3131

3232
The following example demonstrates how to use `getAuth()` to protect a profile page route and load user data.
33-
34-
The `userId` is passed to the Backend SDK's [`getUser()`](/docs/references/backend/user/get-user){{ target: '_blank' }} method to authenticate the user. If no `userId` is found, the user is redirected to the `/sign-in` page.
33+
If the user is authenticated, their `userId` is passed to the Backend SDK's [`getUser()`](/docs/references/backend/user/get-user){{ target: '_blank' }} method to retrieve the user's information.
3534

3635
```tsx {{ filename: 'app/routes/profile.tsx' }}
3736
import { redirect } from 'react-router'

‎docs/references/react-router/library-mode.mdx

Lines changed: 19 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,9 @@ React Router can be used as a framework or as a standalone library. This guide e
2929
<Steps>
3030
### Install `@clerk/react-router`
3131

32-
Once you have a Vite and React Router application ready, run the following command to install Clerk's React Router SDK.
32+
Clerk's [React Router SDK](/docs/references/react-router/overview) provides prebuilt components, hooks, and stores to make it easy to integrate authentication and user management in your React Router app.
33+
34+
Run the following command to install the SDK:
3335

3436
<CodeBlockTabs options={["npm", "yarn", "pnpm"]}>
3537
```bash {{ filename: 'terminal' }}
@@ -51,7 +53,7 @@ React Router can be used as a framework or as a standalone library. This guide e
5153
> You will not need the Clerk Secret Key in React Router's library mode, as it should never be used on the client-side.
5254
5355
<SignedIn>
54-
Add the following keys to your `.env` file. These keys can always be retrieved from the [**API keys**](https://dashboard.clerk.com/last-active?path=api-keys) page of your Clerk Dashboard.
56+
Add your Clerk Publishable Key to your `.env` file. This key can always be retrieved from the [**API keys**](https://dashboard.clerk.com/last-active?path=api-keys) page of the Clerk Dashboard.
5557
</SignedIn>
5658

5759
<SignedOut>
@@ -66,11 +68,11 @@ React Router can be used as a framework or as a standalone library. This guide e
6668
VITE_CLERK_PUBLISHABLE_KEY={{pub_key}}
6769
```
6870

69-
### Add `<ClerkProvider>`
71+
### Add `<ClerkProvider>` to your app
7072

7173
<Include src="_partials/clerk-provider" />
7274

73-
Pass your publishable key as a prop to the component.
75+
You must pass your Publishable Key as a prop.
7476

7577
```tsx {{ filename: 'src/main.tsx', mark: [4, 8, [13, 17]] }}
7678
import { StrictMode } from 'react'
@@ -95,66 +97,28 @@ React Router can be used as a framework or as a standalone library. This guide e
9597
)
9698
```
9799

98-
### Configure redirect URLs
100+
### Create a header with Clerk components
99101

100-
Add `signInFallbackRedirectUrl` and `signUpFallbackRedirectUrl` props to the `<ClerkProvider>`. These control where users are redirected after signing in or signing up, as well as where they're redirected when clicking the links in the authentication components.
102+
You can control which content signed-in and signed-out users can see with the [prebuilt control components](/docs/components/overview#what-are-control-components). The following example creates a header using the following components:
101103

102-
```tsx {{ filename: 'src/main.tsx', mark: [6, 7] }}
103-
createRoot(document.getElementById('root')!).render(
104-
<StrictMode>
105-
<BrowserRouter>
106-
<ClerkProvider
107-
publishableKey={PUBLISHABLE_KEY}
108-
signInFallbackRedirectUrl="/"
109-
signUpFallbackRedirectUrl="/"
110-
>
111-
<Routes>
112-
<Route path="/" element={<App />} />
113-
</Routes>
114-
</ClerkProvider>
115-
</BrowserRouter>
116-
</StrictMode>,
117-
)
118-
```
119-
120-
### Protect your pages
121-
122-
Clerk offers [control components](/docs/components/overview) that allow you to protect your pages. These components are used to control the visibility of your pages based on the user's authentication state.
104+
- [`<SignedIn>`](/docs/components/control/signed-in): Children of this component can only be seen while **signed in**.
105+
- [`<SignedOut>`](/docs/components/control/signed-out): Children of this component can only be seen while **signed out**.
106+
- [`<UserButton />`](/docs/components/user/user-button): Shows the signed-in user's avatar. Selecting it opens a dropdown menu with account management options.
107+
- [`<SignInButton />`](/docs/components/unstyled/sign-in-button): An unstyled component that links to the sign-in page or displays the sign-in modal.
123108

124109
```tsx {{ filename: 'src/App.tsx' }}
125-
import {
126-
SignInButton,
127-
SignOutButton,
128-
SignUpButton,
129-
SignedIn,
130-
SignedOut,
131-
UserButton,
132-
} from '@clerk/react-router'
110+
import { SignInButton, SignedIn, SignedOut, UserButton } from '@clerk/react-router'
133111

134112
export default function App() {
135113
return (
136-
<div>
137-
<SignedIn>
138-
<p>You're signed in!</p>
139-
<div>
140-
<p>View your profile</p>
141-
<UserButton />
142-
</div>
143-
<div>
144-
<SignOutButton />
145-
</div>
146-
</SignedIn>
147-
114+
<header>
148115
<SignedOut>
149-
<p>You're signed out</p>
150-
<div>
151-
<SignInButton />
152-
</div>
153-
<div>
154-
<SignUpButton />
155-
</div>
116+
<SignInButton />
156117
</SignedOut>
157-
</div>
118+
<SignedIn>
119+
<UserButton />
120+
</SignedIn>
121+
</header>
158122
)
159123
}
160124
```

0 commit comments

Comments
 (0)