@lemondouble/lemon-auth 0.3.2 → 0.4.0

package/README.md

@@ -288,7 +288,9 @@ export default async function RootLayout({ children }: { children: React.ReactNo
     <html lang="ko">
       <body>
         <AuthProvider user={user}>
-          <AutoTokenRefresh />
+          <AutoTokenRefresh fallback={<p>세션 복원 중...</p>}>
+            <p>로그인이 필요합니다</p>
+          </AutoTokenRefresh>
           {children}
         </AuthProvider>
       </body>
@@ -297,21 +299,19 @@ export default async function RootLayout({ children }: { children: React.ReactNo
 }
 ```
 
-`children`을 전달하면 갱신 실패 시 (미인증 상태일 때) fallback UI를 렌더합니다:
-
-```tsx
-<AutoTokenRefresh>
-  <p>로그인 정보를 확인하는 중...</p>
-</AutoTokenRefresh>
-```
+| prop | 타입 | 필수 | 설명 |
+|------|------|------|------|
+| `fallback` | `React.ReactNode` | **필수** | 토큰 갱신 시도 중 렌더할 UI (스피너 등) |
+| `children` | `React.ReactNode` | 선택 | 갱신 실패 시 렌더할 UI (로그인 버튼 등) |
 
 **동작 방식:**
 
 | 상황 | user | AutoTokenRefresh |
 |------|------|-----------------|
 | 정상 요청 (proxy 실행됨) | 있음 | 아무것도 안 함 (skip) |
+| PWA 캐시 히트 + 갱신 시도 중 | 없음 | `fallback` 렌더 |
 | PWA 캐시 히트 + 유효한 refresh_token | 없음 | 갱신 → `router.refresh()` |
-| PWA 캐시 히트 + 만료된 refresh_token | 없음 | 갱신 실패 → children 렌더 |
+| PWA 캐시 히트 + 만료된 refresh_token | 없음 | 갱신 실패 → `children` 렌더 |
 
 ### `loginUrl(redirectUrl)`
 
@@ -465,7 +465,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
     <html lang="ko">
       <body>
         <AuthProvider user={user}>
-          <AutoTokenRefresh />
+          <AutoTokenRefresh fallback={<p>세션 복원 중...</p>} />
           {children}
         </AuthProvider>
       </body>

package/dist/client/index.d.ts

@@ -13,8 +13,9 @@ declare function AuthProvider({ user, children, }: {
 }): react_jsx_runtime.JSX.Element;
 declare function useAuth(): AuthContextValue;
 
-declare function AutoTokenRefresh({ children }: {
+declare function AutoTokenRefresh({ children, fallback, }: {
     children?: React.ReactNode;
+    fallback: React.ReactNode;
 }): string | number | bigint | boolean | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | null;
 
 declare function loginUrl(redirectUrl: string): string;

package/dist/client/index.js

@@ -24,7 +24,7 @@ function useAuth() {
 }
 
 // src/client/auto-token-refresh.tsx
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 
 // src/client/url.ts
@@ -52,15 +52,22 @@ async function refreshToken() {
 }
 
 // src/client/auto-token-refresh.tsx
-function AutoTokenRefresh({ children }) {
+function AutoTokenRefresh({
+  children,
+  fallback
+}) {
   const { isAuthenticated } = useAuth();
   const router = useRouter();
+  const [status, setStatus] = useState("loading");
   useEffect(() => {
     if (isAuthenticated) return;
     let ignore = false;
     refreshToken().then((ok) => {
-      if (!ignore && ok) {
+      if (ignore) return;
+      if (ok) {
         router.refresh();
+      } else {
+        setStatus("failed");
       }
     });
     return () => {
@@ -68,6 +75,7 @@ function AutoTokenRefresh({ children }) {
     };
   }, [isAuthenticated, router]);
   if (isAuthenticated) return null;
+  if (status === "loading") return fallback ?? null;
   return children ?? null;
 }
 export {

package/dist/client/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/client/context.tsx","../../src/client/auto-token-refresh.tsx","../../src/client/url.ts"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext } from \"react\";\nimport type { LemonUser } from \"../types.js\";\n\ninterface AuthContextValue {\n  user: LemonUser | null;\n  isAuthenticated: boolean;\n}\n\nconst AuthContext = createContext<AuthContextValue>({\n  user: null,\n  isAuthenticated: false,\n});\n\nexport function AuthProvider({\n  user,\n  children,\n}: {\n  user: LemonUser | null;\n  children: React.ReactNode;\n}) {\n  return (\n    <AuthContext value={{ user, isAuthenticated: user !== null }}>\n      {children}\n    </AuthContext>\n  );\n}\n\nexport function useAuth(): AuthContextValue {\n  return useContext(AuthContext);\n}\n","\"use client\";\n\nimport { useEffect } from \"react\";\nimport { useRouter } from \"next/navigation\";\nimport { useAuth } from \"./context.js\";\nimport { refreshToken } from \"./url.js\";\n\nexport function AutoTokenRefresh({ children }: { children?: React.ReactNode }) {\n  const { isAuthenticated } = useAuth();\n  const router = useRouter();\n\n  useEffect(() => {\n    if (isAuthenticated) return;\n\n    let ignore = false;\n\n    refreshToken().then((ok) => {\n      if (!ignore && ok) {\n        router.refresh();\n      }\n    });\n\n    return () => {\n      ignore = true;\n    };\n  }, [isAuthenticated, router]);\n\n  if (isAuthenticated) return null;\n  return children ?? null;\n}\n","import {\n  LOGIN_URL,\n  LOGOUT_URL,\n  PROFILE_PAGE_URL,\n  REFRESH_URL,\n} from \"../constants.js\";\n\nexport function loginUrl(redirectUrl: string): string {\n  return `${LOGIN_URL}?redirect_url=${encodeURIComponent(redirectUrl)}`;\n}\n\nexport function profileUrl(redirectUrl?: string): string {\n  if (redirectUrl) {\n    return `${PROFILE_PAGE_URL}?redirect_url=${encodeURIComponent(redirectUrl)}`;\n  }\n  return PROFILE_PAGE_URL;\n}\n\nexport async function logout(): Promise<void> {\n  await fetch(LOGOUT_URL, {\n    method: \"POST\",\n    credentials: \"include\",\n  });\n}\n\nexport async function refreshToken(): Promise<boolean> {\n  const res = await fetch(REFRESH_URL, {\n    method: \"POST\",\n    credentials: \"include\",\n  });\n  return res.ok;\n}\n"],"mappings":";;;;;;;;AAEA,SAAS,eAAe,kBAAkB;AAqBtC;AAbJ,IAAM,cAAc,cAAgC;AAAA,EAClD,MAAM;AAAA,EACN,iBAAiB;AACnB,CAAC;AAEM,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AACF,GAGG;AACD,SACE,oBAAC,eAAY,OAAO,EAAE,MAAM,iBAAiB,SAAS,KAAK,GACxD,UACH;AAEJ;AAEO,SAAS,UAA4B;AAC1C,SAAO,WAAW,WAAW;AAC/B;;;AC7BA,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;;;ACInB,SAAS,SAAS,aAA6B;AACpD,SAAO,GAAG,SAAS,iBAAiB,mBAAmB,WAAW,CAAC;AACrE;AAEO,SAAS,WAAW,aAA8B;AACvD,MAAI,aAAa;AACf,WAAO,GAAG,gBAAgB,iBAAiB,mBAAmB,WAAW,CAAC;AAAA,EAC5E;AACA,SAAO;AACT;AAEA,eAAsB,SAAwB;AAC5C,QAAM,MAAM,YAAY;AAAA,IACtB,QAAQ;AAAA,IACR,aAAa;AAAA,EACf,CAAC;AACH;AAEA,eAAsB,eAAiC;AACrD,QAAM,MAAM,MAAM,MAAM,aAAa;AAAA,IACnC,QAAQ;AAAA,IACR,aAAa;AAAA,EACf,CAAC;AACD,SAAO,IAAI;AACb;;;ADxBO,SAAS,iBAAiB,EAAE,SAAS,GAAmC;AAC7E,QAAM,EAAE,gBAAgB,IAAI,QAAQ;AACpC,QAAM,SAAS,UAAU;AAEzB,YAAU,MAAM;AACd,QAAI,gBAAiB;AAErB,QAAI,SAAS;AAEb,iBAAa,EAAE,KAAK,CAAC,OAAO;AAC1B,UAAI,CAAC,UAAU,IAAI;AACjB,eAAO,QAAQ;AAAA,MACjB;AAAA,IACF,CAAC;AAED,WAAO,MAAM;AACX,eAAS;AAAA,IACX;AAAA,EACF,GAAG,CAAC,iBAAiB,MAAM,CAAC;AAE5B,MAAI,gBAAiB,QAAO;AAC5B,SAAO,YAAY;AACrB;","names":[]}
+{"version":3,"sources":["../../src/client/context.tsx","../../src/client/auto-token-refresh.tsx","../../src/client/url.ts"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext } from \"react\";\nimport type { LemonUser } from \"../types.js\";\n\ninterface AuthContextValue {\n  user: LemonUser | null;\n  isAuthenticated: boolean;\n}\n\nconst AuthContext = createContext<AuthContextValue>({\n  user: null,\n  isAuthenticated: false,\n});\n\nexport function AuthProvider({\n  user,\n  children,\n}: {\n  user: LemonUser | null;\n  children: React.ReactNode;\n}) {\n  return (\n    <AuthContext value={{ user, isAuthenticated: user !== null }}>\n      {children}\n    </AuthContext>\n  );\n}\n\nexport function useAuth(): AuthContextValue {\n  return useContext(AuthContext);\n}\n","\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { useRouter } from \"next/navigation\";\nimport { useAuth } from \"./context.js\";\nimport { refreshToken } from \"./url.js\";\n\nexport function AutoTokenRefresh({\n  children,\n  fallback,\n}: {\n  children?: React.ReactNode;\n  fallback: React.ReactNode;\n}) {\n  const { isAuthenticated } = useAuth();\n  const router = useRouter();\n  const [status, setStatus] = useState<\"loading\" | \"failed\">(\"loading\");\n\n  useEffect(() => {\n    if (isAuthenticated) return;\n\n    let ignore = false;\n\n    refreshToken().then((ok) => {\n      if (ignore) return;\n      if (ok) {\n        router.refresh();\n      } else {\n        setStatus(\"failed\");\n      }\n    });\n\n    return () => {\n      ignore = true;\n    };\n  }, [isAuthenticated, router]);\n\n  if (isAuthenticated) return null;\n  if (status === \"loading\") return fallback ?? null;\n  return children ?? null;\n}\n","import {\n  LOGIN_URL,\n  LOGOUT_URL,\n  PROFILE_PAGE_URL,\n  REFRESH_URL,\n} from \"../constants.js\";\n\nexport function loginUrl(redirectUrl: string): string {\n  return `${LOGIN_URL}?redirect_url=${encodeURIComponent(redirectUrl)}`;\n}\n\nexport function profileUrl(redirectUrl?: string): string {\n  if (redirectUrl) {\n    return `${PROFILE_PAGE_URL}?redirect_url=${encodeURIComponent(redirectUrl)}`;\n  }\n  return PROFILE_PAGE_URL;\n}\n\nexport async function logout(): Promise<void> {\n  await fetch(LOGOUT_URL, {\n    method: \"POST\",\n    credentials: \"include\",\n  });\n}\n\nexport async function refreshToken(): Promise<boolean> {\n  const res = await fetch(REFRESH_URL, {\n    method: \"POST\",\n    credentials: \"include\",\n  });\n  return res.ok;\n}\n"],"mappings":";;;;;;;;AAEA,SAAS,eAAe,kBAAkB;AAqBtC;AAbJ,IAAM,cAAc,cAAgC;AAAA,EAClD,MAAM;AAAA,EACN,iBAAiB;AACnB,CAAC;AAEM,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AACF,GAGG;AACD,SACE,oBAAC,eAAY,OAAO,EAAE,MAAM,iBAAiB,SAAS,KAAK,GACxD,UACH;AAEJ;AAEO,SAAS,UAA4B;AAC1C,SAAO,WAAW,WAAW;AAC/B;;;AC7BA,SAAS,WAAW,gBAAgB;AACpC,SAAS,iBAAiB;;;ACInB,SAAS,SAAS,aAA6B;AACpD,SAAO,GAAG,SAAS,iBAAiB,mBAAmB,WAAW,CAAC;AACrE;AAEO,SAAS,WAAW,aAA8B;AACvD,MAAI,aAAa;AACf,WAAO,GAAG,gBAAgB,iBAAiB,mBAAmB,WAAW,CAAC;AAAA,EAC5E;AACA,SAAO;AACT;AAEA,eAAsB,SAAwB;AAC5C,QAAM,MAAM,YAAY;AAAA,IACtB,QAAQ;AAAA,IACR,aAAa;AAAA,EACf,CAAC;AACH;AAEA,eAAsB,eAAiC;AACrD,QAAM,MAAM,MAAM,MAAM,aAAa;AAAA,IACnC,QAAQ;AAAA,IACR,aAAa;AAAA,EACf,CAAC;AACD,SAAO,IAAI;AACb;;;ADxBO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AACF,GAGG;AACD,QAAM,EAAE,gBAAgB,IAAI,QAAQ;AACpC,QAAM,SAAS,UAAU;AACzB,QAAM,CAAC,QAAQ,SAAS,IAAI,SAA+B,SAAS;AAEpE,YAAU,MAAM;AACd,QAAI,gBAAiB;AAErB,QAAI,SAAS;AAEb,iBAAa,EAAE,KAAK,CAAC,OAAO;AAC1B,UAAI,OAAQ;AACZ,UAAI,IAAI;AACN,eAAO,QAAQ;AAAA,MACjB,OAAO;AACL,kBAAU,QAAQ;AAAA,MACpB;AAAA,IACF,CAAC;AAED,WAAO,MAAM;AACX,eAAS;AAAA,IACX;AAAA,EACF,GAAG,CAAC,iBAAiB,MAAM,CAAC;AAE5B,MAAI,gBAAiB,QAAO;AAC5B,MAAI,WAAW,UAAW,QAAO,YAAY;AAC7C,SAAO,YAAY;AACrB;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lemondouble/lemon-auth",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/LemonDouble/lemon-auth"