refactor(web): restructure auth module and add i18n login messages

- Move auth-client.ts and auth.ts to lib/auth/ directory
- Extract token utilities to lib/auth/token.ts
- Add timeZone (Asia/Seoul) to NextIntlClientProvider and request config
- Add login i18n messages for Google, Facebook, GitHub providers (en/ko/ja)

Amp-Thread-ID: https://ampcode.com/threads/T-019bd002-1ab6-77c9-a93b-ae0e9bfd95e8
Co-authored-by: Amp <amp@ampcode.com>

Author: gracefullight

apps/web/src/app/api/auth/[...all]/route.ts

@@ -1,4 +1,4 @@
 import { toNextJsHandler } from "better-auth/next-js";
-import { auth } from "@/lib/auth";
+import { auth } from "@/lib/auth/auth-server";
 
 export const { GET, POST } = toNextJsHandler(auth.handler);

apps/web/src/app/providers.tsx

@@ -13,7 +13,7 @@ import {
   exchangeOAuthForBackendJwt,
   hasBackendAccessToken,
   useSession,
-} from "@/lib/auth-client";
+} from "@/lib/auth/auth-client";
 import { getQueryClient } from "@/lib/get-query-client";
 
 const TanStackDevTools =
@@ -61,7 +61,7 @@ export function Providers({ children, locale, messages }: ProvidersProps) {
       <QueryClientProvider client={queryClient}>
         <JotaiProvider>
           <BackendJwtBridge />
-          <NextIntlClientProvider locale={locale} messages={messages}>
+          <NextIntlClientProvider locale={locale} messages={messages} timeZone="Asia/Seoul">
             {children}
           </NextIntlClientProvider>
         </JotaiProvider>

apps/web/src/config/messages/en.json

@@ -8,5 +8,10 @@
     "cancel": "Cancel",
     "confirm": "Confirm",
     "delete": "Delete"
-  }
+  },
+  "loginWelcome": "Welcome to Fullstack Starter",
+  "loginSubtitle": "Get started with your social account",
+  "continueWithGoogle": "Continue with Google",
+  "continueWithFacebook": "Continue with Facebook",
+  "continueWithGithub": "Continue with GitHub"
 }

apps/web/src/config/messages/ja.json

@@ -8,5 +8,10 @@
     "cancel": "キャンセル",
     "confirm": "確認",
     "delete": "削除"
-  }
+  },
+  "loginWelcome": "フルスタックスターターへようこそ",
+  "loginSubtitle": "ソーシャルアカウントで簡単に始めましょう",
+  "continueWithGoogle": "Googleで始める",
+  "continueWithFacebook": "Facebookで始める",
+  "continueWithGithub": "GitHubで始める"
 }

apps/web/src/config/messages/ko.json

@@ -8,5 +8,10 @@
     "cancel": "취소",
     "confirm": "확인",
     "delete": "삭제"
-  }
+  },
+  "loginWelcome": "풀스택 스타터에 오신 것을 환영합니다",
+  "loginSubtitle": "소셜 계정으로 간편하게 시작하세요",
+  "continueWithGoogle": "구글로 시작하기",
+  "continueWithFacebook": "페이스북으로 시작하기",
+  "continueWithGithub": "깃허브로 시작하기"
 }

apps/web/src/lib/api-client.ts

@@ -1,41 +1,6 @@
 import axios from "axios";
 import { env } from "@/config/env";
-
-const STORAGE_PREFIX = "fullstack_";
-
-const STORAGE_KEYS = {
-  ACCESS_TOKEN: `${STORAGE_PREFIX}access_token`,
-  REFRESH_TOKEN: `${STORAGE_PREFIX}refresh_token`,
-};
-
-function getAccessToken() {
-  if (typeof window === "undefined") return null;
-  return localStorage.getItem(STORAGE_KEYS.ACCESS_TOKEN);
-}
-
-function getRefreshToken() {
-  if (typeof window === "undefined") return null;
-  return localStorage.getItem(STORAGE_KEYS.REFRESH_TOKEN);
-}
-
-function setAccessToken(token: string) {
-  if (typeof window !== "undefined") {
-    localStorage.setItem(STORAGE_KEYS.ACCESS_TOKEN, token);
-  }
-}
-
-function setRefreshToken(token: string) {
-  if (typeof window !== "undefined") {
-    localStorage.setItem(STORAGE_KEYS.REFRESH_TOKEN, token);
-  }
-}
-
-function clearTokens() {
-  if (typeof window !== "undefined") {
-    localStorage.removeItem(STORAGE_KEYS.ACCESS_TOKEN);
-    localStorage.removeItem(STORAGE_KEYS.REFRESH_TOKEN);
-  }
-}
+import { clearTokens, getAccessToken, getRefreshToken, setAccessToken } from "@/lib/auth/token";
 
 export const apiClient = axios.create({
   baseURL: env.NEXT_PUBLIC_API_URL,
@@ -124,5 +89,3 @@ apiClient.interceptors.response.use(
     return Promise.reject(error);
   }
 );
-
-export { getAccessToken, getRefreshToken, setAccessToken, setRefreshToken, clearTokens };

apps/web/src/lib/auth-client.ts apps/web/src/lib/auth/auth-client.tsapps/web/src/lib/auth-client.ts renamed to apps/web/src/lib/auth/auth-client.ts

@@ -2,13 +2,8 @@
 
 import { createAuthClient } from "better-auth/react";
 import { env } from "@/config/env";
-import {
-  apiClient,
-  clearTokens,
-  getAccessToken,
-  setAccessToken,
-  setRefreshToken,
-} from "@/lib/api-client";
+import { apiClient } from "@/lib/api-client";
+import { clearTokens, getAccessToken, setAccessToken, setRefreshToken } from "@/lib/auth/token";
 
 export type OAuthProviderId = "google" | "github" | "facebook";
 

apps/web/src/lib/auth.ts apps/web/src/lib/auth/auth-server.tsapps/web/src/lib/auth.ts renamed to apps/web/src/lib/auth/auth-server.ts

@@ -0,0 +1,49 @@
+const STORAGE_PREFIX = "fullstack_";
+
+const STORAGE_KEYS = {
+  ACCESS_TOKEN: `${STORAGE_PREFIX}access_token`,
+  REFRESH_TOKEN: `${STORAGE_PREFIX}refresh_token`,
+};
+
+export interface AuthTokens {
+  access_token: string;
+  refresh_token: string;
+}
+
+export function getAccessToken(): string | null {
+  if (typeof window === "undefined") return null;
+  return localStorage.getItem(STORAGE_KEYS.ACCESS_TOKEN);
+}
+
+export function getRefreshToken(): string | null {
+  if (typeof window === "undefined") return null;
+  return localStorage.getItem(STORAGE_KEYS.REFRESH_TOKEN);
+}
+
+export function setAccessToken(token: string): void {
+  if (typeof window !== "undefined") {
+    localStorage.setItem(STORAGE_KEYS.ACCESS_TOKEN, token);
+  }
+}
+
+export function setRefreshToken(token: string): void {
+  if (typeof window !== "undefined") {
+    localStorage.setItem(STORAGE_KEYS.REFRESH_TOKEN, token);
+  }
+}
+
+export function setTokens(tokens: AuthTokens): void {
+  setAccessToken(tokens.access_token);
+  setRefreshToken(tokens.refresh_token);
+}
+
+export function clearTokens(): void {
+  if (typeof window !== "undefined") {
+    localStorage.removeItem(STORAGE_KEYS.ACCESS_TOKEN);
+    localStorage.removeItem(STORAGE_KEYS.REFRESH_TOKEN);
+  }
+}
+
+export function hasTokens(): boolean {
+  return Boolean(getAccessToken()) && Boolean(getRefreshToken());
+}

apps/web/src/lib/auth/token.ts

@@ -9,5 +9,6 @@ export default getRequestConfig(async ({ requestLocale }) => {
   return {
     locale,
     messages: (await import(`@/config/messages/${locale}.json`)).default,
+    timeZone: "Asia/Seoul",
   };
 });