Docs

You are viewing an archived version of the docs.Go to latest version

<RedirectToUserProfile />

The <RedirectToUserProfile /> component will navigate to the 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.

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>
        Please 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>
        Please Sign In
      </SignedOut>
    </div>
  );
}
routes/index.tsx
import {
  SignedIn,
  SignedOut,
  RedirectToUserProfile
} from "@clerk/remix";

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

Feedback

What did you think of this content?

Last updated on