reflex-clerk-api demo

0.4.0

Customreflexcomponents that wrap Clerk react components (@clerk/clerk-react) and interact with the Clerk backend API.

See the overview of Clerk components for more info on the wrapped components.

Note: This is intended to be roughly a drop-in replacement of the kroo/reflex-clerk package that is no longer maintained.

In addition to wrapping the basic components (and in comparison to Kroo's implementation), this additionally:

  • uses Clerk's maintained python backend api (clerk-backend-api)
  • is fully asynchronous, using async/await for all requests to the Clerk backend
  • supports reflex 0.7.x
  • adds a helper for handling on_load events that require knowledge of user authentication status. (i.e. ensuring the ClerkState is updated first)
  • adds a way to register event handlers to be called on authentication changes (login/logout)
  • Checks JWT tokens are actually valid (not expired etc.)

Getting Started

Install with pip: 

pip install reflex-clerk-api

Or with a package manager (uv/poetry):

uv add reflex-clerk-api

Import the package

import reflex_clerk_api as clerk

Demos

The demos below are using a development Clerk API key, so you can try out everything with fake credentials.

To simply log in, you can use the email/password combination.

username
[email protected]
password
test-clerk-password

Or if you want test signing up, you can use any email with +clerk_test appended to it. E.g., [email protected].

Use any password you like, and the verification code will be 424242.

More info on test credentials can be found in the Clerk documentation.

ClerkState variables and methods

State variables and methods available on the `ClerkState` object.

Clerk loaded and signed in/out areas

Demo of clerk_loaded, clerk_loading, and signed_in, signed_out components.

Better on_load handling

Wrap on_load events with clerk.on_load(...) to ensure the ClerkState is updated before events run.

On auth change callbacks

You can register a method to be called when the user logs in or out.

ClerkUser info

To conveniently use basic information within the frontend, you can use the `clerk.ClerkUser` state.

Sign-in and sign-up pages

Some basic sign-in and sign-up pages are implemented for easy use. You can also create your own.

User profile management

Users can manage their profile via the Clerk interface.

Built with Reflex