@gftdcojp/auth
Version:
✅ Enterprise-grade Auth0 integration for GFTD platform - 90% Complete, High Quality Implementation
41 lines • 2.77 kB
JavaScript
;
'use client';
Object.defineProperty(exports, "__esModule", { value: true });
exports.SafeAuthComponent = SafeAuthComponent;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const client_1 = require("../client");
/**
* Hydration安全な認証コンポーネント
* React BuildError / Hydration Error を防ぐ実装
*
* ✅ UserPayloadプロパティを正しく使用済み
* - user_metadata.name, user_metadata.picture
* - app_metadata.picture フォールバック対応
* - email, sub フォールバック対応
*/
function SafeAuthComponent() {
const { user, isLoading, error } = (0, client_1.useUser)();
const [isMounted, setIsMounted] = (0, react_1.useState)(false);
(0, react_1.useEffect)(() => {
setIsMounted(true);
}, []);
// 🔧 Hydration対策: マウント前は統一された表示
if (!isMounted) {
return (0, jsx_runtime_1.jsx)("div", { className: "text-gray-500", children: "\u8AAD\u307F\u8FBC\u307F\u4E2D..." });
}
if (isLoading) {
return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-blue-600" }), (0, jsx_runtime_1.jsx)("span", { children: "\u8A8D\u8A3C\u78BA\u8A8D\u4E2D..." })] }));
}
if (error) {
return ((0, jsx_runtime_1.jsxs)("div", { className: "text-red-600", children: [(0, jsx_runtime_1.jsx)("p", { children: "\u8A8D\u8A3C\u30A8\u30E9\u30FC\u304C\u767A\u751F\u3057\u307E\u3057\u305F" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => window.location.reload(), className: "text-blue-600 underline", children: "\u518D\u8A66\u884C" })] }));
}
if (user) {
// UserPayloadから表示用データを取得
const displayName = user.user_metadata?.name || user.email || user.sub;
const profilePicture = user.user_metadata?.picture || user.app_metadata?.picture;
return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [profilePicture && ((0, jsx_runtime_1.jsx)("img", { src: profilePicture, alt: "Profile", className: "w-8 h-8 rounded-full" })), (0, jsx_runtime_1.jsxs)("span", { children: ["Welcome, ", displayName, "!"] }), (0, jsx_runtime_1.jsx)("a", { href: "/auth/logout", className: "btn btn-ghost", children: "Logout" })] }));
}
return ((0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2", children: [(0, jsx_runtime_1.jsx)("a", { href: "/auth/login", className: "btn btn-primary", children: "Login" }), (0, jsx_runtime_1.jsx)("a", { href: "/auth/login?screen_hint=signup", className: "btn btn-secondary", children: "Sign Up" })] }));
}
//# sourceMappingURL=SafeAuthComponent.js.map