Skip to content

Clerk Provider Component

In order to provide clerk context to the other components in the reflex_clerk library, and to power the state logic in ClerkState, pages that contain any clerk components need to be wrapped in a ClerkProvider component.

import reflex_clerk as clerk

clerk.clerk_provider(

    ...,  # this is where you put the rest of your page

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

The publishable_key and secret_key parameters are used to authenticate with Clerk, and can be set by either passing both to the clerk_provider component or by setting the CLERK_PUBLISHABLE_KEY and CLERK_SECRET_KEY environment variables.

Note that while it appears to be added to the underlying component, the secret_key should never be shared publicly, and is stripped before being rendered -- it is used only to populate the secret key used by ClerkState to verify session tokens.

Both of these keys can be found in your Clerk Dashboard on the Clerk API Keys ⧉ page.

reflex_clerk.clerk_provider 

clerk_provider(
    *children,
    publishable_key: Optional[str] = None,
    secret_key: Optional[str] = None,
    clerk_j_s_url: Optional[str] = None,
    clerk_j_s_variant: Optional[str] = None,
    clerk_j_s_version: Optional[str] = None,
    support_email: Optional[str] = None,
    appearance: Optional[dict] = None,
    localization: Optional[dict] = None,
    allowed_redirect_origins: Optional[List[Optional[str]]] = None,
    sign_in_force_redirect_url: Optional[str] = None,
    sign_up_force_redirect_url: Optional[str] = None,
    sign_in_fallback_redirect_url: Optional[str] = None,
    sign_up_fallback_redirect_url: Optional[str] = None,
    is_satellite: Optional[bool] = None,
    domain: Optional[str] = None,
    sign_in_url: Optional[str] = None,
    telemetry: Optional[bool] = None
) -> Component

A component which wraps your application and provides a context for Clerk to function.

This component must be rendered at the root of your application, before any other reflex_clerk components.

Example 
import reflex as rx
import reflex_clerk as clerk

@rx.page("/")
def index(request):
    return clerk.clerk_provider(

        # ... Child components...

        publishable_key="pk_test_123",
        secret_key="sk_test_123",
    )

Parameters:

  • publishable_key (Optional[str], default: None ) –

    The publishable key used to initialize Clerk. This can be passed either as a prop or set as the CLERK_PUBLISHABLE_KEY environment variable.

  • secret_key (Optional[str], default: None ) –

    The secret key used to call out to the clerk API from the backend. This can be passed either as a prop or set as the CLERK_SECRET_KEY environment variable.

Other Parameters:

  • clerk_j_s_url (Optional[str]) –

    The URL that @clerk/clerk-react should hot-load @clerk/clerk-js from.

  • clerk_j_s_variant (Optional[str]) –

    The variant of @clerk/clerk-js to load. Defaults to the latest version.

  • clerk_j_s_version (Optional[str]) –

    The version of @clerk/clerk-js to load. Defaults to the latest version.

  • support_email (Optional[str]) –

    Optional support email for display in authentication screens. Will only affect Clerk Components and not Account Portal pages.

  • appearance (Optional[dict]) –

    Optional object to style your components. Will only affect Clerk Components and not Account Portal pages.

  • localization (Optional[dict]) –

    Optional object to localize your components. Will only affect Clerk Components and not Account Portal pages.

  • allowed_redirect_origins (Optional[List[Optional[str]]]) –

    Optional array of domains used to validate against the query param of an auth redirect. If no match is made, the redirect is considered unsafe and the default redirect will be used with a warning passed to the console.

  • sign_in_force_redirect_url (Optional[str]) –

    If provided, this URL will always be redirected to after the user signs in. It's recommended to use the environment variable instead.

  • sign_up_force_redirect_url (Optional[str]) –

    If provided, this URL will always be redirected to after the user signs up. It's recommended to use the environment variable instead.

  • sign_in_fallback_redirect_url (Optional[str]) –

    The fallback URL to redirect to after the user signs in, if there's no redirect_url in the path already. Defaults to /. It's recommended to use the environment variable instead.

  • sign_up_fallback_redirect_url (Optional[str]) –

    The fallback URL to redirect to after the user signs up, if there's no redirect_url in the path already. Defaults to /. It's recommended to use the environment variable instead.

  • is_satellite (Optional[bool]) –

    This option defines that the application is a satellite application.

  • domain (Optional[str]) –

    This option sets the domain of the satellite application. If your application is a satellite application, this option is required.

  • sign_in_url (Optional[str]) –

    This URL will be used for any redirects that might happen and needs to point to your primary application. This option is optional for production instances and required for development instances. It's recommended to use the environment variable instead.

  • telemetry (Optional[bool]) –

    Controls whether or not Clerk will collect telemetry data.

Returns:

  • ClerkProvider ( Component ) –

    A new instance of ClerkProvider.

Source code in custom_components/reflex_clerk/lib/clerk_provider.py 
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
def clerk_provider(
        *children,
        publishable_key: typing.Optional[str] = None,
        secret_key: typing.Optional[str] = None,
        clerk_j_s_url: typing.Optional[str] = None,
        clerk_j_s_variant: typing.Optional[str] = None,
        clerk_j_s_version: typing.Optional[str] = None,
        support_email: typing.Optional[str] = None,
        appearance: typing.Optional[dict] = None,
        localization: typing.Optional[dict] = None,
        allowed_redirect_origins: typing.Optional[typing.List[typing.Optional[str]]] = None,
        sign_in_force_redirect_url: typing.Optional[str] = None,
        sign_up_force_redirect_url: typing.Optional[str] = None,
        sign_in_fallback_redirect_url: typing.Optional[str] = None,
        sign_up_fallback_redirect_url: typing.Optional[str] = None,
        is_satellite: typing.Optional[bool] = None,
        domain: typing.Optional[str] = None,
        sign_in_url: typing.Optional[str] = None,
        telemetry: typing.Optional[bool] = None,
) -> Component:
    """
    A component which wraps your application and provides a context for Clerk to function.

    This component must be rendered at the root of your application, before any other
    reflex_clerk components.

    Example:
        ```python
        import reflex as rx
        import reflex_clerk as clerk

        @rx.page("/")
        def index(request):
            return clerk.clerk_provider(

                # ... Child components...

                publishable_key="pk_test_123",
                secret_key="sk_test_123",
            )
        ```

    Args:
        publishable_key: The publishable key used to initialize Clerk. This can be passed either as a prop or set as the `CLERK_PUBLISHABLE_KEY` environment variable.
        secret_key: The secret key used to call out to the clerk API from the backend. This can be passed either as a prop or set as the `CLERK_SECRET_KEY` environment variable.

    Other Args:
        clerk_j_s_url: The URL that @clerk/clerk-react should hot-load @clerk/clerk-js from.
        clerk_j_s_variant: The variant of @clerk/clerk-js to load. Defaults to the latest version.
        clerk_j_s_version: The version of @clerk/clerk-js to load. Defaults to the latest version.
        support_email: Optional support email for display in authentication screens. Will only affect Clerk Components and not Account Portal pages.
        appearance: Optional object to style your components. Will only affect Clerk Components and not Account Portal pages.
        localization: Optional object to localize your components. Will only affect Clerk Components and not Account Portal pages.
        allowed_redirect_origins: Optional array of domains used to validate against the query param of an auth redirect. If no match is made, the redirect is considered unsafe and the default redirect will be used with a warning passed to the console.
        sign_in_force_redirect_url: If provided, this URL will always be redirected to after the user signs in. It's recommended to use the environment variable instead.
        sign_up_force_redirect_url: If provided, this URL will always be redirected to after the user signs up. It's recommended to use the environment variable instead.
        sign_in_fallback_redirect_url: The fallback URL to redirect to after the user signs in, if there's no redirect_url in the path already. Defaults to /. It's recommended to use the environment variable instead.
        sign_up_fallback_redirect_url: The fallback URL to redirect to after the user signs up, if there's no redirect_url in the path already. Defaults to /. It's recommended to use the environment variable instead.
        is_satellite: This option defines that the application is a satellite application.
        domain: This option sets the domain of the satellite application. If your application is a satellite application, this option is required.
        sign_in_url: This URL will be used for any redirects that might happen and needs to point to your primary application. This option is optional for production instances and required for development instances. It's recommended to use the environment variable instead.
        telemetry: Controls whether or not Clerk will collect telemetry data.

    Returns:
        ClerkProvider: A new instance of ClerkProvider.
    """
    return ClerkProvider.create(
        *children,
        publishable_key=publishable_key,
        secret_key=secret_key,
        clerk_j_s_url=clerk_j_s_url,
        clerk_j_s_variant=clerk_j_s_variant,
        clerk_j_s_version=clerk_j_s_version,
        support_email=support_email,
        appearance=appearance,
        localization=localization,
        allowed_redirect_origins=allowed_redirect_origins,
        sign_in_force_redirect_url=sign_in_force_redirect_url,
        sign_up_force_redirect_url=sign_up_force_redirect_url,
        sign_in_fallback_redirect_url=sign_in_fallback_redirect_url,
        sign_up_fallback_redirect_url=sign_up_fallback_redirect_url,
        is_satellite=is_satellite,
        domain=domain,
        sign_in_url=sign_in_url,
        telemetry=telemetry)