Better Auth UI

The <RedirectToSignIn /> component automatically redirects unauthenticated users to the sign-in page. If the user is already authenticated, this component will render nothing and allow the user to view the content normally.

Useful for wrapping pages or routes that require users to be signed in.

Usage

import { RedirectToSignIn, SignedIn } from "@daveyplate/better-auth-ui"

export default function ProtectedPage() {
    return (
        <>
            <RedirectToSignIn />

            <SignedIn>
                You can see this content only if you are authenticated.
            </SignedIn>
        </>
    )
}

Example

Here's a practical example of enforcing authentication for private routes:

PrivateRoute.tsx

import { RedirectToSignIn, SignedIn } from "@daveyplate/better-auth-ui"

export default function PrivateRoute({ children }: { children: React.ReactNode }) {
  return (
    <>
      <RedirectToSignIn />
      
      <SignedIn>
        {children}
      </SignedIn>
    </>
  )
}

In this example, we're ensuring that the user is redirected to the sign-in page if they are not logged in.

<RedirectToSignIn />

Usage

Example

On this page