Merge pull request #64 from debater-coder/revert-62-revert-59-50-use-react-routers-data-fetching-mechanism

Revert "Revert "#50 use react routers data fetching mechanism""

Author: debater-coder

README.md

@@ -1,6 +1,9 @@
 # [Timetabl](https://www.timetabl.app)
+
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+
 [![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors-)
+
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 ![GitHub deployments](https://img.shields.io/github/deployments/debater-coder/timetabl-app/production?label=vercel&logo=vercel)
@@ -21,7 +24,7 @@ Timetabl is built on three principles:
 
 3. **Be secure**
    Unlike other bell time apps, Timetabl stores your tokens in HTTPS-only cookies instead of `localStorage`, so that even in the event of an XSS attack, the tokens are secure.
-   
+
 ## Contributors
 
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->

package-lock.json

@@ -40,7 +40,7 @@
     "@react-three/fiber": "^8.9.1",
     "@rollup/plugin-replace": "^4.0.0",
     "@tanstack/query-sync-storage-persister": "^4.0.10",
-    "@tanstack/react-query": "4.0.10",
+    "@tanstack/react-query": "^4.20.4",
     "@tanstack/react-query-devtools": "^4.0.10",
     "@tanstack/react-query-persist-client": "^4.0.10",
     "@types/react-dom": "^18.0.9",
@@ -62,7 +62,8 @@
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-icons": "^4.4.0",
-    "react-router-dom": "^6.3.0",
+    "react-query-kit": "^1.3.1",
+    "react-router-dom": "^6.5.0",
     "rollup-plugin-workbox": "^6.2.0",
     "three": "^0.146.0",
     "web-vitals": "^3.0.1",
@@ -81,7 +82,7 @@
     "@typescript-eslint/eslint-plugin": "^5.38.0",
     "@typescript-eslint/parser": "^5.38.0",
     "@vercel/node": "^2.6.3",
-    "@vitejs/plugin-react": "^2.0.0",
+    "@vitejs/plugin-react": "^3.0.0",
     "cypress": "^11.2.0",
     "eslint": "^8.23.1",
     "eslint-config-prettier": "^8.5.0",
@@ -94,6 +95,6 @@
     "npm-run-all": "^4.1.5",
     "prettier": "2.6.2",
     "start-server-and-test": "^1.14.0",
-    "vite": "^3.0.2"
+    "vite": "^4.0.2"
   }
 }

package.json

@@ -0,0 +1,223 @@
+import { QueryClient } from "@tanstack/react-query";
+import _ from "lodash";
+import config from "../config";
+import HTTPError from "./errors/HTTPError";
+import { toast } from "./toast";
+
+export class Auth {
+  loggedIn: boolean;
+  loading: boolean;
+  shouldRedirect: boolean;
+  refreshing: boolean;
+  shouldLogin: boolean;
+  queryClient: QueryClient;
+
+  constructor(queryClient: QueryClient) {
+    this.login = this.login.bind(this);
+    this.logout = this.logout.bind(this);
+    this.refresh = this.refresh.bind(this);
+    this.handleRedirect = this.handleRedirect.bind(this);
+    this.loggedIn = false;
+    this.loading = false;
+    this.shouldRedirect = false;
+    this.refreshing = false;
+    this.shouldLogin = false;
+    this.queryClient = queryClient;
+  }
+
+  /**
+   * Generate a secure random string using the browser crypto functions
+   */
+  protected generateRandomString() {
+    const array = new Uint32Array(28);
+    window.crypto.getRandomValues(array);
+    return Array.from(array, (dec) => ("0" + dec.toString(16)).substr(-2)).join(
+      ""
+    );
+  }
+
+  /** Calculate the SHA256 hash of the input text.
+   * Returns a promise that resolves to an ArrayBuffer
+   */
+  protected sha256(plain: string) {
+    const encoder = new TextEncoder();
+    const data = encoder.encode(plain);
+    return window.crypto.subtle.digest("SHA-256", data);
+  }
+
+  /**
+   * Base64-urlencodes the input string
+   */
+  protected base64urlencode(str: ArrayBuffer) {
+    // Convert the ArrayBuffer to string using Uint8 array to conver to what btoa accepts.
+    // btoa accepts chars only within ascii 0-255 and base64 encodes them.
+    // Then convert the base64 encoded to base64url encoded
+    //   (replace + with -, replace / with _, trim trailing =)
+    return window
+      .btoa(String.fromCharCode.apply(null, new Uint8Array(str)))
+      .replace(/\+/g, "-")
+      .replace(/\//g, "_")
+      .replace(/=+$/, "");
+  }
+
+  /**
+   * Return the base64-urlencoded sha256 hash for the PKCE challenge
+   */
+  protected async pkceChallengeFromVerifier(v: string) {
+    const hashed = await this.sha256(v);
+    return this.base64urlencode(hashed);
+  }
+
+  async login() {
+    // Create and store a random "state" value
+    const state = this.generateRandomString();
+    localStorage.setItem("pkce_state", state);
+
+    // Create and store a new PKCE code_verifier (the plaintext random secret)
+    const code_verifier = this.generateRandomString();
+    localStorage.setItem("pkce_code_verifier", code_verifier);
+
+    // Hash and base64-urlencode the secret to use as the challenge
+    const code_challenge = await this.pkceChallengeFromVerifier(code_verifier);
+
+    // Build the authorization URL
+    // Redirect to the authorization server
+    window.location.href =
+      config.authorization_endpoint +
+      "?response_type=code" +
+      "&client_id=" +
+      encodeURIComponent(config.client_id) +
+      "&state=" +
+      encodeURIComponent(state) +
+      "&scope=" +
+      encodeURIComponent(config.scopes) +
+      "&redirect_uri=" +
+      encodeURIComponent(config.redirect_uri) +
+      "&code_challenge=" +
+      encodeURIComponent(code_challenge) +
+      "&code_challenge_method=S256";
+  }
+
+  async logout(rerender?: () => void) {
+    await fetch("/api/token", {
+      method: "DELETE",
+    });
+    localStorage.setItem("loggedIn", "false");
+    this.queryClient.clear();
+    this.loggedIn = false;
+    rerender?.();
+  }
+
+  refresh = _.throttle(async (rerender?: () => void) => {
+    this.refreshing = true;
+    try {
+      const res = await fetch("/api/token", {
+        method: "PATCH",
+        body: JSON.stringify({
+          client_id: config.client_id,
+        }),
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
+        },
+      });
+
+      if (!res.ok) {
+        throw new HTTPError(res.status);
+      }
+
+      this.refreshing = false;
+    } catch (error) {
+      this.refreshing = false;
+      this.shouldLogin = true;
+      toast({
+        title:
+          "Something went wrong, try logging in and out if the issue persists.",
+        description: error.message,
+        status: "error",
+        isClosable: true,
+      });
+      throw error;
+    } finally {
+      rerender?.();
+    }
+  }, 1000 * 60);
+
+  handleRedirect(rerender?: () => void) {
+    // Get query
+    const query = Object.fromEntries(
+      new URLSearchParams(window.location.search).entries()
+    );
+
+    // Clear query
+    window.history.replaceState({}, null, location.pathname);
+
+    // Oauth Redirect Handling
+    try {
+      // Error check
+      if (query.error) {
+        toast({
+          title: query.error,
+          description: query.error_description,
+          status: "error",
+        });
+      }
+
+      // If the server returned an authorization code, attempt to exchange it for an access token
+      if (query.code) {
+        // Verify state matches what we set at the beginning
+        if (localStorage.getItem("pkce_state") !== query.state) {
+          throw new Error(
+            "Invalid state! If you are seeing this message it may mean that the authorisation server is FAKE"
+          );
+        }
+
+        // Optimistically login but set loading to true
+        this.loggedIn = true;
+        this.shouldRedirect = true;
+        this.loading = true;
+
+        rerender?.();
+
+        // Exchange code for access token
+        fetch("/api/token", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json;charset=utf-8",
+          },
+          body: JSON.stringify({
+            code: query.code,
+            client_id: config.client_id,
+            redirect_uri: config.redirect_uri,
+            code_verifier: localStorage.getItem("pkce_code_verifier"),
+          }),
+        })
+          .then((r) => {
+            if (!r.ok) {
+              throw new Error(String(r.status) + r.statusText);
+            }
+
+            // Persist logged in state and stop loading
+            localStorage.setItem("loggedIn", "true");
+            this.loading = false;
+            rerender?.();
+          })
+          .catch(() => {
+            this.loading = false;
+            rerender?.();
+          });
+      }
+    } finally {
+      // Clean these up since we don't need them anymore
+      localStorage.removeItem("pkce_state");
+      localStorage.removeItem("pkce_code_verifier");
+    }
+
+    // Log in if already logged in
+    if (localStorage.getItem("loggedIn") === "true") {
+      this.loggedIn = true;
+    }
+
+    this.shouldRedirect = true;
+    rerender?.();
+  }
+}

src/Auth.tsx

@@ -2,17 +2,14 @@ import Nav from "../Nav";
 import { Outlet } from "react-router-dom";
 import { Flex } from "@chakra-ui/react";
 import { Box } from "@chakra-ui/react";
-import { ErrorBoundary } from "../ErrorBoundary";
 
 export default () => {
   return (
     <Flex direction={"column"} width={"100vw"} maxW="full" height={"100vh"}>
       <Nav />
       <Box mt={"100px"} />
       <Flex direction={"column"} w="full" h="full" maxH={"calc(100% - 100px)"}>
-        <ErrorBoundary>
-          <Outlet />
-        </ErrorBoundary>
+        <Outlet />
       </Flex>
     </Flex>
   );

src/components/App/App.tsx

@@ -7,7 +7,7 @@ import {
 import SidebarButton from "../Sidebar/SidebarButton";
 import { motion, PanInfo } from "framer-motion";
 import { useEffect, useRef, useState } from "react";
-import { routes } from "../../routes";
+import { pages } from "../../pages";
 
 const Flex = motion(ChakraFlex);
 
@@ -80,7 +80,7 @@ export const BottomNavSheet = () => {
         borderTop="none"
         borderColor={useColorModeValue("gray.200", "gray.700")}
       >
-        {routes.pinned.map((routes) => (
+        {pages.pinned.map((routes) => (
           <SidebarButton
             key={routes.path}
             name={routes.name}
@@ -92,7 +92,7 @@ export const BottomNavSheet = () => {
         ))}
       </Flex>
       <SimpleGrid columns={4} w="full">
-        {routes.unpinned.map((routes) => (
+        {pages.unpinned.map((routes) => (
           <SidebarButton
             key={routes.path}
             name={routes.name}

src/components/BottomNavSheet/BottomNavSheet.tsx

@@ -1,8 +1,8 @@
 import { chakra, useBoolean, useMediaQuery } from "@chakra-ui/react";
 import { DateTime } from "luxon";
 import { useState } from "react";
-import { TimetablPeriod } from "../../hooks/sbhsQuery/use/useDTT";
 import useSettings from "../../hooks/useSettings";
+import { TimetablPeriod } from "../../services/sbhsApi/types";
 import { Period } from "../Period";
 
 export const DTTPeriod = ({

src/components/DTTPeriod/DTTPeriod.tsx

@@ -6,13 +6,13 @@ import {
   Flex,
 } from "@chakra-ui/react";
 
-export default ({ error }: { error: { message?: string } }) => (
+export default () => (
   <Flex>
     <Alert status="error" rounded={5} m={6}>
       <AlertIcon />
       <AlertTitle>An error occured.</AlertTitle>
       <AlertDescription>
-        {error.message}. Try logging in and out if the error persists.
+        Try logging in and out if the error persists.
       </AlertDescription>
     </Alert>
   </Flex>

src/components/QueryError/QueryError.tsx renamed to src/components/ErrorAlert.tsx/ErrorAlert.tsx

@@ -0,0 +1 @@
+export { default } from "./ErrorAlert";