UI Components <RedirectToUserProfile />
<RedirectToUserProfile />
(deprecated)
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:
In the Clerk Dashboard, navigate to the Account Portal page.
Under User profile , select the Visit icon.
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 >You need to sign in to view your user profile.</ 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 >You need to sign in to view your user profile.</ SignedOut >
</ ClerkProvider >
)
}
routes /index.tsx import { SignedIn , SignedOut , RedirectToUserProfile } from '@clerk/remix'
export default function Index () {
return (
< div >
< SignedIn >
< RedirectToUserProfile />
</ SignedIn >
< SignedOut >
< p >You need to sign in to view your user profile.</ p >
</ SignedOut >
</ div >
)
}
Last updated on Jan 15, 2025