BETTER-AUTH. UI
Components

useAuthenticate()

The useAuthenticate() hook automatically redirects unauthenticated users to the sign-in page. If the user is already authenticated, this hook does nothing and allows the user to view the content normally.

This is a hook alternative to the <RedirectToSignIn /> component, useful for redirecting users programmatically.

Usage

import { useAuthenticate } from "@daveyplate/better-auth-ui"
 
export default function ProtectedPage() {
    // Will redirect to sign-in if user is not authenticated
    useAuthenticate()
    
    return <div>Protected content visible only to authenticated users</div>
}

Options

The hook accepts an options object with the following properties:

interface AuthenticateOptions {
    authView?: "signIn" | "signUp" // Default: "signIn"
    enabled?: boolean // Default: true
}
  • authView: The authentication view to redirect to. Can be either "signIn" or "signUp".
  • enabled: Whether the authentication check is enabled. When set to false, no redirection will occur.

Example with Options

import { useAuthenticate } from "@daveyplate/better-auth-ui"
 
export default function ProtectedSignUpPage() {
    // Will redirect to sign-up instead of sign-in if user is not authenticated
    useAuthenticate({
        authView: "signUp",
    })
    
    return <div>Protected content</div>
}

Disabling the Redirect

You can conditionally disable the redirection with the enabled option:

import { useAuthenticate } from "@daveyplate/better-auth-ui"
 
export default function ConditionalProtectedPage({ isProtected }: { isProtected: boolean }) {
    // Only redirect if isProtected is true
    useAuthenticate({
        enabled: isProtected
    })
    
    return <div>This content may or may not be protected</div>
}

<RedirectToSignUp />

Previous Page

<AuthLoading>

Next Page

On this page