URL-based session syncing

All development instance Clerk apps created after December 6th, 2022 use URL-based session syncing by default, and cannot opt out.

URL-based session syncing (previously known as Cookieless Development mode) configures your frontend and your Clerk Frontend API to communicate information about the current session state via URL decoration.

This mode only applies to Development Instances. Production instances remain unaffected and continue communicating with Frontend API using first-party, HttpOnly cookies.

Migrate to URL-based session syncing

For Development instances of Clerk apps created before December 6th, 2022, by default the authentication state of the current session is passed between your frontend (e.g. localhost:3000) and your Frontend API (e.g. clerk.happy.hippo-1.lcl.dev) via a long-lived third-party cookie.

To opt-in to URL-based session syncing instead, use the following steps:

In the Clerk Dashboard, navigate to your development instance's Settings(opens in a new tab) page and toggle on Enable URL-based session syncing.
- This toggle is not available in Clerk apps created after December 6th, 2022.
In your codebase, upgrade @clerk/clerk-react to v4.4.5 or later. If your are importing @clerk/clerk-js to your project, use v4.18.0 or later.

Clerk Account Portal pages and redirects

In URL-based session syncing mode, navigating from your application to your Clerk Account Portal pages must be done using the Clerk redirection helpers and Control Components as shown in the following table:

Destination page	React component	Helper
Sign-up	`<RedirectToSignUp />`	`Clerk.redirectToSignUp()`
Sign-in	`<RedirectToSignIn />`	`Clerk.redirectToSignIn()`
User profile	`<RedirectToUserProfile />`	`Clerk.redirectToUserProfile()`
Create organization	`<RedirectToCreateOrganization />`	`Clerk.redirectToCreateOrganization()`
Organization profile	`<RedirectToOrganizationProfile />`	`Clerk.redirectToOrganizationProfile()`

For custom HTML anchors use the Clerk.redirectWithAuth helper:


<a onClick={() => clerk.redirectWithAuth('your_destination_url')}>My link</a>

Last updated on April 22, 2024