[feat-500] cleaned up some code

- removed macos testing
- refactored some components to use the service objects instead of destructing
- improved codeVerifier generation by sonarcloud request

.github/workflows/node.js.yaml

@@ -13,7 +13,7 @@ jobs:
     build:
         strategy:
             matrix:
-                os: [ubuntu-latest, windows-latest, macos-latest]
+                os: [ubuntu-latest, windows-latest]
 
         runs-on: ${{ matrix.os }}
 

src/__tests__/integration/renderer/third-parties/Beatleader.test.tsx

@@ -128,6 +128,8 @@ test("Mocked Beatleader authentication flow", async () => {
     await authClientService.openOAuth(OAuthType.Beatleader);
     const codeVerifier = mockConfigurationService.get<string | undefined>(CODE_VERIFIER_KEY);
     expect(codeVerifier).toBeTruthy();
+    // Search for invalid characters
+    expect(codeVerifier).not.toMatch(/[^A-Za-z0-9-_\.~]/);
 
     expect(ipcData.type).toEqual(OAuthType.Beatleader);
     expect(ipcData.codeVerifier).toEqual(codeVerifier);

src/renderer/components/leaderboard/leaderboard-panel.component.tsx

@@ -26,9 +26,9 @@ export function LeaderboardPanel({ isActive }: Props) {
 
     const online = useObservable(() => osService.isOnline$);
 
-    const { openOAuth, logoutOAuth } = defaultAuthService();
-    const { isAuthenticated, getCurrentPlayerInfo } = defaultBeatleaderAPIClientService();
-    const [authenticated, setAuthenticated] = useState(isAuthenticated());
+    const authService = defaultAuthService();
+    const beatleaderService = defaultBeatleaderAPIClientService();
+    const [authenticated, setAuthenticated] = useState(beatleaderService.isAuthenticated());
     const [playerInfo, setPlayerInfo] = useState(null as BeatleaderPlayerInfo | null);
     const isActiveOnce = useChangeUntilEqual(isActive, { untilEqual: true });
 
@@ -41,12 +41,12 @@ export function LeaderboardPanel({ isActive }: Props) {
         // NOTE: Might need a service or something
         window.onstorage = (event) => {
             if (event.key === OAuthType.Beatleader) {
-                setAuthenticated(isAuthenticated());
+                setAuthenticated(beatleaderService.isAuthenticated());
             }
         };
 
         if (online && authenticated) {
-            getCurrentPlayerInfo()
+            beatleaderService.getCurrentPlayerInfo()
                 .then(setPlayerInfo);
         }
 
@@ -61,7 +61,7 @@ export function LeaderboardPanel({ isActive }: Props) {
             textClassName="rounded-md p-2 bg-light-main-color-1 dark:bg-main-color-1"
             onClick={event => {
                 event.stopPropagation();
-                openOAuth(OAuthType.Beatleader);
+                authService.openOAuth(OAuthType.Beatleader);
             }}
         />
     }
@@ -89,7 +89,7 @@ export function LeaderboardPanel({ isActive }: Props) {
         <BeatleaderHeaderSection
             playerInfo={playerInfo}
             onLogoutClicked={() => {
-                logoutOAuth(OAuthType.Beatleader);
+                authService.logoutOAuth(OAuthType.Beatleader);
                 setAuthenticated(false);
                 setPlayerInfo(null);
             }}

src/renderer/services/auth.service.ts

@@ -3,15 +3,15 @@ import { OAuthType } from "shared/models/oauth.types";
 import { ConfigurationClientService, IpcClientService } from "./types";
 
 
-const CODE_VERIFIER_SIZE = 64;
-const CHARACTERS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-._~";
+const CODE_VERIFIER_SIZE = 32;
 
-function randomString(length: number): string {
-    let str = "";
-    while (--length >= 0) {
-        str += CHARACTERS.charAt(Math.floor(Math.random() * CHARACTERS.length));
-    }
-    return str;
+function createCodeVerifier(): string {
+    const random = new Uint8Array(CODE_VERIFIER_SIZE);
+    crypto.getRandomValues(random);
+    return btoa(String.fromCharCode.apply(null, Array.from(random)))
+        .replace(/\+/g, "-")
+        .replace(/\//g, "_")
+        .replace(/=/g, "");
 }
 
 export function createAuthClientService({
@@ -25,7 +25,7 @@ export function createAuthClientService({
 }) {
     return {
         async openOAuth(type: OAuthType) {
-            const codeVerifier = randomString(CODE_VERIFIER_SIZE);
+            const codeVerifier = createCodeVerifier();
             configService.set(codeVerifierKey, codeVerifier);
             return lastValueFrom(
                 ipcService.sendV2("auth.open-oauth", {

src/renderer/windows/OAuth.tsx

@@ -46,7 +46,7 @@ function useAuthentication(type: OAuthType, code: string) {
 }
 
 export default function OAuthWindow() {
-    const { close: closeWindow } = useWindowControls();
+    const windowControls = useWindowControls();
 
     const [searchParams,] = useSearchParams();
     const { loading, authenticated, errorMessage } = useAuthentication(
@@ -76,7 +76,7 @@ export default function OAuthWindow() {
                 withBar={false}
                 onClick={event => {
                     event.preventDefault();
-                    closeWindow();
+                    windowControls.close();
                 }}
             />
         </OAuthStatus>