The <LoginButton> component allows you to show a button that triggers the login flow and redirects the user to your authentication portal.

You can use the component as it or pass it a child to customize it.

​
Props

children
ReactNode

A single child element to customize the button. Don’t pass any handler even if it’s a button.

​
Examples

​
Default usage

import { LoginButton, SignedOut } from "@kobbleio/next/client";

export default function MyComponent() {
    return (
        <SignedOut>
            <LoginButton />
        </SignedOut>
    );
}

​
Custom button

import { LoginButton, SignedOut } from "@kobbleio/next/client";

export default function MyComponent() {
    return (
        <SignedOut>
            <LoginButton>
                <button className={'your-class'}>
                    Login
                </button>
            </LoginButton>
        </SignedOut>
    );
}
The onClick event will automatically get handled by the SDK, don’t pass any handler.
<IsForbidden /><LogoutButton />