<RedirectToSignIn />
The <RedirectToSignIn /> component will navigate to the sign in 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
import {
ClerkProvider,
SignedIn,
SignedOut,
RedirectToSignIn,
} from "@clerk/nextjs";
import { AppProps } from "next/app";
function MyApp({ Component, pageProps } : AppProps) {
return (
<ClerkProvider {...pageProps}>
<SignedIn>
<Component {...pageProps} />
</SignedIn>
<SignedOut>
<RedirectToSignIn />
</SignedOut>
</ClerkProvider>
);
}
export default MyApp;import {
ClerkProvider,
SignedIn,
SignedOut,
RedirectToSignIn
} from "@clerk/clerk-react";
function PrivatePage() {
return (
<ClerkProvider publishableKey={`YOUR_PUBLISHABLE_KEY`}>
<SignedIn>
Content that is displayed to signed in
users.
</SignedIn>
<SignedOut>
<RedirectToSignIn />
</SignedOut>
</div>
);
}import {
SignedIn,
SignedOut,
RedirectToSignIn,
UserButton,
} from "@clerk/remix";
export default function Index() {
return (
<div>
<SignedIn>
<h1>Index route</h1>
<p>You are signed in!</p>
<UserButton />
</SignedIn>
<SignedOut>
<RedirectToSignIn />
</SignedOut>
</div>
);
}- Name
redirectUrl- Type
string- Description
Full URL or path to navigate after successful sign in or sign up.
This is the same as settingafterSignInUrlandafterSignUpUrlto the same value.
- Name
afterSignInUrl- Type
string- Description
The full URL or path to navigate after a successful sign in.
- Name
afterSignUpUrl- Type
string- Description
The full URL or path to navigate after a successful sign up.
- Name
initialValues- Type
SignInInitialValues- Description
The values used to prefill the sign-in fields with.
Feedback
Last updated on