use http-helmet to organize CSP headers

Author: ChibiBlasphem

packages/app-builder/.env.example

@@ -26,25 +26,12 @@ MARBLE_API_URL_CLIENT=http://localhost:8080
 MARBLE_API_URL_SERVER=http://localhost:8080
 MARBLE_APP_URL=http://localhost:3000
 
-# Configure your Firebase project to allow username and password authentication.
-FIREBASE_PROJECT_ID=dummy
-FIREBASE_API_KEY=dummy
-FIREBASE_AUTH_DOMAIN=dummy
-
 #
 # OPTIONAL SETTINGS
 #
 
-# If you need to support federated authentication through Firebase, you will need to configure the following settings:
-# To retrieve those value, go into the settings of your Firebase project, and register a new app from the 'General' tab.
-# The two information below will be provided to you after that. 
-# FIREBASE_APP_ID=
-
-# Uncomment this line if you are using the Firebase emulator for testing.
-# FIREBASE_AUTH_EMULATOR_HOST="localhost:9099"
-
 # Configure various external integrations.
 SEGMENT_WRITE_KEY=
 DISABLE_SEGMENT=false
-SENTRY_DSN= 
-SENTRY_ENVIRONMENT= 
+SENTRY_DSN=
+SENTRY_ENVIRONMENT=

packages/app-builder/package.json

@@ -47,6 +47,7 @@
     "@hookform/resolvers": "^4.1.3",
     "@lottiefiles/react-lottie-player": "^3.6.0",
     "@marble/shared": "workspace:*",
+    "@mcansh/http-helmet": "^0.13.0",
     "@oazapfts/runtime": "^1.0.4",
     "@preact/signals-react": "^3.0.1",
     "@radix-ui/react-avatar": "^1.1.3",

packages/app-builder/src/components/Auth/ResetPassword.tsx

@@ -3,7 +3,7 @@ import {
   TooManyRequest,
   useSendPasswordResetEmail,
 } from '@app-builder/services/auth/auth.client';
-import { clientServices } from '@app-builder/services/init.client';
+import { useClientServices } from '@app-builder/services/init.client';
 import { getFieldErrors } from '@app-builder/utils/form';
 import * as Sentry from '@sentry/remix';
 import { useForm } from '@tanstack/react-form';
@@ -24,6 +24,7 @@ type ResetPasswordForm = z.infer<typeof resetPasswordFormSchema>;
 
 export function ResetPassword() {
   const { t } = useTranslation(['auth', 'common']);
+  const clientServices = useClientServices();
 
   const sendPasswordResetEmail = useSendPasswordResetEmail(
     clientServices.authenticationClientService,

packages/app-builder/src/components/Auth/SendEmailVerification.tsx

@@ -3,7 +3,7 @@ import {
   TooManyRequest,
   useResendEmailVerification,
 } from '@app-builder/services/auth/auth.client';
-import { clientServices } from '@app-builder/services/init.client';
+import { useClientServices } from '@app-builder/services/init.client';
 import { getRoute } from '@app-builder/utils/routes';
 import { useNavigate } from '@remix-run/react';
 import * as Sentry from '@sentry/remix';
@@ -36,6 +36,7 @@ function SendEmailVerificationButton({
 
 function ClientSendEmailVerificationButton() {
   const { t } = useTranslation(['common', 'auth']);
+  const clientServices = useClientServices();
 
   const { isFirebaseEmulator } =
     clientServices.authenticationClientService.authenticationClientRepository;
@@ -90,6 +91,7 @@ export function SendEmailVerification() {
 
 function ClientSendEmailVerificationDescription() {
   const { t } = useTranslation(['auth']);
+  const clientServices = useClientServices();
 
   const { isFirebaseEmulator } =
     clientServices.authenticationClientService.authenticationClientRepository;

packages/app-builder/src/components/Auth/SignInWithEmailAndPassword.tsx

@@ -6,7 +6,7 @@ import {
   WrongPasswordError,
 } from '@app-builder/services/auth/auth.client';
 import { type AuthPayload } from '@app-builder/services/auth/auth.server';
-import { clientServices } from '@app-builder/services/init.client';
+import { useClientServices } from '@app-builder/services/init.client';
 import { getFieldErrors } from '@app-builder/utils/form';
 import { getRoute } from '@app-builder/utils/routes';
 import { sleep } from '@app-builder/utils/sleep';
@@ -41,6 +41,7 @@ export function SignInWithEmailAndPassword({
   loading?: boolean;
 }) {
   const { t } = useTranslation(['auth', 'common']);
+  const clientServices = useClientServices();
   const navigate = useNavigate();
   const hydrated = useHydrated();
 

packages/app-builder/src/components/Auth/SignInWithGoogle.tsx

@@ -6,7 +6,7 @@ import {
   useGoogleSignIn,
 } from '@app-builder/services/auth/auth.client';
 import { type AuthPayload } from '@app-builder/services/auth/auth.server';
-import { clientServices } from '@app-builder/services/init.client';
+import { useClientServices } from '@app-builder/services/init.client';
 import useAsync from '@app-builder/utils/hooks/use-async';
 import * as Sentry from '@sentry/remix';
 import toast from 'react-hot-toast';
@@ -47,6 +47,8 @@ function ClientSignInWithGoogle({
   loading?: boolean;
 }) {
   const { t } = useTranslation(['common', 'auth']);
+  const clientServices = useClientServices();
+
   const googleSignIn = useGoogleSignIn(clientServices.authenticationClientService);
 
   const [handleGoogleSignIn, _state] = useAsync(async () => {

packages/app-builder/src/components/Auth/SignInWithMicrosoft.tsx

@@ -6,7 +6,7 @@ import {
   useMicrosoftSignIn,
 } from '@app-builder/services/auth/auth.client';
 import { type AuthPayload } from '@app-builder/services/auth/auth.server';
-import { clientServices } from '@app-builder/services/init.client';
+import { useClientServices } from '@app-builder/services/init.client';
 import useAsync from '@app-builder/utils/hooks/use-async';
 import * as Sentry from '@sentry/remix';
 import toast from 'react-hot-toast';
@@ -55,6 +55,8 @@ function ClientSignInWithMicrosoft({
   loading?: boolean;
 }) {
   const { t } = useTranslation(['common', 'auth']);
+  const clientServices = useClientServices();
+
   const microsoftSignIn = useMicrosoftSignIn(clientServices.authenticationClientService);
 
   const [handleMicrosoftSignIn, _state] = useAsync(async () => {

packages/app-builder/src/components/Auth/SignUpWithEmailAndPassword.tsx

@@ -5,7 +5,7 @@ import {
   useEmailAndPasswordSignUp,
   WeakPasswordError,
 } from '@app-builder/services/auth/auth.client';
-import { clientServices } from '@app-builder/services/init.client';
+import { useClientServices } from '@app-builder/services/init.client';
 import { getFieldErrors, handleSubmit } from '@app-builder/utils/form';
 import * as Sentry from '@sentry/remix';
 import { useForm } from '@tanstack/react-form';
@@ -29,6 +29,7 @@ type EmailAndPasswordForm = z.infer<typeof emailAndPasswordFormSchema>;
 
 export function SignUpWithEmailAndPassword({ signUp }: { signUp: () => void }) {
   const { t } = useTranslation(['auth', 'common']);
+  const clientServices = useClientServices();
 
   const emailAndPasswordSignUp = useEmailAndPasswordSignUp(
     clientServices.authenticationClientService,

packages/app-builder/src/contexts/AppConfigContext.ts

@@ -0,0 +1,4 @@
+import { type AppConfig } from '@app-builder/models/app-config';
+import { createSimpleContext } from '@marble/shared';
+
+export const AppConfigContext = createSimpleContext<AppConfig>('AppConfig');

packages/app-builder/src/entry.client.tsx

@@ -4,7 +4,7 @@ import { StrictMode, startTransition, useEffect } from 'react';
 import { hydrateRoot } from 'react-dom/client';
 import { I18nextProvider } from 'react-i18next';
 
-import { clientServices } from './services/init.client';
+import { i18nextClientService } from './services/init.client';
 import { getClientEnv } from './utils/environment';
 
 Sentry.init({
@@ -58,7 +58,6 @@ function isBrowserExtensionError(exception: unknown): boolean {
 }
 
 async function hydrate() {
-  const { i18nextClientService } = clientServices;
   const i18next = await i18nextClientService.getI18nextClientInstance();
 
   startTransition(() => {