Authorization pop-up & misc improvements

package.json

@@ -13,6 +13,7 @@
     "@fortawesome/free-brands-svg-icons": "6.5.2",
     "@fortawesome/free-solid-svg-icons": "6.5.2",
     "@fortawesome/react-fontawesome": "0.2.2",
+    "@reduxjs/toolkit": "^2.2.6",
     "@sentry/react": "8.16.0",
     "@svgr/webpack": "8.1.0",
     "@swc/core": "1.6.13",
@@ -26,6 +27,7 @@
     "react": "18.3.1",
     "react-app-polyfill": "3.0.0",
     "react-dom": "18.3.1",
+    "react-redux": "^9.1.2",
     "react-router-dom": "6.24.1",
     "react-spinners": "0.14.1",
     "react-transition-group": "4.4.5",

src/App.tsx

@@ -7,6 +7,8 @@ import { BrowserRouter, Route, Routes } from "react-router-dom";
 
 import { PropagateLoader } from "react-spinners";
 
+import AuthorizationSplash from "./components/AuthorizationSplash";
+
 import { CSSTransition, TransitionGroup } from "react-transition-group";
 
 import globalStyles from "./globalStyles";
@@ -51,6 +53,7 @@ function App(): JSX.Element {
     return (
         <div>
             <Global styles={globalStyles}/>
+            <AuthorizationSplash/>
             <TransitionGroup>
                 <CSSTransition key={location.pathname} classNames="fade" timeout={300}>
                     <BrowserRouter>

src/api/auth.ts

@@ -1,10 +1,14 @@
 import Cookies, { CookieSetOptions } from "universal-cookie";
 import { AxiosResponse } from "axios";
 
+import { startAuthorizing, finishAuthorizing } from "../slices/authorization";
+import formsStore from "../store";
+
 import APIClient from "./client";
 
 const OAUTH2_CLIENT_ID = process.env.REACT_APP_OAUTH2_CLIENT_ID;
 const PRODUCTION = process.env.NODE_ENV !== "development";
+const STATE_LENGTH = 64;
 
 /**
  * Authorization result as returned from the backend.
@@ -32,6 +36,7 @@ export enum APIErrorMessages {
     BackendValidationDev = "Backend could not authorize with Discord, possibly due to being on a preview branch. Please contact the forms team.",
     BackendUnresponsive = "Unable to reach the backend, please retry, or contact the forms team.",
     BadResponse = "The server returned a bad response, please contact the forms team.",
+    AccessRejected = "Authorization was cancelled.",
     Unknown = "An unknown error occurred, please contact the forms team."
 }
 
@@ -94,25 +99,40 @@ export function checkScopes(scopes?: OAuthScopes[]): boolean {
  * @returns {code, cleanedScopes} The discord authorization code and the scopes the code is granted for.
  * @throws {Error} Indicates that an integrity check failed.
  */
-export async function getDiscordCode(scopes: OAuthScopes[], disableFunction?: (disable: boolean) => void): Promise<{code: string, cleanedScopes: OAuthScopes[]}> {
+export async function getDiscordCode(scopes: OAuthScopes[], disableFunction?: (disable: boolean) => void): Promise<{code: string | null, cleanedScopes: OAuthScopes[]}> {
     const cleanedScopes = ensureMinimumScopes(scopes, OAuthScopes.Identify);
 
     // Generate a new user state
-    const state = crypto.getRandomValues(new Uint32Array(1))[0];
+    const stateBytes = new Uint8Array(STATE_LENGTH);
+    crypto.getRandomValues(stateBytes);
+
+    let state = "";
+    for (let i = 0; i < stateBytes.length; i++) {
+        state += stateBytes[i].toString(16).padStart(2, "0");
+    }
 
     const scopeString = encodeURIComponent(cleanedScopes.join(" "));
     const redirectURI = encodeURIComponent(document.location.protocol + "//" + document.location.host + "/callback");
 
+    const windowHeight = screen.availHeight;
+    const windowWidth = screen.availWidth;
+    const requestHeight = Math.floor(windowHeight * 0.75);
+    const requestWidth = Math.floor(windowWidth * 0.4);
+
     // Open login window
     const windowRef = window.open(
         `https://discord.com/api/oauth2/authorize?client_id=${OAUTH2_CLIENT_ID}&state=${state}&response_type=code&scope=${scopeString}&redirect_uri=${redirectURI}&prompt=consent`,
-        "Discord_OAuth2"
+        "_blank",
+        `popup=true,height=${requestHeight},left=0,top=0,width=${requestWidth}`
     );
 
+    formsStore.dispatch(startAuthorizing());
+
     // Clean up on login
     const interval = setInterval(() => {
         if (windowRef?.closed) {
             clearInterval(interval);
+            formsStore.dispatch(finishAuthorizing());
             if (disableFunction) { disableFunction(false); }
         }
     }, 500);
@@ -133,6 +153,8 @@ export async function getDiscordCode(scopes: OAuthScopes[], disableFunction?: (d
             if (message.isTrusted) {
                 windowRef?.close();
 
+                formsStore.dispatch(finishAuthorizing());
+
                 clearInterval(interval);
 
                 // State integrity check
@@ -246,6 +268,12 @@ export default async function authorize(scopes: OAuthScopes[] = [], disableFunct
 
     if (disableFunction) { disableFunction(true); }
     await getDiscordCode(scopes, disableFunction).then(async discord_response =>{
+        if (!discord_response.code) {
+            throw {
+                Message: APIErrorMessages.AccessRejected,
+                Error: null
+            };
+        }
         await requestBackendJWT(discord_response.code).then(backend_response => {
             const options: CookieSetOptions = {sameSite: "strict", secure: PRODUCTION, path: "/", expires: new Date(3000, 1)};
             cookies.set(CookieNames.Username, backend_response.username, options);

src/components/AuthorizationSplash.tsx

@@ -0,0 +1,42 @@
+/** @jsx jsx */
+import { css, jsx } from "@emotion/react";
+import { useSelector } from "react-redux";
+import { type RootState } from "../store";
+
+const splashStyles = css`
+position: fixed;
+width: 100%;
+height: 100%;
+top: 0;
+transition: background-color 0.5s ease, opacity 0.5s ease;
+`;
+
+const innerText = css`
+text-align: center;
+vertical-align: middle;
+`;
+
+const spacer = css`
+height: 30%;
+`;
+
+function AuthorizationSplash(): JSX.Element {
+    const authorizing = useSelector<RootState, boolean>(state => state.authorization.authorizing);
+
+    const background = `rgba(0, 0, 0, ${authorizing ? "0.90" : "0"})`;
+
+    return <div css={css`
+          ${splashStyles}
+          background-color: ${background};
+          opacity: ${authorizing ? "1" : "0"};
+          z-index: ${authorizing ? "10" : "-10"};
+        `}>
+        <div css={spacer}/>
+        <div css={innerText}>
+            <h1 css={{fontSize: "3em"}}>Authorization in progress</h1>
+            <h2>Login with Discord in the opened window and return to this tab once complete.</h2>
+        </div>
+    </div>;
+}
+
+export default AuthorizationSplash;

src/components/OAuth2Button.tsx

@@ -55,8 +55,10 @@ async function login(props: OAuth2ButtonProps, errorDialog: React.RefObject<HTML
         }
 
         // Propagate to sentry
-        reason.Error.stack = new Error(`OAuth: ${reason.Message}`).stack + "\n" + reason.Error.stack;
-        throw reason.Error;
+        if (reason.Error) {
+            reason.Error.stack = new Error(`OAuth: ${reason.Message}`).stack + "\n" + reason.Error.stack;
+            throw reason.Error;
+        }
     });
 
     if (checkScopes(props.scopes) && props.rerender) {

src/index.tsx

@@ -5,6 +5,9 @@ import { createRoot } from "react-dom/client";
 import App from "./App";
 import * as serviceWorker from "./serviceWorker";
 
+import formsStore from "./store";
+import { Provider } from "react-redux";
+
 import * as Sentry from "@sentry/react";
 
 import {
@@ -71,7 +74,9 @@ root.render(
                     console.log(err);
             }}
         >
-            <App/>
+            <Provider store={formsStore}>
+                <App/>
+            </Provider>
         </Sentry.ErrorBoundary>
     </React.StrictMode>
 );

src/slices/authorization.ts

@@ -0,0 +1,20 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const authorizationSlice = createSlice({
+    name: "authorization",
+    initialState: {
+        authorizing: false,
+    },
+    reducers: {
+        startAuthorizing: (state) => {
+            state.authorizing = true;
+        },
+        finishAuthorizing: (state) => {
+            state.authorizing = false;
+        },
+    },
+});
+
+export const { startAuthorizing, finishAuthorizing } = authorizationSlice.actions;
+
+export default authorizationSlice.reducer;

src/store.ts

@@ -0,0 +1,21 @@
+import { combineReducers, configureStore } from "@reduxjs/toolkit";
+
+import authorizationReducer from "./slices/authorization";
+
+const rootReducer = combineReducers({
+    authorization: authorizationReducer
+});
+
+export const setupStore = (preloadedState?: Partial<RootState>) => {
+    return configureStore({
+        reducer: rootReducer,
+        preloadedState
+    });
+};
+
+const formsStore = setupStore();
+
+export default formsStore;
+
+export type RootState = ReturnType<typeof rootReducer>
+export type AppStore = ReturnType<typeof setupStore>

src/tests/App.test.tsx

@@ -1,11 +1,12 @@
 import React from "react";
-import {act, render, waitFor} from "@testing-library/react";
+import {act, waitFor} from "@testing-library/react";
+import { renderWithProviders } from "./utils";
 
 import App from "../App";
 
 test("renders app to body", async () => {
     await act(async () => {
-        const {container} = render(<App/>);
+        const {container} = renderWithProviders(<App/>);
         await waitFor(() => {
             expect(container).toBeInTheDocument();
         });

src/tests/components/AuthorizationSplash.test.tsx

@@ -0,0 +1,62 @@
+/** @jsx jsx */
+import { jsx } from "@emotion/react";
+import { renderWithProviders } from "../utils";
+import AuthorizationSplash from "../../components/AuthorizationSplash";
+import { finishAuthorizing } from "../../slices/authorization";
+import { act } from "@testing-library/react";
+
+test("authorization splash is hidden when not authorizing", () => {
+    const { container } = renderWithProviders(<AuthorizationSplash />);
+    const splash = container.firstElementChild;
+
+    expect(splash).not.toBe(null);
+
+    if (splash) {
+        const style = window.getComputedStyle(splash);
+        expect(style.opacity).toBe("0");
+    }
+});
+
+test("authorization splash is visible when authorizing state is set", () => {
+    const { container } = renderWithProviders(<AuthorizationSplash />, {
+        preloadedState: {
+            authorization: {
+                authorizing: true
+            }
+        }
+    });
+    const splash = container.firstElementChild;
+
+    expect(splash).not.toBe(null);
+
+    if (splash) {
+        const style = window.getComputedStyle(splash);
+        expect(style.opacity).toBe("1");
+    }
+});
+
+test("test state transitions when authorization completes", () => {
+    const { store, container } = renderWithProviders(<AuthorizationSplash />, {
+        preloadedState: {
+            authorization: {
+                authorizing: true
+            }
+        }
+    });
+
+    const splash = container.firstElementChild;
+
+    expect(splash).not.toBe(null);
+
+    if (splash) {
+        let style = window.getComputedStyle(splash);
+        expect(style.opacity).toBe("1");
+
+        act(() => {
+            store.dispatch(finishAuthorizing());
+        });
+
+        style = window.getComputedStyle(splash);
+        expect(style.opacity).toBe("0");
+    }
+});

src/tests/utils.tsx

@@ -0,0 +1,36 @@
+/** @jsx jsx */
+import { jsx } from "@emotion/react";
+import { PropsWithChildren } from "react";
+import { render } from "@testing-library/react";
+import type { RenderOptions } from "@testing-library/react";
+import { Provider } from "react-redux";
+
+import type { AppStore, RootState } from "../store";
+import { setupStore } from "../store";
+
+interface ExtendedRenderOptions extends Omit<RenderOptions, "queries"> {
+  preloadedState?: Partial<RootState>
+  store?: AppStore
+}
+
+export function renderWithProviders(
+    ui: React.ReactElement,
+    extendedRenderOptions: ExtendedRenderOptions = {}
+) {
+    const {
+        preloadedState = {},
+        // Automatically create a store instance if no store was passed in
+        store = setupStore(preloadedState),
+        ...renderOptions
+    } = extendedRenderOptions;
+
+    const Wrapper = ({ children }: PropsWithChildren) => (
+        <Provider store={store}>{children}</Provider>
+    );
+
+    // Return an object with the store and all of RTL"s query functions
+    return {
+        store,
+        ...render(ui, { wrapper: Wrapper, ...renderOptions })
+    };
+}