URL-based session syncing

Development instances created before December 6, 2022 communicate with Clerk's Frontend API(opens in a new tab) using third-party cookies. More concretely, the authentication state of the current session is transported via a long-lived third-party cookie, between your frontend (e.g. localhost:3000) and the Frontend API (e.g. clerk.happy.hippo-1.lcl.dev).

URL-based session syncing (previously known as Cookieless Development mode) is a new, experimental mode of operation for development instances, in which communication with the Clerk Frontend API is done via URL decoration instead.

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

Migrating to URL-based session syncing

To opt-in to URL-based session syncing, perform 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.
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 March 12, 2024