Optionally skip domain in cookie (#43)

If you're using a reverse proxy like Cloudflare Tunnels, you can now set `CONFIG_SKIP_COOKIE_DOMAIN_SECURITY="true"` to avoid login issues.

Also makes some UX tweaks to Expenses, and fixes a style issue for Chrome in Windows (#44).

Fixes #43
Fixes #44

.env.sample

@@ -19,3 +19,4 @@ CONFIG_FILES_ROOT_PATH="data-files"
 CONFIG_ENABLE_EMAILS="false" # if true, email verification will be required for signups (using Brevo)
 CONFIG_ENABLE_FOREVER_SIGNUP="true" # if true, all signups become active for 100 years
 # CONFIG_ALLOWED_COOKIE_DOMAINS="example.com,example.net" # can be set to allow more than the BASE_URL's domain for session cookies
+# CONFIG_SKIP_COOKIE_DOMAIN_SECURITY="true" # if true, the cookie domain will not be strictly set and checked against. This skipping slightly reduces security, but is usually necessary for reverse proxies like Cloudflare Tunnel.

components/expenses/BudgetModal.tsx

@@ -85,13 +85,15 @@ export default function BudgetModal(
             <label class='text-slate-300 block pb-1' for='budget_value'>Value</label>
             <input
               class='input-field'
-              type='text'
+              type='number'
               name='budget_value'
               id='budget_value'
               value={newBudgetValue.value}
               onInput={(event) => {
                 newBudgetValue.value = Number(event.currentTarget.value);
               }}
+              min='0'
+              inputmode='decimal'
               placeholder='100'
             />
           </fieldset>
@@ -100,7 +102,7 @@ export default function BudgetModal(
           {budget
             ? (
               <button
-                class='px-5 py-2 bg-slate-600 hover:bg-red-600 text-white cursor-pointer rounded-md mr-2'
+                class='px-5 py-2 bg-red-600 text-white cursor-pointer rounded-md mr-2 opacity-30 hover:opacity-100'
                 onClick={() => onClickDelete()}
               >
                 Delete
@@ -109,16 +111,16 @@ export default function BudgetModal(
             : null}
           <button
             class='px-5 py-2 bg-slate-600 hover:bg-slate-500 text-white cursor-pointer rounded-md mr-2'
-            onClick={() => onClickSave(newBudgetName.value, newBudgetMonth.value.substring(0, 7), newBudgetValue.value)}
-          >
-            {budget ? 'Update' : 'Create'}
-          </button>
-          <button
-            class='px-5 py-2 bg-slate-600 hover:bg-slate-500 text-white cursor-pointer rounded-md ml-2'
             onClick={() => onClose()}
           >
             {budget ? 'Cancel' : 'Close'}
           </button>
+          <button
+            class='px-5 py-2 bg-slate-700 hover:bg-slate-500 text-white cursor-pointer rounded-md ml-2'
+            onClick={() => onClickSave(newBudgetName.value, newBudgetMonth.value.substring(0, 7), newBudgetValue.value)}
+          >
+            {budget ? 'Update' : 'Create'}
+          </button>
         </footer>
       </section>
     </>

components/expenses/ExpenseModal.tsx

@@ -119,6 +119,7 @@ export default function ExpenseModal(
               onInput={(event) => {
                 newExpenseCost.value = Number(event.currentTarget.value);
               }}
+              inputmode='decimal'
               placeholder='10.99'
             />
           </fieldset>
@@ -222,7 +223,7 @@ export default function ExpenseModal(
           {expense
             ? (
               <button
-                class='px-5 py-2 bg-slate-600 hover:bg-red-600 text-white cursor-pointer rounded-md mr-2'
+                class='px-5 py-2 bg-red-600 text-white cursor-pointer rounded-md mr-2 opacity-30 hover:opacity-100'
                 onClick={() => onClickDelete()}
               >
                 Delete
@@ -231,6 +232,12 @@ export default function ExpenseModal(
             : null}
           <button
             class='px-5 py-2 bg-slate-600 hover:bg-slate-500 text-white cursor-pointer rounded-md mr-2'
+            onClick={() => onClose()}
+          >
+            {expense ? 'Cancel' : 'Close'}
+          </button>
+          <button
+            class='px-5 py-2 bg-slate-700 hover:bg-slate-500 text-white cursor-pointer rounded-md ml-2'
             onClick={() => {
               onClickSave(
                 newExpenseCost.value as number,
@@ -243,12 +250,6 @@ export default function ExpenseModal(
           >
             {expense ? 'Update' : 'Create'}
           </button>
-          <button
-            class='px-5 py-2 bg-slate-600 hover:bg-slate-500 text-white cursor-pointer rounded-md ml-2'
-            onClick={() => onClose()}
-          >
-            {expense ? 'Cancel' : 'Close'}
-          </button>
         </footer>
       </section>
     </>

lib/auth.ts

@@ -6,7 +6,7 @@ import 'std/dotenv/load.ts';
 import { baseUrl, generateHash, isRunningLocally } from './utils/misc.ts';
 import { User, UserSession } from './types.ts';
 import { createUserSession, deleteUserSession, getUserByEmail, validateUserAndSession } from './data/user.ts';
-import { isCookieDomainAllowed } from './config.ts';
+import { isCookieDomainAllowed, isCookieDomainSecurityDisabled } from './config.ts';
 
 const JWT_SECRET = Deno.env.get('JWT_SECRET') || '';
 export const PASSWORD_SALT = Deno.env.get('PASSWORD_SALT') || '';
@@ -173,6 +173,10 @@ export async function logoutUser(request: Request) {
     domain: resolveCookieDomain(request),
   };
 
+  if (isCookieDomainSecurityDisabled()) {
+    delete cookie.domain;
+  }
+
   const response = new Response('Logged Out', {
     status: 303,
     headers: { 'Location': '/', 'Content-Type': 'text/html; charset=utf-8' },
@@ -222,6 +226,10 @@ export async function createSessionCookie(
     domain: resolveCookieDomain(request),
   };
 
+  if (isCookieDomainSecurityDisabled()) {
+    delete cookie.domain;
+  }
+
   setCookie(response.headers, cookie);
 
   return response;
@@ -246,6 +254,10 @@ export async function updateSessionCookie(
     domain: resolveCookieDomain(request),
   };
 
+  if (isCookieDomainSecurityDisabled()) {
+    delete cookie.domain;
+  }
+
   setCookie(response.headers, cookie);
 
   return response;

lib/config.ts

@@ -30,6 +30,12 @@ export function isCookieDomainAllowed(domain: string) {
   return allowedDomains.includes(domain);
 }
 
+export function isCookieDomainSecurityDisabled() {
+  const isCookieDomainSecurityDisabled = Deno.env.get('CONFIG_SKIP_COOKIE_DOMAIN_SECURITY') === 'true';
+
+  return isCookieDomainSecurityDisabled;
+}
+
 export function isEmailEnabled() {
   const areEmailsAllowed = Deno.env.get('CONFIG_ENABLE_EMAILS') === 'true';
 

static/styles.css

@@ -2,6 +2,11 @@
 @tailwind components;
 @tailwind utilities;
 
+html {
+  /* This is needed to ensure that the system color scheme is dark and matches the dark theme of the app */
+  color-scheme: dark;
+}
+
 h1 {
   @apply text-4xl font-bold;
 }