<RedirectToSignIn />

Navigate immediately to the sign-in URL

Overview

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

The behavior will be just like a server-side (3xx) redirect, and will override the current location in the history stack.

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 requests) will get redirected to the sign in page.

The <SignedIn/> and <SignedOut/> components work together as a conditional, allowing the <RedirectToSignIn/> component to be rendered only for unauthenticated requests.

1
import { 
2
  ClerkProvider,
3
  SignedIn,
4
  SignedOut,
5
  RedirectToSignIn 
6
} from "@clerk/clerk-react";
7

8
//function to handle private page
9
function PrivatePage() {
10
  return (
11
    <ClerkProvider publishableKey={"your_publishable_key"}>
12
      <SignedIn>
13
        Content that is displayed to signed in
14
        users.
15
      </SignedIn>
16
      <SignedOut>
17
        {/* 
18
          Non-authenticated visitors will be redirected
19
          to the sign in page.
20
        */}
21
        <RedirectToSignIn />
22
      </SignedOut>
23
    </div>
24
  );
25
}

Props

Name	Type	Description
redirectUrl?	string	Full URL or path to navigate to after successful sign in or sign up. Use this instead of setting afterSignInUrl and afterSignUpUrl to the same value. To return to the same URL, set to window.location.href
afterSignInUrl?	string	The full URL or path to navigate to after a successful sign in. Defaults to the Sign-in URL on the Paths page of your Dashboard.
afterSignUpUrl?	string	The full URL or path to navigate to after a successful sign up. Defaults to the Sign-up URL on the Paths page of your Dashboard.