Skip to content

Clerk authentication breaks build when no API key is available #1

@falocab

Description

@falocab

Issue: Clerk authentication breaks build when no API key is available

Problem

When trying to deploy via Docker/Podman Compose, the build fails at npm run build with:

src/main.tsx(33,6): error TS2741: Property 'publishableKey' is missing in type
'{ children: Element; afterSignOutUrl: string; }' but required in type
'Omit<IsomorphicClerkOptions, "appearance" | keyof InternalClerkScriptProps>'

This is caused by a breaking change in @clerk/clerk-react that now requires publishableKey to be explicitly passed to <ClerkProvider>. Even setting a dummy/empty value does not solve the issue, because useAuth() is called inside ClerkTokenBridge (in main.tsx) outside of a valid Clerk context, causing a runtime crash:

Uncaught Error: @clerk/react: useAuth can only be used within the <ClerkProvider /> component

This means the app renders a blank white/black screen even if the build succeeds.

Files affected

  • frontend/src/main.tsxClerkProvider wrapper and ClerkTokenBridge component using useAuth()
  • frontend/src/App.tsx<Show when="signed-in"> / <Show when="signed-out"> from @clerk/react
  • frontend/src/components/layout/Navbar.tsxShow, SignInButton, UserButton from @clerk/react
  • frontend/src/pages/Marketing.tsxSignInButton, SignUpButton, useClerk from @clerk/react

Fix applied

Removed Clerk entirely and made the app always render the authenticated view:

  1. main.tsx: Removed ClerkProvider, ClerkTokenBridge, useAuth and setTokenGetter. App now renders directly with BrowserRouter + QueryClientProvider.
  2. App.tsx: Removed Show component usage. App now always renders AuthenticatedApp directly.
  3. Navbar.tsx: Rewrote component removing all Clerk imports (Show, SignInButton, UserButton).
  4. Marketing.tsx: Replaced entire file with a simple <Navigate to="/" replace /> redirect since the page relied entirely on Clerk for its CTAs.

Suggestion

It would be great to have an option to run the tool without Clerk (e.g. an env flag like VITE_AUTH_ENABLED=false) for self-hosted/local deployments where authentication is not needed. The core scanning functionality works perfectly once Clerk is removed.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions