Skip to content

Pages

This provides some example code for adding dedicated sign-in and sign-up pages to your app.

add_sign_in_page(app, publishable_key=None, route='/sign-in')

Adds a sign-in page that is customizable via the Clerk dashboard.

Source code in custom_components/reflex_clerk_api/pages.py 
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
def add_sign_in_page(
    app: rx.App, publishable_key: str | None = None, route: str = "/sign-in"
) -> None:
    """
    Adds a sign-in page that is customizable via the Clerk dashboard.
    """
    assert route.startswith("/")
    publishable_key = publishable_key or os.environ["CLERK_PUBLISHABLE_KEY"]

    sign_in_page = clerk.clerk_provider(
        rx.center(
            rx.vstack(
                clerk.sign_in(path=route),
                align="center",
                spacing="7",
            ),
            height="100vh",
        ),
        publishable_key=publishable_key,
    )
    app.add_page(sign_in_page, route=route + "/[[...signin]]")

add_sign_up_page(app, publishable_key=None, route='/sign-up')

Adds a sign-up page that is customizable via the Clerk dashboard.

Source code in custom_components/reflex_clerk_api/pages.py 
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
def add_sign_up_page(
    app: rx.App, publishable_key: str | None = None, route: str = "/sign-up"
) -> None:
    """
    Adds a sign-up page that is customizable via the Clerk dashboard.
    """
    assert route.startswith("/")
    publishable_key = publishable_key or os.environ["CLERK_PUBLISHABLE_KEY"]

    sign_up_page = clerk.clerk_provider(
        rx.center(
            rx.vstack(
                clerk.sign_up(path=route),
                align="center",
                spacing="7",
            ),
            height="100vh",
        ),
        publishable_key=publishable_key,
    )
    app.add_page(sign_up_page, route=route + "/[[...signup]]")