34 lines
1.4 KiB
TypeScript
34 lines
1.4 KiB
TypeScript
import { useAuth } from "../auth/AuthProvider";
|
|
|
|
export default function AuthStatus() {
|
|
const { enabled, status, user, backendClaims, verifying, signingIn, signInWithGoogle, signOut, error } = useAuth();
|
|
|
|
if (!enabled) {
|
|
return <div className="auth-chip muted">Auth off</div>;
|
|
}
|
|
if (status === "loading") {
|
|
return <div className="auth-chip">Loading auth…</div>;
|
|
}
|
|
if (!user) {
|
|
return (
|
|
<button className="auth-btn" onClick={() => signInWithGoogle().catch(() => {})} disabled={signingIn}>
|
|
<span className="auth-icon">G</span>
|
|
<span>{signingIn ? "開いています…" : "Google でサインイン"}</span>
|
|
</button>
|
|
);
|
|
}
|
|
return (
|
|
<div className="auth-chip signed-in">
|
|
{user.photoURL && <img src={user.photoURL} alt="" className="auth-avatar" referrerPolicy="no-referrer" />}
|
|
<div className="auth-meta">
|
|
<div className="auth-name">{user.displayName || user.email || user.uid}</div>
|
|
<div className="auth-subtle">
|
|
{verifying ? "確認中…" : backendClaims ? "バックエンド認証済み" : "未確認"}
|
|
</div>
|
|
{error && <div className="auth-error">{error}</div>}
|
|
</div>
|
|
<button className="auth-signout" onClick={() => signOut().catch(() => {})}>サインアウト</button>
|
|
</div>
|
|
);
|
|
}
|