Expanding Clerk Provider for Themes and Dash Eco-System Support

CHANGELOG.md

@@ -4,6 +4,13 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## [0.0.1a4] - 2025-12-05
+### Added
+- Added support for Clerk Provider themes, as well as ids for support with callbacks
+
+## Fixed
+- Fixed issue with DashAuth components not being available
+
 ## [0.0.1a3] - 2025-11-25
 ## Fixed
 - Fixed issue with Clerk components missing and also adding necessary session data to callback for login.

dash_auth_plus/clerk_auth.py

@@ -379,7 +379,7 @@ def add_clerk_script(index_string):
                 if not self.initialized:
                     return index_string
 
-                if clerk_script and "</head>" in index_string:
+                if self.clerk_script and "</head>" in index_string:
                     # Inject scripts and styles before closing head tag
                     index_string = index_string.replace(
                         "</head>",

dash_auth_plus/package-info.json

@@ -19,6 +19,7 @@
   "devDependencies": {
     "@babel/core": "^7.24.5",
     "@clerk/clerk-react": "^5.2.10",
+    "@clerk/themes": "^2.4.42",
     "@types/ramda": "^0.30.1",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",

package.json

@@ -19,6 +19,7 @@
   "devDependencies": {
     "@babel/core": "^7.24.5",
     "@clerk/clerk-react": "^5.2.10",
+    "@clerk/themes": "^2.4.42",
     "@types/ramda": "^0.30.1",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",

src/ts/components/ClerkProvider.tsx

@@ -1,16 +1,42 @@
 import React, { PropsWithChildren } from "react";
 import { ClerkProvider as ClerkClerkProvider } from '@clerk/clerk-react'
+import { dark, neobrutalism } from '@clerk/themes'
+
+const themes = {
+  'dark': dark,
+  'neobrutalism': neobrutalism
+};
 
 export interface ClerkProviderProps {
     PUBLISHABLE_KEY: string;
     afterSignOutUrl?: string;
     children: React.ReactNode;
+    themeName?: string;
+    id?: string;
+    [key: string]: any;
 }
 
 
-const ClerkProvider: React.FC<PropsWithChildren<ClerkProviderProps>> = ({ PUBLISHABLE_KEY, afterSignOutUrl, children, ...others }) => {
+const ClerkProvider: React.FC<PropsWithChildren<ClerkProviderProps>> = ({
+  PUBLISHABLE_KEY,
+  afterSignOutUrl,
+  children,
+  themeName,
+  ...others
+}) => {
+
+  const appearance = React.useMemo(() => {
+      const theme = themeName ? themes[themeName as keyof typeof themes] : undefined;
+      return theme ? { baseTheme: theme } : undefined;
+    }, [themeName]);
+
   return (
-    <ClerkClerkProvider publishableKey={PUBLISHABLE_KEY} afterSignOutUrl={afterSignOutUrl}>
+    <ClerkClerkProvider
+      publishableKey={PUBLISHABLE_KEY}
+      afterSignOutUrl={afterSignOutUrl}
+      appearance={appearance}
+      {...others}
+    >
       {children}
     </ClerkClerkProvider>
   );