UI Components

Buttons

<SignInButton />

import reflex_clerk as clerk
import reflex as rx

clerk.sign_in_button(
    rx.button("Sign In")
)

reflex_clerk.sign_in_button

sign_in_button(
    *children,
    force_redirect_url=None,
    fallback_redirect_url=None,
    sign_up_force_redirect_url=None,
    sign_up_fallback_redirect_url=None,
    mode="redirect"
)

The component is a button that links to the sign-in page or displays the sign-in modal.

This button is un-styled, and is intended to wrap around an rx.button component.

Examples:

import reflex_clerk as clerk

def page():
    clerk.clerk_provider(
        rx.box(
            clerk.sign_in_button(
                rx.button("Sign In")
            )
        ),
        publishable_key="pk_my_publishable_key"
    )

Parameters:

Name	Type	Description	Default
*children	Component	Zero or more child components that will be rendered inside the sign-in button.	()
force_redirect_url	Optional[str]	The URL to redirect to after the user successfully signs in. Defaults to None.	None
fallback_redirect_url	Optional[str]	The URL to redirect to if an error occurs during the sign-in process. Defaults to None.	None
sign_up_force_redirect_url	Optional[str]	The URL to redirect to after the user successfully signs up. Defaults to None.	None
sign_up_fallback_redirect_url	Optional[str]	The URL to redirect to if an error occurs during the sign-up process. Defaults to None.	None
mode	Literal['redirect', 'modal']	The mode of the sign-in button. It can be either 'redirect' or 'modal'. Defaults to None.	'redirect'

Returns:

Type	Description
SignInButton	A SignInButton component instance that can be rendered.

Source code in custom_components/reflex_clerk/lib/sign_in.py

def sign_in_button(
        *children: rx.Component,
        force_redirect_url: typing.Optional[str] = None,
        fallback_redirect_url: typing.Optional[str] = None,
        sign_up_force_redirect_url: typing.Optional[str] = None,
        sign_up_fallback_redirect_url: typing.Optional[str] = None,
        mode: typing.Literal['redirect', 'modal'] = 'redirect'
) -> SignInButton:
    """
    The <SignInButton> component is a button that links to the sign-in page or displays the sign-in modal.

    This button is un-styled, and is intended to wrap around an rx.button component.

    Examples:
        ```python
        import reflex_clerk as clerk

        def page():
            clerk.clerk_provider(
                rx.box(
                    clerk.sign_in_button(
                        rx.button("Sign In")
                    )
                ),
                publishable_key="pk_my_publishable_key"
            )
        ```

    Args:
        *children: Zero or more child components that will be rendered inside the sign-in button.
        force_redirect_url: The URL to redirect to after the user successfully signs in. Defaults to None.
        fallback_redirect_url: The URL to redirect to if an error occurs during the sign-in process. Defaults to None.
        sign_up_force_redirect_url: The URL to redirect to after the user successfully signs up. Defaults to None.
        sign_up_fallback_redirect_url: The URL to redirect to if an error occurs during the sign-up process. Defaults to None.
        mode: The mode of the sign-in button. It can be either 'redirect' or 'modal'. Defaults to None.

    Returns:
        A SignInButton component instance that can be rendered.
    """
    return SignInButton.create(
        *children,
        force_redirect_url=force_redirect_url,
        fallback_redirect_url=fallback_redirect_url,
        sign_up_force_redirect_url=sign_up_force_redirect_url,
        sign_up_fallback_redirect_url=sign_up_fallback_redirect_url,
        mode=mode
    )

<SignUpButton />

import reflex_clerk as clerk
import reflex as rx

clerk.sign_up_button(
    rx.button("Sign Up")
)

reflex_clerk.sign_up_button

sign_up_button(
    *children,
    force_redirect_url=None,
    fallback_redirect_url=None,
    sign_in_force_redirect_url=None,
    sign_in_fallback_redirect_url=None,
    mode="redirect"
)

The component is a button that links to the sign-up page or displays the sign-up modal.

This button is un-styled, and is intended to wrap around an rx.button component.

Examples:

import reflex_clerk as clerk

def page():
    clerk.clerk_provider(
        rx.box(
            clerk.sign_up_button(
                rx.button("Sign Up")
            )
        ),
        publishable_key="pk_my_publishable_key"
    )

Parameters:

Name	Type	Description	Default
force_redirect_url	str	The URL to redirect to after the user successfully signs in. Defaults to None.	None
fallback_redirect_url	str	The URL to redirect to if an error occurs during the sign-in process. Defaults to None.	None
sign_in_force_redirect_url	str	The URL to redirect to after the user successfully signs up. Defaults to None.	None
sign_in_fallback_redirect_url	str	The URL to redirect to if an error occurs during the sign-up process. Defaults to None.	None
mode	Literal['redirect', 'modal']	The mode of the sign-up button. It can be either 'redirect' or 'modal'. Defaults to 'redirect'.	'redirect'

Returns:

Type	Description
SignUpButton	A SignUpButton component instance that can be rendered.

Source code in custom_components/reflex_clerk/lib/sign_up.py

def sign_up_button(
        *children: rx.Component,
        force_redirect_url: str = None,
        fallback_redirect_url: str = None,
        sign_in_force_redirect_url: str = None,
        sign_in_fallback_redirect_url: str = None,
        mode: typing.Literal['redirect', 'modal'] = 'redirect'
) -> SignUpButton:
    """
    The <SignUpButton> component is a button that links to the sign-up page
    or displays the sign-up modal.

    This button is un-styled, and is intended to wrap around an rx.button component.

    Examples:
        ```python
        import reflex_clerk as clerk

        def page():
            clerk.clerk_provider(
                rx.box(
                    clerk.sign_up_button(
                        rx.button("Sign Up")
                    )
                ),
                publishable_key="pk_my_publishable_key"
            )
        ```

    Args:
        force_redirect_url: The URL to redirect to after the user successfully signs in. Defaults to None.
        fallback_redirect_url: The URL to redirect to if an error occurs during the sign-in process. Defaults to None.
        sign_in_force_redirect_url: The URL to redirect to after the user successfully signs up. Defaults to None.
        sign_in_fallback_redirect_url: The URL to redirect to if an error occurs during the sign-up process. Defaults to None.
        mode: The mode of the sign-up button. It can be either 'redirect' or 'modal'. Defaults to 'redirect'.

    Returns:
        A SignUpButton component instance that can be rendered.
    """
    return SignUpButton.create(
        *children,
        force_redirect_url=force_redirect_url,
        fallback_redirect_url=fallback_redirect_url,
        sign_in_force_redirect_url=sign_in_force_redirect_url,
        sign_in_fallback_redirect_url=sign_in_fallback_redirect_url,
        mode=mode
    )

<SignOutButton />

import reflex_clerk as clerk
import reflex as rx

clerk.sign_out_button(
    rx.button("Sign Out")
)

reflex_clerk.sign_out_button

sign_out_button(*children, options=None, redirect_url=None)

The component is a button that signs out the user and redirects them to a specified URL.

This button is un-styled, and is intended to wrap around an rx.button component.

Examples:

import reflex_clerk as clerk

def page():
    clerk.clerk_provider(
        rx.box(
            clerk.sign_out_button(
                rx.button("Sign Out")
            )
        ),
        publishable_key="pk_my_publishable_key"
    )

Parameters:

Name	Type	Description	Default
*children	Component	Zero or more child components that will be rendered inside the sign-out button.	()
options	SignOutOptions	Options for the sign-out button. Defaults to None.	None
redirect_url	str	The URL to redirect to after sign-out. Defaults to None.	None

Returns:

Type	Description
SignOutButton	A SignOutButton component instance that can be rendered.

Source code in custom_components/reflex_clerk/lib/sign_out.py

def sign_out_button(
        *children: rx.Component,
        options: SignOutOptions = None,
        redirect_url: str = None
) -> SignOutButton:
    """
    The <SignOutButton> component is a button that signs out the user and redirects them to a specified URL.

    This button is un-styled, and is intended to wrap around an rx.button component.

    Examples:
        ```python
        import reflex_clerk as clerk

        def page():
            clerk.clerk_provider(
                rx.box(
                    clerk.sign_out_button(
                        rx.button("Sign Out")
                    )
                ),
                publishable_key="pk_my_publishable_key"
            )
        ```

    Args:
        *children: Zero or more child components that will be rendered inside the sign-out button.
        options: Options for the sign-out button. Defaults to None.
        redirect_url: The URL to redirect to after sign-out. Defaults to None.

    Returns:
        A SignOutButton component instance that can be rendered.
    """
    return SignOutButton.create(
        *children,
        options=options,
        redirect_url=redirect_url
    )

<UserButton />

import reflex_clerk as clerk

clerk.user_button()

reflex_clerk.user_button

user_button(
    *children,
    appearance=None,
    show_name=None,
    sign_in_url=None,
    user_profile_mode="modal",
    user_profile_url=None,
    after_sign_out_url=None,
    after_multi_session_single_sign_out_url=None,
    after_switch_session_url=None,
    default_open=None,
    user_profile_props=None
)

The component displays a user image button that can be configured with various options.

Examples:

import reflex_clerk as clerk

def page():
    clerk.clerk_provider(
        rx.box(
            clerk.user_button()
        ),
        publishable_key="pk_my_publishable_key"
    )

Parameters:

Name	Type	Description	Default
appearance	Appearance	Optional object to style the component. Will only affect Clerk Components and not Account Portal pages.	None
show_name	bool	Controls if the user name is displayed next to the user image button. Defaults to False.	None
sign_in_url	str	Full URL or path to navigate to when the Add another account button is clicked.	None
user_profile_mode	Literal['modal', 'navigation']	Controls whether clicking the Manage your account button will open the component as a modal or navigate to the userProfileUrl. Defaults to 'modal'.	'modal'
user_profile_url	str	Full URL or path leading to the user management interface.	None
after_sign_out_url	str	Full URL or path to navigate to after signing out from all accounts. Defaults to '/'.	None
after_multi_session_single_sign_out_url	str	Full URL or path to navigate to after signing out from the currently active account in multi-session apps.	None
after_switch_session_url	str	Full URL or path to navigate to after a successful account change in multi-session apps.	None
default_open	bool	Controls whether the should open by default during the first render. Defaults to None.	None
user_profile_props	dict	Options for the underlying component.	None

Returns:

Type	Description
UserButton	A UserButton component instance that can be rendered.

Source code in custom_components/reflex_clerk/lib/user.py

def user_button(
        *children: rx.Component,
        appearance: Appearance = None,
        show_name: bool = None,
        sign_in_url: str = None,
        user_profile_mode: typing.Literal['modal', 'navigation'] = 'modal',
        user_profile_url: str = None,
        after_sign_out_url: str = None,
        after_multi_session_single_sign_out_url: str = None,
        after_switch_session_url: str = None,
        default_open: bool = None,
        user_profile_props: dict = None
) -> UserButton:
    """
    The <UserButton> component displays a user image button that can be configured with various options.

    Examples:
        ```python
        import reflex_clerk as clerk

        def page():
            clerk.clerk_provider(
                rx.box(
                    clerk.user_button()
                ),
                publishable_key="pk_my_publishable_key"
            )
        ```

    Args:
        appearance: Optional object to style the component. Will only affect Clerk Components and not Account Portal pages.
        show_name: Controls if the user name is displayed next to the user image button. Defaults to False.
        sign_in_url: Full URL or path to navigate to when the Add another account button is clicked.
        user_profile_mode: Controls whether clicking the Manage your account button will open the <UserProfile /> component as a modal or navigate to the userProfileUrl. Defaults to 'modal'.
        user_profile_url: Full URL or path leading to the user management interface.
        after_sign_out_url: Full URL or path to navigate to after signing out from all accounts. Defaults to '/'.
        after_multi_session_single_sign_out_url: Full URL or path to navigate to after signing out from the currently active account in multi-session apps.
        after_switch_session_url: Full URL or path to navigate to after a successful account change in multi-session apps.
        default_open: Controls whether the <UserButton /> should open by default during the first render. Defaults to None.
        user_profile_props: Options for the underlying <UserProfile /> component.

    Returns:
        A UserButton component instance that can be rendered.
    """
    return UserButton.create(
        *children,
        appearance=appearance,
        show_name=show_name,
        sign_in_url=sign_in_url,
        user_profile_mode=user_profile_mode,
        user_profile_url=user_profile_url,
        after_sign_out_url=after_sign_out_url,
        after_multi_session_single_sign_out_url=after_multi_session_single_sign_out_url,
        after_switch_session_url=after_switch_session_url,
        default_open=default_open,
        user_profile_props=user_profile_props
    )

Authentication Components

<SignIn />

import reflex_clerk as clerk

clerk.sign_in()

The component renders a sign-in form.

Instead of using this component directly, consider using the pre-configured sign-in page configured with reflex_clerk.install_signin_page.

This form can be styled and configured with various routing and redirection options.

Examples:

import reflex_clerk as clerk

def page():
    clerk.clerk_provider(
        rx.box(
            rx.heading("Welcome, please sign in!"),
            clerk.sign_in()
        ),
        publishable_key="pk_my_publishable_key"
    )

Parameters:

Name	Type	Description	Default
appearance	Appearance	The appearance configuration for the sign-in form.	None
routing	Literal['hash', 'path', 'virtual']	The routing strategy for the pages. Can be 'hash', 'path', or 'virtual'. Defaults to None.	None
path	str	The path where the component is mounted when routing is set to 'path'. Ignored for 'hash' and 'virtual' routing.	None
sign_up_url	str	Full URL or path to the sign-up page.	None
force_redirect_url	str	URL to redirect to after sign-in. Takes priority over deprecated props.	None
fallback_redirect_url	str	Fallback URL to redirect to after sign-in if no redirect URL is provided in the path. Defaults to '/'.	None
sign_up_force_redirect_url	str	URL to redirect to after sign-up. Takes priority over deprecated props.	None
sign_up_fallback_redirect_url	str	Fallback URL to redirect to after sign-up if no redirect URL is provided in the path. Defaults to '/'.	None
initial_values	Optional[SignInInitialValues]	Prefilled values for the sign-in fields. Defaults to None.	None

Returns:

Type	Description
SignIn	A SignIn component instance that can be rendered.

Source code in custom_components/reflex_clerk/lib/sign_in.py

def sign_in(
        *children: rx.Component,
        appearance: Appearance = None,
        routing: typing.Literal['hash', 'path', 'virtual'] = None,
        path: str = None,
        sign_up_url: str = None,
        force_redirect_url: str = None,
        fallback_redirect_url: str = None,
        sign_up_force_redirect_url: str = None,
        sign_up_fallback_redirect_url: str = None,
        initial_values: typing.Optional[SignInInitialValues] = None
) -> SignIn:
    """
    The <SignIn> component renders a sign-in form.

    Instead of using this component directly, consider using the pre-configured sign-in
    page configured with [`reflex_clerk.install_signin_page`][].

    This form can be styled and configured with various routing and redirection options.

    Examples:
        ```python
        import reflex_clerk as clerk

        def page():
            clerk.clerk_provider(
                rx.box(
                    rx.heading("Welcome, please sign in!"),
                    clerk.sign_in()
                ),
                publishable_key="pk_my_publishable_key"
            )
        ```

    Args:
        appearance: The appearance configuration for the sign-in form.
        routing: The routing strategy for the pages. Can be 'hash', 'path', or 'virtual'. Defaults to None.
        path: The path where the component is mounted when routing is set to 'path'. Ignored for 'hash' and 'virtual' routing.
        sign_up_url: Full URL or path to the sign-up page.
        force_redirect_url: URL to redirect to after sign-in. Takes priority over deprecated props.
        fallback_redirect_url: Fallback URL to redirect to after sign-in if no redirect URL is provided in the path. Defaults to '/'.
        sign_up_force_redirect_url: URL to redirect to after sign-up. Takes priority over deprecated props.
        sign_up_fallback_redirect_url: Fallback URL to redirect to after sign-up if no redirect URL is provided in the path. Defaults to '/'.
        initial_values: Prefilled values for the sign-in fields. Defaults to None.

    Returns:
        A SignIn component instance that can be rendered.
    """
    return SignIn.create(
        *children,
        appearance=appearance,
        routing=routing,
        path=path,
        sign_up_url=sign_up_url,
        force_redirect_url=force_redirect_url,
        fallback_redirect_url=fallback_redirect_url,
        sign_up_force_redirect_url=sign_up_force_redirect_url,
        sign_up_fallback_redirect_url=sign_up_fallback_redirect_url,
        initial_values=initial_values
    )

<SignUp />

import reflex_clerk as clerk

clerk.sign_up()

The component renders a sign-up form.

Instead of using this component directly, consider using the pre-configured sign-in page configured with reflex_clerk.install_signup_page.

This form can be styled and configured with various routing and redirection options.

Examples:

import reflex_clerk as clerk

def page():
    clerk.clerk_provider(
        rx.box(
            rx.heading("Welcome, please sign up!"),
            clerk.sign_up()
        ),
        publishable_key="pk_my_publishable_key"
    )

Parameters:

Name	Type	Description	Default
appearance	Appearance	The appearance configuration for the sign-up form.	None
routing	Literal['hash', 'path', 'virtual']	The routing strategy for the pages. Can be 'hash', 'path', or 'virtual'. Defaults to None.	None
path	str	The path where the component is mounted when routing is set to 'path'. Ignored for 'hash' and 'virtual' routing.	None
sign_in_url	str	Full URL or path to the sign-in page.	None
force_redirect_url	str	URL to redirect to after sign-in. Takes priority over deprecated props.	None
fallback_redirect_url	str	Fallback URL to redirect to after sign-in if no redirect URL is provided in the path. Defaults to '/'.	None
sign_in_force_redirect_url	str	URL to redirect to after sign-up. Takes priority over deprecated props.	None
sign_in_fallback_redirect_url	str	Fallback URL to redirect to after sign-up if no redirect URL is provided in the path. Defaults to '/'.	None
initial_values	Optional[SignUpInitialValues]	Prefilled values for the sign-up fields. Defaults to None.	None

Returns:

Type	Description
SignUp	A SignUp component instance that can be rendered.

Source code in custom_components/reflex_clerk/lib/sign_up.py

def sign_up(
        *children: rx.Component,
        appearance: Appearance = None,
        routing: typing.Literal['hash', 'path', 'virtual'] = None,
        path: str = None,
        sign_in_url: str = None,
        force_redirect_url: str = None,
        fallback_redirect_url: str = None,
        sign_in_force_redirect_url: str = None,
        sign_in_fallback_redirect_url: str = None,
        initial_values: typing.Optional[SignUpInitialValues] = None
) -> SignUp:
    """
    The <SignUp> component renders a sign-up form.

    Instead of using this component directly, consider using the pre-configured sign-in
    page configured with [`reflex_clerk.install_signup_page`][].

    This form can be styled and configured with various routing and redirection options.

    Examples:
        ```python
        import reflex_clerk as clerk

        def page():
            clerk.clerk_provider(
                rx.box(
                    rx.heading("Welcome, please sign up!"),
                    clerk.sign_up()
                ),
                publishable_key="pk_my_publishable_key"
            )
        ```

    Args:
        appearance: The appearance configuration for the sign-up form.
        routing: The routing strategy for the pages. Can be 'hash', 'path', or 'virtual'. Defaults to None.
        path: The path where the component is mounted when routing is set to 'path'. Ignored for 'hash' and 'virtual' routing.
        sign_in_url: Full URL or path to the sign-in page.
        force_redirect_url: URL to redirect to after sign-in. Takes priority over deprecated props.
        fallback_redirect_url: Fallback URL to redirect to after sign-in if no redirect URL is provided in the path. Defaults to '/'.
        sign_in_force_redirect_url: URL to redirect to after sign-up. Takes priority over deprecated props.
        sign_in_fallback_redirect_url: Fallback URL to redirect to after sign-up if no redirect URL is provided in the path. Defaults to '/'.
        initial_values: Prefilled values for the sign-up fields. Defaults to None.

    Returns:
        A SignUp component instance that can be rendered.
    """
    return SignUp.create(
        *children,
        appearance=appearance,
        routing=routing,
        path=path,
        sign_in_url=sign_in_url,
        force_redirect_url=force_redirect_url,
        fallback_redirect_url=fallback_redirect_url,
        sign_in_force_redirect_url=sign_in_force_redirect_url,
        sign_in_fallback_redirect_url=sign_in_fallback_redirect_url,
        initial_values=initial_values
    )

<UserProfile />

import reflex_clerk as clerk

clerk.user_profile()

reflex_clerk.user_profile

user_profile(
    *children, appearance=None, additional_oauth_scopes=None
)

The component displays the user profile interface with various configuration options.

Examples:

import reflex_clerk as clerk

def page():
    clerk.clerk_provider(
        rx.box(
            clerk.user_profile()
        ),
        publishable_key="pk_my_publishable_key"
    )

Parameters:

Name	Type	Description	Default
*children	Component	Zero or more child components that will be rendered inside the user profile component.	()
appearance	Appearance	Optional object to style the component. Will only affect Clerk Components and not Account Portal pages.	None
additional_oauth_scopes	dict	Specify additional scopes per OAuth provider that your users would like to provide if not already approved. Defaults to None.	None

Returns:

Type	Description
UserProfile	A UserProfile component instance that can be rendered.

Source code in custom_components/reflex_clerk/lib/user.py

def user_profile(
        *children: rx.Component,
        appearance: Appearance = None,
        additional_oauth_scopes: dict = None
) -> UserProfile:
    """
    The <UserProfile> component displays the user profile interface with various configuration options.

    Examples:
        ```python
        import reflex_clerk as clerk

        def page():
            clerk.clerk_provider(
                rx.box(
                    clerk.user_profile()
                ),
                publishable_key="pk_my_publishable_key"
            )
        ```

    Args:
        *children: Zero or more child components that will be rendered inside the user profile component.
        appearance: Optional object to style the component. Will only affect Clerk Components and not Account Portal pages.
        additional_oauth_scopes: Specify additional scopes per OAuth provider that your users would like to provide if not already approved. Defaults to None.

    Returns:
        A UserProfile component instance that can be rendered.
    """
    return UserProfile.create(
        *children,
        appearance=appearance,
        additional_oauth_scopes=additional_oauth_scopes
    )