Auth off
;
+ }
+ if (status === "loading") {
+ return Loading auth…
;
+ }
+ if (!user) {
+ return (
+
+ );
+ }
+ return (
+
+ {user.photoURL && 
}
+
+ );
+}
diff --git a/frontend/src/config.ts b/frontend/src/config.ts
index 6d5f2f9..439c245 100644
--- a/frontend/src/config.ts
+++ b/frontend/src/config.ts
@@ -4,6 +4,10 @@ type AppConfig = {
basePath: string;
apiBase: string;
backendOrigin: string;
+ auth: {
+ enabled: boolean;
+ firebase: FirebaseWebConfig;
+ };
intervals: {
timeSyncMs: number;
timeSkewMs: number;
@@ -11,6 +15,13 @@ type AppConfig = {
};
};
+type FirebaseWebConfig = {
+ apiKey: string;
+ authDomain: string;
+ projectId: string;
+ appId: string;
+};
+
export function normalizeBasePath(raw?: string) {
let v = (raw || "/").trim();
if (!v.startsWith("/")) v = `/${v}`;
@@ -40,6 +51,15 @@ const apiBase = normalizeApiBase(import.meta.env.VITE_BACKEND_ORIGIN);
const timeSyncMs = envNumber("VITE_INTERVAL_TIME_SYNC_MS", 60_000);
const timeSkewMs = envNumber("VITE_INTERVAL_TIME_SKEW_MS", 5 * 60_000);
const schedulePollMs = envNumber("VITE_INTERVAL_SCHEDULE_POLL_MS", 60_000);
+const firebaseConfig: FirebaseWebConfig = {
+ apiKey: (import.meta.env.VITE_FIREBASE_API_KEY || "").toString(),
+ authDomain: (import.meta.env.VITE_FIREBASE_AUTH_DOMAIN || "").toString(),
+ projectId: (import.meta.env.VITE_FIREBASE_PROJECT_ID || "").toString(),
+ appId: (import.meta.env.VITE_FIREBASE_APP_ID || "").toString(),
+};
+const authEnabledEnv = (import.meta.env.VITE_AUTH_ENABLED ?? "true").toString().toLowerCase();
+const authEnabled = authEnabledEnv !== "false";
+const hasFirebaseConfig = firebaseConfig.apiKey && firebaseConfig.authDomain && firebaseConfig.projectId && firebaseConfig.appId;
export const config: AppConfig = {
mode: rawMode || "production",
@@ -47,6 +67,10 @@ export const config: AppConfig = {
basePath,
apiBase,
backendOrigin: apiBase, // alias for clarity
+ auth: {
+ enabled: authEnabled && !!hasFirebaseConfig,
+ firebase: firebaseConfig,
+ },
intervals: {
timeSyncMs,
timeSkewMs,
diff --git a/frontend/src/index.css b/frontend/src/index.css
index de0fa48..7ac9fee 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -4,6 +4,8 @@
--text: #e6eef8;
--subtle: #9fb3c8;
--accent: #79c0ff;
+ --success: #3dd598;
+ --danger: #ff6b6b;
--header-h: 56px;
}
@@ -192,6 +194,66 @@ kbd {
letter-spacing: 0.2px;
text-shadow: 0 1px 10px rgba(0,0,0,0.25);
}
+.auth-slot {
+ grid-area: banner;
+ display: flex;
+ justify-content: flex-end;
+}
+.auth-chip {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ padding: 8px 10px;
+ border-radius: 12px;
+ background: rgba(255,255,255,0.06);
+ border: 1px solid rgba(255,255,255,0.08);
+ color: var(--text);
+ font-size: 13px;
+}
+.auth-chip.signed-in {
+ background: rgba(255,255,255,0.08);
+ border-color: rgba(255,255,255,0.12);
+}
+.auth-chip.muted { color: var(--subtle); }
+.auth-avatar {
+ width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
+ border: 1px solid rgba(255,255,255,0.18);
+}
+.auth-meta { display: grid; gap: 2px; }
+.auth-name { font-weight: 700; font-size: 13px; }
+.auth-subtle { color: var(--subtle); font-size: 11px; }
+.auth-error { color: var(--danger); font-size: 11px; }
+.auth-btn {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ padding: 8px 12px;
+ border-radius: 12px;
+ border: 1px solid rgba(255,255,255,0.12);
+ background: rgba(255,255,255,0.08);
+ color: var(--text);
+ cursor: pointer;
+}
+.auth-btn:hover { background: rgba(255,255,255,0.12); }
+.auth-icon {
+ width: 20px; height: 20px;
+ display: grid; place-items: center;
+ background: white;
+ color: #4285f4;
+ border-radius: 6px;
+ font-weight: 800;
+ font-size: 12px;
+}
+.auth-signout {
+ margin-left: 10px;
+ padding: 6px 10px;
+ border-radius: 10px;
+ border: 1px solid rgba(255,255,255,0.12);
+ background: rgba(255,255,255,0.06);
+ color: var(--text);
+ cursor: pointer;
+}
+.auth-signout:hover { background: rgba(255,255,255,0.1); }
/* Sidebar (full height, left) */
.sidebar {
@@ -615,4 +677,5 @@ kbd {
text-decoration: underline;
padding: 0 2px;
}
+.link-btn.danger { color: var(--danger); }
.link-btn:hover { color: #bfe3ff; }
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 42e929d..ab4d4d5 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -4,11 +4,14 @@ import { BrowserRouter } from "react-router-dom";
import App from "./App";
import "./index.css";
import { config } from "./config";
+import { AuthProvider } from "./auth/AuthProvider";
ReactDOM.createRoot(document.getElementById("root")!).render(
+
+
+ {user.displayName || user.email || user.uid}
+
+ {verifying ? "確認中…" : backendClaims ? "バックエンド認証済み" : "未確認"}
+
+ {error && {error}
}
+
@@ -281,9 +311,24 @@ export default function ShowsPage() {
エピソード一覧
-- エピソードを選び、必要に応じて開始時刻（HH:MM）を入力し、「現在のエピソードに設定」を押してください。 -
+
+ エピソードを選び、必要に応じて開始時刻（HH:MM）を入力し、「現在のエピソードに設定」を押してください。
+
+ 削除は認証後のみ実行できます。
+ {!isAuthed && (
+ <>
+ {" "}
+
+ )}
+ {isAuthed && (
+
+ {verifying ? "トークン確認中…" : backendClaims ? "バックエンドで確認済み" : "未確認トークン"}
+
+ )}
+
+
{loading && 読み込み中…
}
{error && (
@@ -308,7 +353,17 @@ export default function ShowsPage() {
setStartTime(s.start_time.slice(0, 5));
}}
>
- 第{s.ep_num}話：{s.ep_title}
+
+
第{s.ep_num}話：{s.ep_title}
+
+ {s.season_name}
開始時刻 {s.start_time.slice(0, 5)}・再生時間 {formatPlaybackLen(s.playback_length)}