feat: Make Novu settings public

src/components/settings/NotificationsTab.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { useAuth } from "@/hooks/useAuth";
+import { usePublicNovuSettings } from "@/hooks/usePublicNovuSettings";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
@@ -37,6 +38,7 @@ interface NotificationTemplate {
 
 export function NotificationsTab() {
   const { user } = useAuth();
+  const { isEnabled: isNovuEnabled, isLoading: isNovuLoading } = usePublicNovuSettings();
   const [loading, setLoading] = useState(true);
   const [templates, setTemplates] = useState<NotificationTemplate[]>([]);
   const [channelPreferences, setChannelPreferences] = useState<ChannelPreferences>({
@@ -50,7 +52,6 @@ export function NotificationsTab() {
     digest: 'daily',
     max_per_hour: 10,
   });
-  const isNovuEnabled = notificationService.isEnabled();
 
   useEffect(() => {
     if (user) {
@@ -168,16 +169,22 @@ export function NotificationsTab() {
 
   return (
     <div className="space-y-6">
-      {!isNovuEnabled && (
+      {isNovuLoading ? (
+        <Card>
+          <CardHeader>
+            <CardDescription>Loading notification settings...</CardDescription>
+          </CardHeader>
+        </Card>
+      ) : !isNovuEnabled ? (
         <Card className="border-yellow-500/50 bg-yellow-500/10">
           <CardHeader>
             <CardTitle className="text-yellow-600 dark:text-yellow-400">Novu Not Configured</CardTitle>
             <CardDescription>
-              Novu notifications are not configured. To enable advanced notifications, add your Novu Application Identifier to the environment variables.
+              Novu notifications are not configured. Contact an administrator to configure the Novu Application Identifier in admin settings.
             </CardDescription>
           </CardHeader>
         </Card>
-      )}
+      ) : null}
 
       <Card>
         <CardHeader>

src/hooks/useNovuNotifications.ts

@@ -1,11 +1,10 @@
 import { useAuth } from '@/hooks/useAuth';
-import { useAdminSettings } from '@/hooks/useAdminSettings';
+import { usePublicNovuSettings } from '@/hooks/usePublicNovuSettings';
 
 export function useNovuNotifications() {
   const { user } = useAuth();
-  const { getSettingValue } = useAdminSettings();
+  const { applicationIdentifier, isLoading } = usePublicNovuSettings();
 
-  const applicationIdentifier = getSettingValue('novu.application_identifier', '');
   const subscriberId = user?.id;
   const isEnabled = !!applicationIdentifier && !!subscriberId;
 
@@ -13,5 +12,6 @@ export function useNovuNotifications() {
     applicationIdentifier,
     subscriberId,
     isEnabled,
+    isLoading,
   };
 }

src/hooks/usePublicNovuSettings.ts

@@ -0,0 +1,30 @@
+import { useQuery } from '@tanstack/react-query';
+import { supabase } from '@/integrations/supabase/client';
+
+/**
+ * Hook to fetch public Novu settings accessible to all authenticated users
+ */
+export function usePublicNovuSettings() {
+  const { data: settings, isLoading, error } = useQuery({
+    queryKey: ['public-novu-settings'],
+    queryFn: async () => {
+      const { data, error } = await supabase
+        .from('admin_settings')
+        .select('setting_key, setting_value')
+        .eq('setting_key', 'novu.application_identifier')
+        .maybeSingle();
+      
+      if (error) throw error;
+      return data;
+    },
+  });
+
+  const applicationIdentifier = settings?.setting_value as string || '';
+
+  return {
+    applicationIdentifier,
+    isLoading,
+    error,
+    isEnabled: !!applicationIdentifier,
+  };
+}

supabase/migrations/20251001145101_aeb1e129-36d9-4879-81c6-04f87a17e72a.sql

@@ -0,0 +1,6 @@
+-- Add policy to allow authenticated users to read Novu application identifier
+CREATE POLICY "Authenticated users can read novu application identifier" 
+ON admin_settings 
+FOR SELECT 
+TO authenticated
+USING (setting_key = 'novu.application_identifier');