Skip to main content
Docs

<MultisessionAppSupport>

The <MultisessionAppSupport> provides a wrapper for your React application that guarantees a full rerendering cycle every time the current session and user changes.

Usage

pages/_app.tsx
import '@/styles/globals.css'
import { MultisessionAppSupport, ClerkProvider } from '@clerk/nextjs/internal'
import { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ClerkProvider {...pageProps}>
      <MultisessionAppSupport>
        <Component {...pageProps} />
      </MultisessionAppSupport>
    </ClerkProvider>
  )
}

export default MyApp
app.tsx
import { ClerkProvider, MultisessionAppSupport } from '@clerk/clerk-react/internal'

// Import your Publishable Key
const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

if (!PUBLISHABLE_KEY) {
  throw new Error('Add your Clerk Publishable Key to the .env.local file')
}

function App() {
  return (
    <ClerkProvider publishableKey={PUBLISHABLE_KEY}>
      <MultisessionAppSupport>
        <Page />
      </MultisessionAppSupport>
    </ClerkProvider>
  )
}

function Page() {
  return <div>The content</div>
}

Feedback

What did you think of this content?

Last updated on