Skip to content

Reflex Clerk Component Library Documentation

A Reflex custom component library for Clerk ⧉, a User Management Platform.

SignIn
UserButton

Getting Started

Install with pip install:

pip install reflex-clerk

Import the custom component:

import reflex_clerk as clerk

Install signup and login pages:

import reflex as rx
import reflex_clerk as clerk

app = rx.App()
clerk.install_pages(
    app,
    publishable_key="pk_my_publishable_key",
    signin_route="/signin",
    signup_route="/signup"
)

Wrap any pages that use clerk auth components in a clerk_provider.

import reflex_clerk as clerk
import reflex as rx


@rx.page("/")
def homepage():
    clerk.clerk_provider(
        ...,  # the rest of my homepage

        publishable_key="pk_my_publishable_key",
        secret_key="sk_my_secret_key"
    )

... and now use one of over a dozen components provided by the Clerk SDK, and access the current user with ClerkState.

import reflex_clerk as clerk
import reflex as rx

...
clerk.clerk_provider(
    ...,

    clerk.signed_in(  # (1) 
        rx.cond(
            clerk.ClerkState.user.has_image,  # (2)
            rx.chakra.avatar(
                src=clerk.ClerkState.user.image_url,  # (3)
                name=clerk.ClerkState.user.first_name,
                size="xl",
            ),
        )
    ),

    ...
)
  1. The clerk.signed_in() control component hides child components unless the user is actively logged in. See also clerk.signed_out() and clerk.protect.
  2. ClerkState provides a reflex State that holds the current authentication state, as well as the reflex user itself.
  3. ClerkState.user contains the Clerk user object for the currently logged in user -- including email and phone number info, name information, and an avatar image.

Components

Reflex State Management

  • ClerkState.is_logged_in: true if we can verify the current reflex session contains an authenticated Clerk user
  • ClerkState.user: a copy of the Clerk user object retrieved at the time of authentication

Reflex Auth Pages