Docs

<RedirectToUserProfile />

The <RedirectToUserProfile /> component will navigate to the Account Portal User Profile URL which has been configured in your application instance. The behavior will be just like a server-side (3xx) redirect, and will override the current location in the history stack.

To find your User Profile URL:

  1. In the Clerk Dashboard, navigate to the Account Portal page.
  2. Under User profile, select the Visit icon.

Usage

pages/_app.tsx
import { ClerkProvider, SignedIn, SignedOut, RedirectToUserProfile } from '@clerk/nextjs'
import { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ClerkProvider {...pageProps}>
      <SignedIn>
        <RedirectToUserProfile />
      </SignedIn>
      <SignedOut>Sign In</SignedOut>
    </ClerkProvider>
  )
}

export default MyApp
pages/privatepage.tsx
import { ClerkProvider, SignedIn, SignedOut, RedirectToUserProfile } from '@clerk/clerk-react'

function PrivatePage() {
  return (
    <ClerkProvider publishableKey={`YOUR_PUBLISHABLE_KEY`}>
      <SignedIn>
        <RedirectToUserProfile />
      </SignedIn>
      <SignedOut>Sign In</SignedOut>
    </ClerkProvider>
  )
}
routes/index.tsx
import { SignedIn, SignedOut, RedirectToUserProfile } from '@clerk/remix'

export default function Index() {
  return (
    <div>
      <SignedIn>
        <RedirectToUserProfile />
      </SignedIn>
      <SignedOut>
        <p>Sign in </p>
      </SignedOut>
    </div>
  )
}

Feedback

What did you think of this content?

Last updated on