feat: sync api changes and fix auth-related bugs

Signed-off-by: Noa Virellia <noa@requiem.garden>

client/cms/src/lib/axios.ts

@@ -1,10 +1,17 @@
-import type { AxiosRequestConfig } from 'axios';
-import axios, { AxiosError } from 'axios';
+import type { AxiosError, AxiosRequestConfig } from 'axios';
+import type { JsonValue } from 'type-fest';
+import axios from 'axios';
+import { isNil } from 'lodash-es';
 import { router } from '@/lib/router';
-import { doRefreshToken, getRefreshToken, getToken, setRefreshToken, setToken } from './token';
+import { clearTokens, doRefreshToken, getRefreshToken, getToken, setRefreshToken, setToken } from './token';
+
+export const HEADER_API_VERSION = {
+  'X-Api-Version': 'latest',
+};
 
 export const axiosClient = axios.create({
   baseURL: '/api/v1/',
+  headers: HEADER_API_VERSION,
 });
 
 axiosClient.interceptors.request.use((config) => {
@@ -18,27 +25,43 @@ axiosClient.interceptors.request.use((config) => {
 
 type RetryConfig = AxiosRequestConfig & { _retry?: boolean };
 
-axiosClient.interceptors.response.use(undefined, async (error: AxiosError) => {
+interface ResponseData {
+  code: number;
+  error_id: string;
+  status: string;
+  data: JsonValue;
+}
+
+axiosClient.interceptors.response.use(async (response) => {
+  const data = response.data as ResponseData;
+  if (data.code !== 200) {
+    return Promise.reject(data);
+  }
+  response.data = data.data;
+  return response;
+}, async (error: AxiosError) => {
   const originalRequest = error.config as RetryConfig | undefined;
   if (!error.response || error.response.status !== 401 || !originalRequest) {
     return Promise.reject(error);
   }
-
-  if (error.response.status === 401 && getRefreshToken() !== null) {
+  if (error.response.status === 401 && originalRequest.url !== '/auth/refresh' && !isNil(getRefreshToken())) {
     try {
-      const maybeRefreshTokenValue = await doRefreshToken();
-      const { access_token, refresh_token } = maybeRefreshTokenValue.data;
+      const maybeRefreshTokenResponse = await doRefreshToken();
+      if (maybeRefreshTokenResponse.status !== 200) {
+        throw new Error('Failed to refresh token');
+      }
+      const { access_token, refresh_token } = maybeRefreshTokenResponse.data;
       originalRequest.headers = originalRequest.headers ?? {};
       originalRequest.headers.Authorization = `Bearer ${access_token}`;
       setToken(access_token);
       setRefreshToken(refresh_token);
       return await axiosClient(originalRequest);
     }
+    // eslint-disable-next-line unused-imports/no-unused-vars
     catch (e) {
-      if (e instanceof AxiosError && e.status === 401) {
-        await router.navigate({ to: '/authorize' });
-        return Promise.reject(error);
-      }
+      // Should remove token (tokens are out of date)
+      clearTokens();
+      await router.navigate({ to: '/authorize' });
     }
   }
 });

client/cms/src/lib/token.ts

@@ -1,4 +1,4 @@
-import axios from 'axios';
+import { axiosClient, HEADER_API_VERSION } from './axios';
 
 export function setToken(token: string) {
   localStorage.setItem('token', token);
@@ -30,11 +30,11 @@ export function clearTokens() {
 }
 
 export async function doSetTokenByCode(code: string) {
-  const { data } = await axios.post<{ access_token: string; refresh_token: string }>('/api/v1/auth/token', { code });
+  const { data } = await axiosClient.post<{ access_token: string; refresh_token: string }>('/auth/token', { code }, { headers: HEADER_API_VERSION });
   setToken(data.access_token);
   setRefreshToken(data.refresh_token);
 }
 
 export async function doRefreshToken() {
-  return axios.post<{ access_token: string; refresh_token: string }>('/api/v1/auth/refresh', { refresh_token: getRefreshToken() });
+  return axiosClient.post<{ access_token: string; refresh_token: string }>('/auth/refresh', { refresh_token: getRefreshToken() }, { headers: HEADER_API_VERSION });
 }

client/cms/src/routes/authorize.tsx

@@ -1,7 +1,9 @@
 import { createFileRoute } from '@tanstack/react-router';
 import { zodValidator } from '@tanstack/zod-adapter';
+import { isNil } from 'lodash-es';
 import z from 'zod';
 import { LoginForm } from '@/components/login-form';
+import { axiosClient } from '@/lib/axios';
 import { generateOAuthState } from '@/lib/random';
 import { getToken } from '@/lib/token';
 
@@ -22,15 +24,21 @@ export const Route = createFileRoute('/authorize')({
 function RouteComponent() {
   const token = getToken();
   const oauthParams = Route.useSearch();
-  if (token !== null) {
-    const base = new URL(window.location.origin);
-    const url = new URL('/api/v1/auth/redirect', base);
-    url.searchParams.set('client_id', oauthParams.client_id);
-    url.searchParams.set('response_type', oauthParams.response_type);
-    url.searchParams.set('redirect_uri', oauthParams.redirect_uri);
-    url.searchParams.set('state', oauthParams.state);
-    window.location.href = url.toString();
-    return null;
+  /**
+   * Auth by Token Flow
+   */
+  if (!isNil(token)) {
+    axiosClient.post<{ redirect_uri: string }>('/auth/exchange', {
+      client_id: oauthParams.client_id,
+      redirect_uri: oauthParams.redirect_uri,
+      state: oauthParams.state,
+    }).then((res) => {
+      window.location.href = res.data.redirect_uri;
+    }).catch((e) => {
+      console.error(e);
+      return 'Token exchange failed';
+    });
+    return 'Redirecting';
   }
   return (
     <div className="bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">