feat: Add support for redmine oauth2 login flow (WIP)

Author: CrawlerCode

src/api/redmine/RedmineApiClient.ts

@@ -1,6 +1,9 @@
-import axios, { AxiosInstance } from "axios";
+import { RedmineAuthenticationError } from "@/api/redmine/RedmineAuthenticationError";
+import { Settings } from "@/provider/SettingsProvider";
+import axios, { AxiosInstance, isAxiosError } from "axios";
 import { formatISO } from "date-fns";
 import qs from "qs";
+import { browser } from "wxt/browser";
 import { MissingRedmineConfigError } from "./MissingRedmineConfigError";
 import {
   TCreateIssue,
@@ -10,6 +13,7 @@ import {
   TIssueStatus,
   TIssueTracker,
   TMembership,
+  TOAuthTokenResponse,
   TPaginatedResponse,
   TProject,
   TReference,
@@ -26,12 +30,15 @@ import {
 export class RedmineApiClient {
   private instance: AxiosInstance;
   public id = crypto.randomUUID();
+  private auth?: Settings["auth"];
 
-  constructor(redmineURL: string, redmineApiKey: string) {
+  constructor(redmineURL: string, auth?: Settings["auth"]) {
+    this.auth = auth;
     this.instance = axios.create({
       baseURL: redmineURL,
       headers: {
-        "X-Redmine-API-Key": redmineApiKey,
+        ...(auth?.method === "apiKey" && { "X-Redmine-API-Key": auth.apiKey }),
+        ...(auth?.method === "oauth2" && { Authorization: `Bearer ${auth.oauth2?.accessToken}` }),
         "Cache-Control": "no-cache, no-store, max-age=0",
         Expires: "0",
       },
@@ -40,8 +47,12 @@ export class RedmineApiClient {
       if (!config.baseURL) {
         throw new MissingRedmineConfigError();
       }
+      if (auth?.method === "oauth2" && !auth.oauth2?.accessToken && config.url !== "/oauth/token") {
+        throw new RedmineAuthenticationError("Authorization required");
+      }
       return config;
     });
+
     this.instance.interceptors.response.use(
       (response) => {
         const contentType = response.headers["content-type"];
@@ -51,11 +62,15 @@ export class RedmineApiClient {
         return response;
       },
       (error) => {
-        if (error.response?.status === 401) {
-          throw new Error("Unauthorized");
-        }
-        if (error.response?.status === 403) {
-          throw new Error("Forbidden");
+        if (isAxiosError(error)) {
+          if (error.response?.status === 401) {
+            const message = error.response.headers["www-authenticate"].match(/error_description="([^"]+)"/)?.[1];
+            throw new RedmineAuthenticationError(message);
+          }
+
+          if (error.response?.status === 403) {
+            throw new Error("Forbidden");
+          }
         }
         return Promise.reject(error);
       }
@@ -295,4 +310,85 @@ export class RedmineApiClient {
   async getCurrentUser(): Promise<TUser> {
     return this.instance.get("/users/current.json?include=memberships").then((res) => res.data.user);
   }
+
+  // Auth
+  getAuthorizeUrl({ clientId, redirectUri, scope }: { clientId: string; redirectUri: string; scope: string }): string {
+    return `${this.instance.defaults.baseURL}/oauth/authorize?${qs.stringify({
+      client_id: clientId,
+      redirect_uri: redirectUri,
+      response_type: "code",
+      scope,
+    })}`;
+  }
+
+  async getAccessToken({ code, redirectUri, clientId, clientSecret }: { code: string; redirectUri: string; clientId: string; clientSecret: string }) {
+    return this.instance
+      .post<TOAuthTokenResponse>("/oauth/token", {
+        grant_type: "authorization_code",
+        code,
+        redirect_uri: redirectUri,
+        client_id: clientId,
+        client_secret: clientSecret,
+      })
+      .then((res) => res.data);
+  }
+
+  async refreshAccessToken({ refreshToken, clientId, clientSecret }: { refreshToken: string; clientId: string; clientSecret: string }) {
+    return this.instance
+      .post<TOAuthTokenResponse>("/oauth/token", {
+        grant_type: "refresh_token",
+        refresh_token: refreshToken,
+        client_id: clientId,
+        client_secret: clientSecret,
+      })
+      .then((res) => res.data);
+  }
+
+  async startOAuth2Authorization() {
+    if (!this.auth?.oauth2?.clientId || !this.auth?.oauth2?.clientSecret) {
+      throw new Error("OAuth2 Client ID and Client Secret are required for OAuth2 authentication");
+    }
+
+    const redirectUri = browser.identity.getRedirectURL();
+    const authorizeUrl = this.getAuthorizeUrl({
+      clientId: this.auth.oauth2.clientId,
+      redirectUri,
+      scope: "view_project search_project view_members view_issues view_time_entries",
+    });
+
+    // Authorize and get the code
+    const redirectURLString = await browser.identity.launchWebAuthFlow({
+      interactive: true,
+      url: authorizeUrl,
+    });
+    if (!redirectURLString) {
+      throw new Error("No redirect URL received");
+    }
+    const redirectURL = new URL(redirectURLString);
+    if (redirectURL.searchParams.get("error")) {
+      if (redirectURL.searchParams.get("error") === "access_denied") {
+        throw new Error("Authorization was denied. Please allow access to connect your Redmine account.");
+      }
+      const errorDescription = redirectURL.searchParams.get("error_description") || "Unknown error";
+      throw new Error(`Authorization error: ${errorDescription}`);
+    }
+    const code = redirectURL.searchParams.get("code");
+    if (!code) {
+      throw new Error("Authorization code not found");
+    }
+
+    // Exchange the code for tokens
+    const tokenResponse = await this.getAccessToken({
+      code,
+      redirectUri,
+      clientId: this.auth.oauth2.clientId,
+      clientSecret: this.auth.oauth2.clientSecret,
+    });
+
+    return {
+      accessToken: tokenResponse.access_token,
+      refreshToken: tokenResponse.refresh_token,
+      expiresAt: (tokenResponse.created_at + tokenResponse.expires_in) * 1000,
+    };
+  }
 }

src/api/redmine/RedmineAuthenticationError.ts

@@ -0,0 +1,6 @@
+export class RedmineAuthenticationError extends Error {
+  constructor(message = "Unauthorized") {
+    super(message);
+    this.name = RedmineAuthenticationError.name;
+  }
+}

src/api/redmine/types.ts

@@ -297,3 +297,12 @@ export type TPaginatedResponse<T> = {
   offset: number;
   limit: number;
 } & T;
+
+export type TOAuthTokenResponse = {
+  token_type: string;
+  access_token: string;
+  refresh_token: string;
+  expires_in: number;
+  scope: string;
+  created_at: number;
+};

src/components/error/ErrorComponent.tsx

@@ -1,4 +1,5 @@
 import { MissingRedmineConfigError } from "@/api/redmine/MissingRedmineConfigError";
+import { RedmineAuthenticationError } from "@/api/redmine/RedmineAuthenticationError";
 import { getErrorMessage } from "@/utils/error";
 import { useQueryErrorResetBoundary } from "@tanstack/react-query";
 import { ErrorComponentProps } from "@tanstack/react-router";
@@ -20,7 +21,9 @@ export function ErrorComponent({ error, reset: resetPage }: ErrorComponentProps)
           ? formatMessage({ id: "general.error.api-error" })
           : error instanceof MissingRedmineConfigError
             ? formatMessage({ id: "general.error.missing-redmine-configuration" })
-            : formatMessage({ id: "general.error.unknown-error" }, { name: error.name })}
+            : error instanceof RedmineAuthenticationError
+              ? formatMessage({ id: "general.error.redmine-authentication-error" })
+              : formatMessage({ id: "general.error.unknown-error" }, { name: error.name })}
       </AlertTitle>
       {!(error instanceof MissingRedmineConfigError) && (
         <AlertDescription>

src/lang/en.json

@@ -138,9 +138,21 @@
   "settings.redmine.url": "Redmine URL",
   "settings.redmine.url.validation.required": "URL is required",
   "settings.redmine.url.validation.valid-url": "Enter a valid URL",
+  "settings.redmine.auth-method": "Authentication method",
+  "settings.redmine.auth-method.api-key": "API Key",
+  "settings.redmine.auth-method.oauth2": "OAuth2",
   "settings.redmine.api-key": "Redmine API-Key",
   "settings.redmine.api-key.validation.required": "API-Key is required",
   "settings.redmine.api-key.hint": "Where can I find my API-Key? <link>here</link>",
+  "settings.redmine.oauth2.client-id": "Client ID",
+  "settings.redmine.oauth2.client-secret": "Client Secret",
+  "settings.redmine.oauth2.setup": "OAuth2 setup",
+  "settings.redmine.oauth2.setup.description": "To use OAuth2, you need to register an <link>OAuth2 application</link> in Redmine. This requires administrator permissions.",
+  "settings.redmine.oauth2.setup.application-name": "Name",
+  "settings.redmine.oauth2.setup.redirect-uri": "Redirect URI",
+  "settings.redmine.oauth2.token-expires": "Token expires on {date} at {time}",
+  "settings.redmine.oauth2.authorize": "Authorize with OAuth2",
+  "settings.redmine.oauth2.authorization-failed": "OAuth2 authorization failed: {error}",
   "settings.redmine.connecting": "Connecting...",
   "settings.redmine.connection-failed": "Connection failed",
   "settings.redmine.connection-successful": "Connection successful!",
@@ -189,6 +201,7 @@
   "general.retry": "Retry",
   "general.error.api-error": "API-Error",
   "general.error.missing-redmine-configuration": "Redmine URL is not configured",
+  "general.error.redmine-authentication-error": "Redmine authentication error",
   "general.error.unknown-error": "Unknown error: {name}",
   "general.error.page-not-found": "Page not found",
 

src/provider/QueryClientProvider.tsx

@@ -1,4 +1,5 @@
 import { MissingRedmineConfigError } from "@/api/redmine/MissingRedmineConfigError";
+import { RedmineAuthenticationError } from "@/api/redmine/RedmineAuthenticationError";
 import { getErrorMessage } from "@/utils/error";
 import { createAsyncStoragePersister } from "@tanstack/query-async-storage-persister";
 import { MutationCache, QueryCache, QueryClient, useIsRestoring } from "@tanstack/react-query";
@@ -45,6 +46,7 @@ export const queryClient = new QueryClient({
 
       // Skip if Redmine URL is not configured
       if (error instanceof MissingRedmineConfigError) return;
+      if (error instanceof RedmineAuthenticationError) return;
 
       if (!isAxiosError(error)) {
         toast.error(

src/provider/RedmineApiProvider.tsx

@@ -7,7 +7,7 @@ const RedmineApiContext = createContext<RedmineApiClient | null>(null);
 const RedmineApiProvider = ({ children }: { children: ReactNode }) => {
   const { settings } = useSettings();
 
-  return <RedmineApiContext value={new RedmineApiClient(settings.redmineURL, settings.redmineApiKey)}>{children}</RedmineApiContext>;
+  return <RedmineApiContext value={new RedmineApiClient(settings.redmineURL, settings.auth)}>{children}</RedmineApiContext>;
 };
 
 export const useRedmineApi = () => use(RedmineApiContext)!;

src/provider/SettingsProvider.tsx

@@ -13,19 +13,47 @@ export const settingsSchema = ({ formatMessage }: { formatMessage?: ReturnType<t
       .string(formatMessage?.({ id: "settings.redmine.url.validation.required" }))
       .nonempty(formatMessage?.({ id: "settings.redmine.url.validation.required" }))
       .regex(/^(http|https):\/\/[\w\-.]+(\.\w+)*(:[0-9]+)?[\w\-/]*\/?$/, formatMessage?.({ id: "settings.redmine.url.validation.valid-url" })),
-    redmineApiKey: z.string().nonempty(formatMessage?.({ id: "settings.redmine.api-key.validation.required" })),
+    /**
+     * @deprecated Use `auth.apiKey` instead.
+     */
+    redmineApiKey: z.string().optional(),
+    auth: z.object({
+      method: z.enum(["apiKey", "oauth2"]),
+      apiKey: z.string().optional(),
+      oauth2: z
+        .object({
+          clientId: z.string(),
+          clientSecret: z.string(),
+          accessToken: z.string().optional(),
+          refreshToken: z.string().optional(),
+          expiresAt: z.number().optional(),
+        })
+        .optional(),
+    }),
     features: z.object({
       autoPauseOnSwitch: z.boolean(),
-      roundTimeNearestQuarterHour: z.boolean().optional(), // ! Legacy
-      roundToNearestInterval: z.boolean().optional(), // ! Legacy
+      /**
+       * @deprecated Use `roundToInterval` with `roundingMode: "nearest"` and `roundingInterval: 15` instead.
+       */
+      roundTimeNearestQuarterHour: z.boolean().optional(),
+      /**
+       * @deprecated Use `roundToInterval` with `roundingMode: "nearest"` instead.
+       */
+      roundToNearestInterval: z.boolean().optional(),
       roundToInterval: z.boolean(),
       roundingMode: z.enum(["down", "nearest", "up"]),
       roundingInterval: z
         .int(formatMessage?.({ id: "settings.features.rounding-interval.validation.required" }))
         .min(1, formatMessage?.({ id: "settings.features.rounding-interval.validation.greater-than-zero" }))
         .max(60, formatMessage?.({ id: "settings.features.rounding-interval.validation.less-than-or-equals-sixty" })),
-      addNotes: z.boolean().optional(), // ! Legacy
-      cacheComments: z.boolean().optional(), // ! Legacy
+      /**
+       * @deprecated This setting has no effect and will be removed in a future version.
+       */
+      addNotes: z.boolean().optional(),
+      /**
+       * @deprecated Use `persistentComments` instead.
+       */
+      cacheComments: z.boolean().optional(),
       persistentComments: z.boolean(),
       showCurrentIssueTimer: z.boolean(),
     }),
@@ -48,7 +76,14 @@ export type Settings = z.infer<ReturnType<typeof settingsSchema>>;
 const defaultSettings: Settings = {
   language: "browser",
   redmineURL: "",
-  redmineApiKey: "",
+  auth: {
+    method: "apiKey",
+    apiKey: "",
+    oauth2: {
+      clientId: "",
+      clientSecret: "",
+    },
+  },
   features: {
     autoPauseOnSwitch: true,
     roundToInterval: false,
@@ -97,6 +132,13 @@ export const runSettingsMigration = async () => {
     settings.features.addNotes = undefined;
   }
 
+  if (settings.redmineApiKey) {
+    settings.auth = {
+      method: "apiKey",
+      apiKey: settings.redmineApiKey,
+    };
+  }
+
   if (JSON.stringify(settings) !== JSON.stringify(settingsData)) {
     await setStorage("settings", settings);
   }