Add docs for sign in and up using React

[royanger]

🔎 Previews:

• https://clerk.com/docs/pr/roy-add-docs-for-react-sign-in-and-sign-up-pages/react/guides/development/declarative-mode
• https://clerk.com/docs/pr/roy-add-docs-for-react-sign-in-and-sign-up-pages/react/guides/development/custom-sign-in-or-up-page
• https://clerk.com/docs/pr/roy-add-docs-for-react-sign-in-and-sign-up-pages/react/guides/development/custom-sign-up-page

What does this solve? What changed?

During the work I realized that we currently have this guide to add react-router but is for the @clerk/react-router SDK and not @clerk/clerk-react. Changing to @clerk/clerk-react doesn't fully work. Without using reasct-router's useNavigate() hook and the routerPath and routerReplace props the app reloads on navigation.

To test this, please use the following branch. See lines 21-29 of /src/main.tsx

git clone -b test-declaractive-mode-guide https://github.com/royanger/react-router-example

I wrote a new @clerk/clerk-react specific guide to address this.

Docs are missing a dedicated guide for adding a sign-in-or-up page and adding a sign-up page for Clerk+React.

• added both pages
• provides an example with no router package and an example with react-router
• the router example builds off the above new guide

Testing the 'no router' code

git clone -b main https://github.com/royanger/react-router-example

Testing the react-router code

git clone -b with-router https://github.com/royanger/react-router-example

• users trying to use @clerk/clerk-react will have app reload/flickering issues with using useNavigate()
• all of these changes are aimed at improving AI implementing Clerk in a React application. Currently without these docs AI can significantly error when trying to add sign-in and/or sign-up pages

Deadline

Other resources

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
clerk-docs	Ready	Preview	Mar 19, 2026 6:08pm

[manovotny]

I made commits to remove the Claude settings (e44fad8) and fix the "incase" → "in case" typos (2d0e5c2).

I tested the actual code examples and things look good there. 👍

The only thing I'm hung up on is: These are React guides, but we pull in React Router into both of them even though React Router has it's own SDK and guides. I don't know how I feel about that. Maybe @alexisintech can give us her opinion/guidance?

[royanger]

The only thing I'm hung up on is: These are React guides, but we pull in React Router into both of them even though React Router has it's own SDK and guides. I don't know how I feel about that. Maybe @-alexisintech can give us her opinion/guidance?

There are specifically @clerk/react-router guides, but not @clerk/clerk-react guides. The latter would allow for other routers, as well as react-router in library mode (what the guide shows). For library mode + @clerk/clerk-react the differences are subtle but present.

I could make a few changes to the PR to help clarify things:

• confirm with engineering if we should always recommend @clerk/react-router for both library and framework mode (unless docs folks have done this) and if so add a warning/callout for @clerk/clerk-react to use it for React apps that are not using react-router and swap to @clerk/react-router for apps that are.
• change the new 'add sign in/up' guides to use a different router like Tanstack Router

Separate from the above, I can also expand the @clerk/react-router guides to show using file based routing for frameworks and keep the declarative example for library mode usage.

[alexisintech]

I've posted my docs review

I've added a callout about how Clerk Docs is using React Router, but assuring users they can use whatever router they have and use our guides as a starting point.

Added a QUIZ callout for "why is it necessary to move clerkprovider into its own component?"

Got the guides updated with Core 3 changes.

Added a "Protect content and read user data" guide for React

Let me know what you think! @royanger

[alexisintech]

just waiting on your feedback @royanger

[alexisintech]

everything looks good to me!

[royanger]

Any reason this is a warning callout while the same info from above on line 11 is bold?

Also this and the warning from aboveare out of order, or the warning below could be redundant. This points to 'add a sign in or up page' which in turn points to 'add react router', so do we need both here?

I feel like if we keep both mentions, then maybe roll them into one, something like this:

Suggested change

	<Include src="_partials/react/react-router-callout" />
	> [!Warning]
	> This example assumes you've added React Router to your application. If you haven't, see the [dedicated tutorial](https://clerk.com/docs/pr/roy-add-docs-for-react-sign-in-and-sign-up-pages/react/guides/development/declarative-mode). It also assumes you've set up the sign-in page by following the [custom sign-in-or-up page guide](/docs/react/guides/development/custom-sign-in-or-up-page)

Also, I might be overthinking this but the two message/out of order aspect just jumped out at me when reviewing.

If a chance is made here the 'No router' warning would need an update too.

[alexisintech]

the first callout, in the introduction section, is about setting up the sign-in-or-up page. this is for all users that are using this guide (they should set up their sign in page and then set up this sign up page).

the callout here about setting up react router, is only for users using react router - which is why its a separate callout, and its placed in the "react router" tab

[royanger]

I totally get that. I was just saying that despite that, they feel out of order depending on what you're doing. And, as I admitted to, I might be overthinking it. My concern here is definitely non-blocking.

[royanger]

This is the only 'unresolved' item (unresolved really just being if you wanted to change anything here or not). If you are good with this, I'm good with merging this PR.