Clerk logo

Clerk Docs

Ctrl + K
Go to clerk.devGet API keys

<RedirectToUserProfile />

Navigate to the user profile URL

Overview

Rendering a <RedirectToUserProfile/> component will navigate to the user profile URL which has been configured in your application instance. You can find the configuration on the Paths page.

This component will use the custom navigate function from the <ClerkProvider/> component if one is given - otherwise it will trigger a full page reload with the new URL location.

Usage

Make sure you've followed the installation guide for Clerk React before running the snippets below.

The example below shows a page which is normally accessible by authenticated users. All other visitors (unauthenticated users) will get redirected to the sign in page.

The <SignedIn/> and <SignedOut/> components work together as a conditional, allowing the <RedirectToUserProfile /> component to be rendered only for authenticated users.

1
import {
2
ClerkProvider,
3
SignedOut,
4
SignedIn,
5
RedirectToSignIn,
6
RedirectToUserProfile,
7
} from "@clerk/clerk-react";
8
9
const frontendApi = process.env.REACT_APP_CLERK_FRONTEND_API;
10
11
function App() {
12
return (
13
<ClerkProvider frontendApi={frontendApi}>
14
{/* Signed in users will get redirected to
15
the user profile page */}
16
<SignedIn>
17
<RedirectToUserProfile />
18
</SignedIn>
19
20
<SignedOut>
21
<RedirectToSignIn />
22
</SignedOut>
23
</ClerkProvider>
24
);
25
}
26
27
export default App;

Props

This component accepts no props.

Was this helpful?

Clerk © 2022