Customizable auth providers, + some improvements

.env.example

@@ -16,23 +16,34 @@ DATABASE_URL="postgresql://splitpro:password@localhost:54321/splitpro"
 # POSTGRES_DB="splitpro"
 # DATABASE_URL="postgresql://postgres:strong-password@splitpro-db-prod:5432/splitpro"
 
-# Required
 # Next Auth
 # You can generate a new secret on the command line with:
 # openssl rand -base64 32
 # https://next-auth.js.org/configuration/options#secret
 NEXTAUTH_SECRET="secret"
 NEXTAUTH_URL="http://localhost:3000"
 
+# Auth providers
+# Specify them separated by commas
+# Available providers : GOOGLE,EMAIL
+AUTH_PROVIDERS=GOOGLE,EMAIL
 
-# required for auth https://next-auth.js.org/providers/google
-GOOGLE_CLIENT_ID=
-GOOGLE_CLIENT_SECRET=
-
+# Enable sending invites
+ENABLE_SENDING_INVITES=false
 #********* END OF REQUIRED ENV VARS *********
 
 
 #********* OPTIONAL ENV VARS *********
+# SMTP options
+FROM_EMAIL=
+EMAIL_SERVER_HOST=
+EMAIL_SERVER_PORT=
+EMAIL_SERVER_USER=
+EMAIL_SERVER_PASSWORD=
+
+# Google Provider : https://next-auth.js.org/providers/google
+GOOGLE_CLIENT_ID=
+GOOGLE_CLIENT_SECRET=
 
 # Storage: any S3 compatible storage will work, for self hosting can use minio
 # If you're using minio for dev, you can generate access keys from the console http://localhost:9001/access-keys/new-account
@@ -41,29 +52,16 @@ GOOGLE_CLIENT_SECRET=
 # R2_BUCKET="splitpro"
 # R2_URL="http://localhost:9002"
 # R2_PUBLIC_URL="http://localhost:9002/splitpro"
-R2_ACCESS_KEY=
-R2_SECRET_KEY=
-R2_BUCKET=
-R2_URL=
-# public url of the storage, https://developers.cloudflare.com/r2/buckets/public-buckets/
-R2_PUBLIC_URL=
-
-# Email
-FROM_EMAIL=
-FEEDBACK_EMAIL=
-EMAIL_SERVER_HOST=
-EMAIL_SERVER_PORT=
-EMAIL_SERVER_USER=
-EMAIL_SERVER_PASSWORD=
 
 # Push notification, Web Push: https://www.npmjs.com/package/web-push
 # generate web push keys using this command: web-push generate-vapid-keys --json
 WEB_PUSH_PRIVATE_KEY=
 WEB_PUSH_PUBLIC_KEY=
 WEB_PUSH_EMAIL=
 
+# Email options
+FEEDBACK_EMAIL=
+
 # Discord webhook for error notifications
 DISCORD_WEBHOOK_URL=
-
-
 #********* END OF OPTIONAL ENV VARS *********

.gitignore

@@ -23,6 +23,7 @@ next-env.d.ts
 # misc
 .DS_Store
 *.pem
+.idea
 
 # debug
 npm-debug.log*
@@ -48,4 +49,4 @@ yarn-error.log*
 **/public/worker-*.js
 src/server/random.code-workspace
 
-certificates
+certificates

docker/Dockerfile

@@ -7,7 +7,7 @@ RUN apk add --no-cache libc6-compat
 RUN apk update
 
 WORKDIR /app
-RUN npm i -g pnpm
+RUN npm i -g pnpm@8.9
 RUN ls
 COPY package.json pnpm-lock.yaml ./
 
@@ -19,7 +19,7 @@ RUN pnpm build
 
 FROM node:20-alpine3.19 as release
 WORKDIR /app
-RUN npm i -g pnpm
+RUN npm i -g pnpm@8.9
 
 RUN apk add --no-cache libc6-compat
 RUN apk update
@@ -48,4 +48,4 @@ ENV SKIP_ENV_VALIDATION="false"
 
 COPY  ./docker/start.sh ./start.sh
 
-CMD ["sh", "start.sh"]
+CMD ["sh", "start.sh"]

docker/prod/compose.yml

@@ -30,24 +30,29 @@ services:
       - DATABASE_URL=${DATABASE_URL:?err}
       - NEXTAUTH_URL=${NEXTAUTH_URL:?err}
       - NEXTAUTH_SECRET=${NEXTAUTH_SECRET:?err}
-      - GOOGLE_CLIENT_ID=${GOOGLE_CLIENT_ID:?err}
-      - GOOGLE_CLIENT_SECRET=${GOOGLE_CLIENT_SECRET:?err}
-      - WEB_PUSH_PRIVATE_KEY=${WEB_PUSH_PRIVATE_KEY}
-      - WEB_PUSH_PUBLIC_KEY=${WEB_PUSH_PUBLIC_KEY}
-      - WEB_PUSH_EMAIL=${WEB_PUSH_EMAIL}
+      - AUTH_PROVIDERS=${AUTH_PROVIDERS:?err}
+      - ENABLE_SENDING_INVITES=${ENABLE_SENDING_INVITES:?err}
+      - FROM_EMAIL=${FROM_EMAIL}
+      - EMAIL_SERVER_HOST=${EMAIL_SERVER_HOST}
+      - EMAIL_SERVER_PORT=${EMAIL_SERVER_PORT}
+      - EMAIL_SERVER_USER=${EMAIL_SERVER_USER}
+      - EMAIL_SERVER_PASSWORD=${EMAIL_SERVER_PASSWORD}
+      - GOOGLE_CLIENT_ID=${GOOGLE_CLIENT_ID}
+      - GOOGLE_CLIENT_SECRET=${GOOGLE_CLIENT_SECRET}
       - R2_ACCESS_KEY=${R2_ACCESS_KEY}
       - R2_SECRET_KEY=${R2_SECRET_KEY}
       - R2_BUCKET=${R2_BUCKET}
       - R2_URL=${R2_URL}
       - R2_PUBLIC_URL=${R2_PUBLIC_URL}
-      - EMAIL_SERVER_HOST=${EMAIL_SERVER_HOST}
-      - EMAIL_SERVER_PORT=${EMAIL_SERVER_PORT}
-      - EMAIL_SERVER_USER=${EMAIL_SERVER_USER}
-      - EMAIL_SERVER_PASSWORD=${EMAIL_SERVER_PASSWORD}
-      - FROM_EMAIL=${FROM_EMAIL}
+      - WEB_PUSH_PRIVATE_KEY=${WEB_PUSH_PRIVATE_KEY}
+      - WEB_PUSH_PUBLIC_KEY=${WEB_PUSH_PUBLIC_KEY}
+      - WEB_PUSH_EMAIL=${WEB_PUSH_EMAIL}
+      - FEEDBACK_EMAIL=${FEEDBACK_EMAIL}
+      - DISCORD_WEBHOOK_URL=${DISCORD_WEBHOOK_URL}
     depends_on:
       postgres:
         condition: service_healthy
 
 volumes:
   database:
+

next.config.js

@@ -13,6 +13,12 @@ import pwa from 'next-pwa';
 // @ts-ignore
 import nextra from 'nextra';
 
+import { fileURLToPath } from 'node:url';
+import createJiti from 'jiti';
+const jiti = createJiti(fileURLToPath(import.meta.url));
+
+jiti('./src/env.js');
+
 // eslint-disable-next-line @typescript-eslint/no-unsafe-call
 const withPwa = pwa({
   dest: 'public',

package.json

@@ -38,7 +38,7 @@
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tabs": "^1.0.4",
-    "@t3-oss/env-nextjs": "^0.7.1",
+    "@t3-oss/env-nextjs": "^0.11.1",
     "@tanstack/react-query": "^4.36.1",
     "@trpc/client": "^10.43.6",
     "@trpc/next": "^10.43.6",
@@ -53,6 +53,7 @@
     "framer-motion": "^11.0.3",
     "geist": "^1.2.1",
     "input-otp": "^1.2.3",
+    "jiti": "^1.21.6",
     "lucide-react": "^0.312.0",
     "nanoid": "^5.0.6",
     "next": "^14.0.4",
@@ -105,4 +106,4 @@
     "seed": "tsx prisma/seed.ts"
   },
   "packageManager": "pnpm@8.9.2"
-}
+}

src/components/AddExpense/AddExpensePage.tsx

@@ -18,6 +18,7 @@ import UploadFile from './UploadFile';
 import { CategoryIcons } from '../ui/categoryIcons';
 import Link from 'next/link';
 import { CURRENCIES } from '~/lib/currency';
+import { env } from '~/env';
 
 const categories = {
   entertainment: {
@@ -107,7 +108,8 @@ const categories = {
 
 export const AddExpensePage: React.FC<{
   isStorageConfigured: boolean;
-}> = ({ isStorageConfigured }) => {
+  enableSendingInvites: boolean;
+}> = ({ isStorageConfigured, enableSendingInvites }) => {
   const [date, setDate] = React.useState<Date | undefined>(new Date());
   const [open, setOpen] = React.useState(false);
   const [amtStr, setAmountStr] = React.useState('');
@@ -237,7 +239,7 @@ export const AddExpensePage: React.FC<{
         </div>
         <UserInput />
         {showFriends || (participants.length === 1 && !group) ? (
-          <SelectUserOrGroup />
+          <SelectUserOrGroup enableSendingInvites={enableSendingInvites} />
         ) : (
           <>
             <div className="mt-10 flex gap-2">

src/components/AddExpense/SelectUserOrGroup.tsx

@@ -9,8 +9,12 @@ import { type Group, type GroupUser, type User } from '@prisma/client';
 import { motion } from 'framer-motion';
 import Image from 'next/image';
 import { SendIcon } from 'lucide-react';
+import { env } from '~/env';
+import React from 'react';
 
-export const SelectUserOrGroup: React.FC = () => {
+export const SelectUserOrGroup: React.FC<{
+  enableSendingInvites: boolean;
+}> = ({ enableSendingInvites }) => {
   const nameOrEmail = useAddExpenseStore((s) => s.nameOrEmail);
   const participants = useAddExpenseStore((s) => s.participants);
   const group = useAddExpenseStore((s) => s.group);
@@ -76,23 +80,28 @@ export const SelectUserOrGroup: React.FC = () => {
     <div className="mt-1 ">
       <div>
         <div>
-          {/* <div className="mt-1 text-orange-600">
-            {isEmail.success
-              ? "Warning: Don't use send invite if it's invalid email. use add to Split Pro instead. Your account will be blocked if this feature is misused"
-              : null}
-          </div> */}
-          <div>Note: sending invite is disabled for now because of spam</div>
+          {enableSendingInvites ? (
+            <div className="mt-1 text-orange-600">
+              {isEmail.success
+                ? "Warning: Don't use send invite if it's invalid email. use add to Split Pro instead. Your account will be blocked if this feature is misused"
+                : null}
+            </div>
+          ) : (
+            <div>Note: sending invite is disabled for now because of spam</div>
+          )}
         </div>
         <div className="flex justify-center gap-4">
-          {/* <Button
-            className="mt-4 w-full text-cyan-500 hover:text-cyan-500"
-            variant="outline"
-            disabled={!isEmail.success}
-            onClick={() => onAddEmailClick(false)}
-          >
-            <SendIcon className="mr-2 h-4 w-4" />
-            Send invite to user
-          </Button> */}
+          {enableSendingInvites && (
+            <Button
+              className="mt-4 w-full text-cyan-500 hover:text-cyan-500"
+              variant="outline"
+              disabled={!isEmail.success}
+              onClick={() => onAddEmailClick(false)}
+            >
+              <SendIcon className="mr-2 h-4 w-4" />
+              Send invite to user
+            </Button>
+          )}
           <Button
             className="mt-4 w-full text-cyan-500 hover:text-cyan-500"
             variant="outline"