diff --git a/.env.production b/.env.production new file mode 100644 index 0000000..1c7ea1f --- /dev/null +++ b/.env.production @@ -0,0 +1 @@ +VITE_API_URL=https://still-peak-52201.herokuapp.com/api \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 8a68a34..0c78eba 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,8 +8,10 @@ "name": "react-vite-express-starter", "version": "0.0.0", "dependencies": { + "@types/cors": "^2.8.12", "compression": "^1.7.4", "cookie-session": "^2.0.0", + "cors": "^2.8.5", "csurf": "^1.11.0", "express": "^4.18.1", "helmet": "^6.0.0", @@ -606,6 +608,11 @@ "@types/keygrip": "*" } }, + "node_modules/@types/cors": { + "version": "2.8.12", + "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.12.tgz", + "integrity": "sha512-vt+kDhq/M2ayberEtJcIN/hxXy1Pk+59g2FV/ZQceeaTyCtCucjL2Q7FXlFjtWn4n15KCr1NE2lNNFhp0lEThw==" + }, "node_modules/@types/csurf": { "version": "1.11.2", "resolved": "https://registry.npmjs.org/@types/csurf/-/csurf-1.11.2.tgz", @@ -1326,6 +1333,18 @@ "node": ">= 0.8" } }, + "node_modules/cors": { + "version": "2.8.5", + "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz", + "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==", + "dependencies": { + "object-assign": "^4", + "vary": "^1" + }, + "engines": { + "node": ">= 0.10" + } + }, "node_modules/create-require": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz", @@ -2474,6 +2493,14 @@ "node": ">=0.10.0" } }, + "node_modules/object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/object-inspect": { "version": "1.12.2", "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz", @@ -3937,6 +3964,11 @@ "@types/keygrip": "*" } }, + "@types/cors": { + "version": "2.8.12", + "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.12.tgz", + "integrity": "sha512-vt+kDhq/M2ayberEtJcIN/hxXy1Pk+59g2FV/ZQceeaTyCtCucjL2Q7FXlFjtWn4n15KCr1NE2lNNFhp0lEThw==" + }, "@types/csurf": { "version": "1.11.2", "resolved": "https://registry.npmjs.org/@types/csurf/-/csurf-1.11.2.tgz", @@ -4498,6 +4530,15 @@ "keygrip": "~1.1.0" } }, + "cors": { + "version": "2.8.5", + "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz", + "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==", + "requires": { + "object-assign": "^4", + "vary": "^1" + } + }, "create-require": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz", @@ -5248,6 +5289,11 @@ "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", "dev": true }, + "object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==" + }, "object-inspect": { "version": "1.12.2", "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz", diff --git a/package.json b/package.json index c28fdf3..99e214a 100644 --- a/package.json +++ b/package.json @@ -9,8 +9,10 @@ "preview": "vite preview" }, "dependencies": { + "@types/cors": "^2.8.12", "compression": "^1.7.4", "cookie-session": "^2.0.0", + "cors": "^2.8.5", "csurf": "^1.11.0", "express": "^4.18.1", "helmet": "^6.0.0", diff --git a/src/Auth.tsx b/src/Auth.tsx index 08e9f6d..f9de169 100644 --- a/src/Auth.tsx +++ b/src/Auth.tsx @@ -1,13 +1,15 @@ import { useEffect, useState } from "react"; import { UserInfo } from "remult"; +import { API_URL } from "./api-url"; const Auth: React.FC<{ children: JSX.Element }> = ({ children }) => { const [signInUsername, setSignInUsername] = useState(""); const [currentUser, setCurrentUser] = useState(); const signIn = async () => { - const result = await fetch('/api/signIn', { + const result = await fetch(API_URL + '/signIn', { method: "POST", + credentials: 'include', headers: { 'Content-Type': 'application/json' }, @@ -20,13 +22,16 @@ const Auth: React.FC<{ children: JSX.Element }> = ({ children }) => { else alert(await result.json()); } const signOut = async () => { - await fetch('/api/signOut', { - method: "POST" + await fetch(API_URL + '/signOut', { + method: "POST", + credentials: 'include' }); setCurrentUser(undefined); } useEffect(() => { - fetch('/api/currentUser').then(r => r.json()) + fetch(API_URL + '/currentUser', { + credentials: 'include' + }).then(r => r.json()) .then(async currentUserFromServer => { setCurrentUser(currentUserFromServer) }); diff --git a/src/api-url.ts b/src/api-url.ts new file mode 100644 index 0000000..210b862 --- /dev/null +++ b/src/api-url.ts @@ -0,0 +1,5 @@ +import { remult } from "remult"; + +// See about environment variables https://vitejs.dev/guide/env-and-mode.html +export const API_URL = import.meta.env['VITE_API_URL'] || 'http://127.0.0.1:3002/api'; +remult.apiClient.url = API_URL; \ No newline at end of file diff --git a/src/server/index.ts b/src/server/index.ts index ac5f084..a330416 100644 --- a/src/server/index.ts +++ b/src/server/index.ts @@ -7,10 +7,34 @@ import compression from 'compression'; import sslRedirect from 'heroku-ssl-redirect'; import path from 'path'; import csurf from "csurf"; +import cors from 'cors'; const app = express(); -app.use(session({ - secret: process.env['TOKEN_SIGN_KEY'] || "my secret" + +// https://www.codeconcisely.com/posts/how-to-set-up-cors-and-cookie-session-in-express/ +if (process.env["NODE_ENV"] === "production") { + app.use(session({ + secret: process.env['SESSION_SECRET'], + sameSite: 'none', + secure: true + })); + app.enable('trust proxy'); +} +else {//dev + app.use(session({ + secret: 'my secret', + sameSite: false, + secure: false, + httpOnly: false + })); +} +app.use(cors({ + origin: [ + 'http://127.0.0.1:5173', // local vite dev server + 'http://127.0.0.1:3002', //local node express server + 'https://still-peak-52201.herokuapp.com' //production site for the app + ], + credentials: true })); app.use(sslRedirect()); app.use(helmet({ contentSecurityPolicy: false })); diff --git a/vite.config.ts b/vite.config.ts index c23d733..3f43fc4 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -3,12 +3,5 @@ import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ - plugins: [react()], - server: { - proxy: { - '/api': { - target: 'http://localhost:3002' - } - } - } + plugins: [react()] }) \ No newline at end of file