From 42a742428d4b41e61e18ba46aa4cb6b4b809e28f Mon Sep 17 00:00:00 2001 From: lachlanshoesmith <12870244+lachlanshoesmith@users.noreply.github.com> Date: Fri, 13 Dec 2024 16:29:48 +1100 Subject: [PATCH 1/6] =?UTF-8?q?=F0=9F=94=92=20add=20basic=20unauthenticate?= =?UTF-8?q?d=20route?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/App.tsx | 2 ++ frontend/src/ProtectedRoute/ProtectedRoute.tsx | 18 ++++++++++++++++++ .../Unauthenticated/Unauthenticated.module.css | 10 ++++++++++ .../src/Unauthenticated/Unauthenticated.tsx | 18 ++++++++++++++++++ 4 files changed, 48 insertions(+) create mode 100644 frontend/src/ProtectedRoute/ProtectedRoute.tsx create mode 100644 frontend/src/Unauthenticated/Unauthenticated.module.css create mode 100644 frontend/src/Unauthenticated/Unauthenticated.tsx diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 695a58c..2eed422 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -11,6 +11,7 @@ import { ProfilePage } from "./Settings/SettingsPage/ProfilePage/ProfilePage"; import { EventManagementPage } from "./Settings/SettingsPage/EventManagementPage/EventManagementPage"; import { CreateNewEventPage } from "./Settings/SettingsPage/EventManagementPage/CreateNewEvent/CreateNewEvent"; import { DiscordPage } from "./Settings/SettingsPage/DiscordPage/DiscordPage"; +import { Unauthenticated } from "./Unauthenticated/Unauthenticated"; function App() { return ( @@ -28,6 +29,7 @@ function App() { } /> } /> + } /> diff --git a/frontend/src/ProtectedRoute/ProtectedRoute.tsx b/frontend/src/ProtectedRoute/ProtectedRoute.tsx new file mode 100644 index 0000000..1d8162d --- /dev/null +++ b/frontend/src/ProtectedRoute/ProtectedRoute.tsx @@ -0,0 +1,18 @@ +import { ReactNode } from "react"; +import { Navigate } from "react-router"; + +interface ProtectedRouteProps { + user: boolean; + children: ReactNode; +} + +export const ProtectedRoute = ( + isAuthenticated: boolean, + props: ProtectedRouteProps +) => { + if (!isAuthenticated) { + return ; + } + + return props.children; +}; diff --git a/frontend/src/Unauthenticated/Unauthenticated.module.css b/frontend/src/Unauthenticated/Unauthenticated.module.css new file mode 100644 index 0000000..9bbce5e --- /dev/null +++ b/frontend/src/Unauthenticated/Unauthenticated.module.css @@ -0,0 +1,10 @@ +.container { + display: flex; + align-items: center; + justify-content: center; + height: 100%; +} + +.container > article { + line-height: 2; +} diff --git a/frontend/src/Unauthenticated/Unauthenticated.tsx b/frontend/src/Unauthenticated/Unauthenticated.tsx new file mode 100644 index 0000000..60555ac --- /dev/null +++ b/frontend/src/Unauthenticated/Unauthenticated.tsx @@ -0,0 +1,18 @@ +import { Link } from "react-router"; +import classes from "./Unauthenticated.module.css"; + +export const Unauthenticated = () => { + return ( +
+
+

Sorry, you don't permission to view this page.

+

+ Are you logged in? +

+

+ Home +

+
+
+ ); +}; From 283c45360a6c075a36bd1bcb9fd888113f3d56ca Mon Sep 17 00:00:00 2001 From: lachlanshoesmith <12870244+lachlanshoesmith@users.noreply.github.com> Date: Fri, 13 Dec 2024 16:58:28 +1100 Subject: [PATCH 2/6] =?UTF-8?q?=F0=9F=94=92=20begin=20implementing=20unaut?= =?UTF-8?q?henticated=20route?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/App.tsx | 31 ++++++++++++++++++- .../src/ProtectedRoute/ProtectedRoute.tsx | 9 ++---- 2 files changed, 33 insertions(+), 7 deletions(-) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 2eed422..c5b74af 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -12,8 +12,29 @@ import { EventManagementPage } from "./Settings/SettingsPage/EventManagementPage import { CreateNewEventPage } from "./Settings/SettingsPage/EventManagementPage/CreateNewEvent/CreateNewEvent"; import { DiscordPage } from "./Settings/SettingsPage/DiscordPage/DiscordPage"; import { Unauthenticated } from "./Unauthenticated/Unauthenticated"; +import { ProtectedRoute } from "./ProtectedRoute/ProtectedRoute"; +import { createContext, useEffect } from "react"; function App() { + const LoginContext = createContext(null); + + useEffect(() => { + fetch("http://localhost:5180/user", { + method: "GET", + }).then((res) => { + if (res.ok) { + res.json().then((data) => { + console.log(data); + }); + } else { + console.log("Not logged in or problem"); + res.json().then((data) => { + console.log(data); + }); + } + }); + }, []); + return (
@@ -23,7 +44,15 @@ function App() { } /> // } /> } /> - }> + + + + } + > } /> } /> } /> diff --git a/frontend/src/ProtectedRoute/ProtectedRoute.tsx b/frontend/src/ProtectedRoute/ProtectedRoute.tsx index 1d8162d..2cfa739 100644 --- a/frontend/src/ProtectedRoute/ProtectedRoute.tsx +++ b/frontend/src/ProtectedRoute/ProtectedRoute.tsx @@ -2,15 +2,12 @@ import { ReactNode } from "react"; import { Navigate } from "react-router"; interface ProtectedRouteProps { - user: boolean; + isAuthenticated: boolean; children: ReactNode; } -export const ProtectedRoute = ( - isAuthenticated: boolean, - props: ProtectedRouteProps -) => { - if (!isAuthenticated) { +export const ProtectedRoute = (props: ProtectedRouteProps) => { + if (!props.isAuthenticated) { return ; } From 45f9c705f3de7cbc4d9f22b4a67018a82d0a1fe9 Mon Sep 17 00:00:00 2001 From: lachlanshoesmith <12870244+lachlanshoesmith@users.noreply.github.com> Date: Fri, 13 Dec 2024 17:51:43 +1100 Subject: [PATCH 3/6] =?UTF-8?q?=F0=9F=94=92=20fix=20login=20cookie=20not?= =?UTF-8?q?=20being=20stored=20on=20frontend?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- backend/src/index.ts | 24 +++++++- frontend/src/App.tsx | 5 +- frontend/src/AuthScreen/AuthScreen.module.css | 60 +++++++++++-------- frontend/src/AuthScreen/AuthScreen.tsx | 6 ++ frontend/src/Login/Login.tsx | 10 +++- 6 files changed, 76 insertions(+), 31 deletions(-) diff --git a/README.md b/README.md index a9dd2a5..135cd85 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ ```bash SESSION_SECRET= NODE_ENV=development -ALLOWED_ORIGINS=commaseparated,regexes,slashesnotrequired +ALLOWED_ORIGINS=commaseparated,urls,or,regexes DATABASE_URL="postgresql://.../postgres?pgbouncer=true" DIRECT_URL="postgresql://.../postgres" REDIS_PORT=6379 diff --git a/backend/src/index.ts b/backend/src/index.ts index 6f71065..437cfb9 100644 --- a/backend/src/index.ts +++ b/backend/src/index.ts @@ -34,11 +34,26 @@ declare module "express-session" { } // Initialize client. -if (process.env["REDIS_PORT"] === undefined) { +if ( + process.env["REDIS_PORT"] === undefined || + process.env["REDIS_PORT"] === "" +) { console.log(process.env); console.error("Redis port not provided in .env file"); process.exit(1); } + +let allowed_origins; +if ( + process.env["ALLOWED_ORIGINS"] === undefined || + process.env["ALLOWED_ORIGINS"] === "" +) { + console.log("Warning: ALLOWED_ORIGINS not specified. Using wildcard *."); + allowed_origins = ["*"]; +} else { + allowed_origins = process.env["ALLOWED_ORIGINS"]?.split(","); +} + let redisClient = createClient({ url: `redis://localhost:${process.env["REDIS_PORT"]}`, }); @@ -55,7 +70,12 @@ const app = express(); const SERVER_PORT = 5180; const SALT_ROUNDS = 10; -app.use(cors()); +app.use( + cors({ + origin: allowed_origins, + credentials: true, + }) +); app.use(express.json()); if (process.env["SESSION_SECRET"] === undefined) { diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index c5b74af..ab83911 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -21,13 +21,16 @@ function App() { useEffect(() => { fetch("http://localhost:5180/user", { method: "GET", + credentials: "include", + headers: { + "Content-Type": "application/json", + }, }).then((res) => { if (res.ok) { res.json().then((data) => { console.log(data); }); } else { - console.log("Not logged in or problem"); res.json().then((data) => { console.log(data); }); diff --git a/frontend/src/AuthScreen/AuthScreen.module.css b/frontend/src/AuthScreen/AuthScreen.module.css index e9b2533..9306c9b 100644 --- a/frontend/src/AuthScreen/AuthScreen.module.css +++ b/frontend/src/AuthScreen/AuthScreen.module.css @@ -1,37 +1,45 @@ -.container{ - width: 20%; - height: 50%; - background-color: hsl(0, 0%, 100%); - border-radius: 10px; - margin: auto; - padding: 30px; - min-width: 500px; - min-height: 300px; +.container { + width: 20%; + height: 50%; + background-color: hsl(0, 0%, 100%); + border-radius: 10px; + margin: auto; + padding: 30px; + min-width: 500px; + min-height: 300px; } -.form{ - display: flex; - flex-direction: column; - align-items: center; - width: 100%; +.form { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; } -.headerText{ - padding-top: 34px; - padding-bottom: 46px; +.headerText { + padding-top: 34px; + padding-bottom: 46px; } -.footer{ - text-align: center; - color: hsl(0, 0%, 62%); +.footer { + text-align: center; + color: hsl(0, 0%, 62%); } .footer div:first-child { - padding-top: 50px; + padding-top: 50px; } -.error{ - padding: 10px; - color: hsl(0, 100%, 64%); - font-weight: bold; -} \ No newline at end of file +.error, +.success { + padding: 10px; + font-weight: bold; +} + +.error { + color: hsl(0, 100%, 64%); +} + +.success { + color: hsl(119, 100%, 30%); +} diff --git a/frontend/src/AuthScreen/AuthScreen.tsx b/frontend/src/AuthScreen/AuthScreen.tsx index dc6a2c3..24c5b35 100644 --- a/frontend/src/AuthScreen/AuthScreen.tsx +++ b/frontend/src/AuthScreen/AuthScreen.tsx @@ -12,6 +12,7 @@ type AuthScreenProp = { footer?: ReactNode; onSubmit: (event: FormEvent) => void; error?: AuthError; + success?: string; }; export function AuthScreen(props: AuthScreenProp) { @@ -36,6 +37,11 @@ export function AuthScreen(props: AuthScreenProp) {