strapi-plugin-firebase-authentication
Version:
Allows easy integration between clients utilizing Firebase for authentication and Strapi
1,028 lines • 52.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const m = require("react");
const api = require("./api-Bg075IIT.js");
const admin = require("@strapi/strapi/admin");
const reactRouterDom = require("react-router-dom");
function SettingsPage() {
const { toggleNotification } = admin.useNotification();
const [firebaseJsonValue, setFirebaseJsonValue] = m.useState(null);
const [firebaseJsonValueInput, setFirebaseJsonValueInput] = m.useState("");
const [firebaseWebApiKey, setFirebaseWebApiKey] = m.useState("");
const [showOptionalSettings, setShowOptionalSettings] = m.useState(false);
const [passwordRequirementsRegex, setPasswordRequirementsRegex] = m.useState("^.{6,}$");
const [passwordRequirementsMessage, setPasswordRequirementsMessage] = m.useState(
"Password must be at least 6 characters long"
);
const [passwordResetUrl, setPasswordResetUrl] = m.useState("http://localhost:3000/reset-password");
const [passwordResetEmailSubject, setPasswordResetEmailSubject] = m.useState("Reset Your Password");
const [enableMagicLink, setEnableMagicLink] = m.useState(false);
const [magicLinkUrl, setMagicLinkUrl] = m.useState("http://localhost:1338/verify-magic-link.html");
const [magicLinkEmailSubject, setMagicLinkEmailSubject] = m.useState("Sign in to Your Application");
const [magicLinkExpiryHours, setMagicLinkExpiryHours] = m.useState(1);
const [emailVerificationUrl, setEmailVerificationUrl] = m.useState(
"http://localhost:3000/verify-email"
);
const [emailVerificationEmailSubject, setEmailVerificationEmailSubject] = m.useState("Verify Your Email");
const [includeCredentialsInPasswordResetLink, setIncludeCredentialsInPasswordResetLink] = m.useState(false);
const [includeCredentialsInVerificationLink, setIncludeCredentialsInVerificationLink] = m.useState(false);
const [loading, setLoading] = m.useState(true);
const [showEditModal, setShowEditModal] = m.useState(false);
const [editWebApiKey, setEditWebApiKey] = m.useState("");
reactRouterDom.useNavigate();
const handleRetrieveFirebaseJsonConfig = () => {
setLoading(true);
api.getFirebaseConfig().then((data) => {
setLoading(false);
if (!data || Array.isArray(data) && data.length === 0) {
setFirebaseJsonValue(null);
setFirebaseJsonValueInput("");
return;
}
setFirebaseJsonValue(data);
setFirebaseJsonValueInput(typeof data === "string" ? data : JSON.stringify(data));
setFirebaseWebApiKey(data?.firebaseWebApiKey || "");
setPasswordRequirementsRegex(data?.passwordRequirementsRegex || "^.{6,}$");
setPasswordRequirementsMessage(
data?.passwordRequirementsMessage || "Password must be at least 6 characters long"
);
setPasswordResetUrl(data?.passwordResetUrl || "http://localhost:3000/reset-password");
setPasswordResetEmailSubject(data?.passwordResetEmailSubject || "Reset Your Password");
setEnableMagicLink(data?.enableMagicLink || false);
setMagicLinkUrl(data?.magicLinkUrl || "http://localhost:1338/verify-magic-link.html");
setMagicLinkEmailSubject(data?.magicLinkEmailSubject || "Sign in to Your Application");
setMagicLinkExpiryHours(data?.magicLinkExpiryHours || 1);
setEmailVerificationUrl(data?.emailVerificationUrl || "http://localhost:3000/verify-email");
setEmailVerificationEmailSubject(data?.emailVerificationEmailSubject || "Verify Your Email");
setIncludeCredentialsInPasswordResetLink(data?.includeCredentialsInPasswordResetLink || false);
setIncludeCredentialsInVerificationLink(data?.includeCredentialsInVerificationLink || false);
}).catch((error) => {
setLoading(false);
console.error("Error retrieving Firebase config:", error);
setFirebaseJsonValue(null);
setFirebaseJsonValueInput("");
});
};
m.useEffect(() => {
handleRetrieveFirebaseJsonConfig();
}, []);
const handleDeleteFirebaseJsonConfig = async () => {
try {
setLoading(true);
await api.delFirebaseConfig();
setFirebaseJsonValue(null);
setFirebaseJsonValueInput("");
setFirebaseWebApiKey("");
setPasswordRequirementsRegex("^.{6,}$");
setPasswordRequirementsMessage("Password must be at least 6 characters long");
setPasswordResetUrl("http://localhost:3000/reset-password");
setPasswordResetEmailSubject("Reset Your Password");
setEnableMagicLink(false);
setMagicLinkUrl("http://localhost:1338/verify-magic-link.html");
setMagicLinkEmailSubject("Sign in to Your Application");
setMagicLinkExpiryHours(1);
setEmailVerificationUrl("http://localhost:3000/verify-email");
setEmailVerificationEmailSubject("Verify Your Email");
setIncludeCredentialsInPasswordResetLink(false);
setIncludeCredentialsInVerificationLink(false);
setLoading(false);
toggleNotification({
type: "success",
message: "Firebase configuration has successfully been removed"
});
} catch (err) {
setLoading(false);
toggleNotification({
type: "warning",
message: "An error occurred, please try again"
});
}
};
const handleFirebaseJsonSubmit = async () => {
try {
setLoading(true);
const jsonToSubmit = typeof firebaseJsonValueInput === "string" ? firebaseJsonValueInput : JSON.stringify(firebaseJsonValueInput);
const data = await api.saveFirebaseConfig(jsonToSubmit, firebaseWebApiKey, {
passwordRequirementsRegex,
passwordRequirementsMessage,
passwordResetUrl,
passwordResetEmailSubject,
enableMagicLink,
magicLinkUrl,
magicLinkEmailSubject,
magicLinkExpiryHours,
emailVerificationUrl,
emailVerificationEmailSubject,
includeCredentialsInPasswordResetLink,
includeCredentialsInVerificationLink
});
if (!data || !data.firebase_config_json) {
throw new Error("Invalid response from server");
}
setFirebaseJsonValue(data);
setLoading(false);
toggleNotification({
type: "success",
message: "Data submitted successfully"
});
} catch (error) {
console.error("Error submitting Firebase JSON:", error);
toggleNotification({
type: "warning",
message: "Something went wrong"
});
setLoading(false);
}
};
const handleSavePasswordSettings = async () => {
try {
setLoading(true);
const data = await api.savePasswordSettings({
passwordRequirementsRegex,
passwordRequirementsMessage,
passwordResetUrl,
passwordResetEmailSubject,
enableMagicLink,
magicLinkUrl,
magicLinkEmailSubject,
magicLinkExpiryHours,
emailVerificationUrl,
emailVerificationEmailSubject,
includeCredentialsInPasswordResetLink,
includeCredentialsInVerificationLink
});
if (data) {
setPasswordRequirementsRegex(data.passwordRequirementsRegex || passwordRequirementsRegex);
setPasswordRequirementsMessage(data.passwordRequirementsMessage || passwordRequirementsMessage);
setPasswordResetUrl(data.passwordResetUrl || passwordResetUrl);
setPasswordResetEmailSubject(data.passwordResetEmailSubject || passwordResetEmailSubject);
setEnableMagicLink(data.enableMagicLink || enableMagicLink);
setMagicLinkUrl(data.magicLinkUrl || magicLinkUrl);
setMagicLinkEmailSubject(data.magicLinkEmailSubject || magicLinkEmailSubject);
setMagicLinkExpiryHours(data.magicLinkExpiryHours || magicLinkExpiryHours);
setEmailVerificationUrl(data.emailVerificationUrl || emailVerificationUrl);
setEmailVerificationEmailSubject(data.emailVerificationEmailSubject || emailVerificationEmailSubject);
setIncludeCredentialsInPasswordResetLink(
data.includeCredentialsInPasswordResetLink ?? includeCredentialsInPasswordResetLink
);
setIncludeCredentialsInVerificationLink(
data.includeCredentialsInVerificationLink ?? includeCredentialsInVerificationLink
);
}
setLoading(false);
toggleNotification({
type: "success",
message: "Password settings saved successfully"
});
} catch (error) {
console.error("Error saving password settings:", error);
toggleNotification({
type: "warning",
message: "Failed to save password settings"
});
setLoading(false);
}
};
const handleSaveMagicLinkSettings = async () => {
try {
setLoading(true);
const data = await api.savePasswordSettings({
passwordRequirementsRegex,
passwordRequirementsMessage,
passwordResetUrl,
passwordResetEmailSubject,
enableMagicLink,
magicLinkUrl,
magicLinkEmailSubject,
magicLinkExpiryHours,
emailVerificationUrl,
emailVerificationEmailSubject,
includeCredentialsInPasswordResetLink,
includeCredentialsInVerificationLink
});
if (data) {
setEnableMagicLink(data.enableMagicLink || enableMagicLink);
setMagicLinkUrl(data.magicLinkUrl || magicLinkUrl);
setMagicLinkEmailSubject(data.magicLinkEmailSubject || magicLinkEmailSubject);
setMagicLinkExpiryHours(data.magicLinkExpiryHours || magicLinkExpiryHours);
setEmailVerificationUrl(data.emailVerificationUrl || emailVerificationUrl);
setEmailVerificationEmailSubject(data.emailVerificationEmailSubject || emailVerificationEmailSubject);
}
setLoading(false);
toggleNotification({
type: "success",
message: "Magic link settings saved successfully"
});
} catch (error) {
console.error("Error saving magic link settings:", error);
toggleNotification({
type: "warning",
message: "Failed to save magic link settings"
});
setLoading(false);
}
};
const handleSaveEmailVerificationSettings = async () => {
try {
setLoading(true);
const data = await api.savePasswordSettings({
passwordRequirementsRegex,
passwordRequirementsMessage,
passwordResetUrl,
passwordResetEmailSubject,
enableMagicLink,
magicLinkUrl,
magicLinkEmailSubject,
magicLinkExpiryHours,
emailVerificationUrl,
emailVerificationEmailSubject,
includeCredentialsInPasswordResetLink,
includeCredentialsInVerificationLink
});
if (data) {
setEmailVerificationUrl(data.emailVerificationUrl || emailVerificationUrl);
setEmailVerificationEmailSubject(data.emailVerificationEmailSubject || emailVerificationEmailSubject);
setIncludeCredentialsInVerificationLink(
data.includeCredentialsInVerificationLink ?? includeCredentialsInVerificationLink
);
}
setLoading(false);
toggleNotification({
type: "success",
message: "Email verification settings saved successfully"
});
} catch (error) {
console.error("Error saving email verification settings:", error);
toggleNotification({
type: "warning",
message: "Failed to save email verification settings"
});
setLoading(false);
}
};
const handleAddWebApiKey = () => {
setEditWebApiKey("");
setShowEditModal(true);
};
const handleRemoveWebApiKey = async () => {
const confirmed = window.confirm(
"Are you sure you want to remove the Web API Key? The emailLogin endpoint will stop working until you add it again."
);
if (!confirmed) return;
try {
setLoading(true);
const jsonToSubmit = firebaseJsonValue.firebaseConfigJson;
const data = await api.saveFirebaseConfig(jsonToSubmit, "", {
passwordRequirementsRegex,
passwordRequirementsMessage,
passwordResetUrl,
passwordResetEmailSubject,
enableMagicLink,
magicLinkUrl,
magicLinkEmailSubject,
magicLinkExpiryHours,
emailVerificationUrl,
emailVerificationEmailSubject,
includeCredentialsInPasswordResetLink,
includeCredentialsInVerificationLink
});
if (!data || !data.firebase_config_json) {
throw new Error("Invalid response from server");
}
setFirebaseJsonValue(data);
setFirebaseWebApiKey("");
setLoading(false);
toggleNotification({
type: "success",
message: "Web API Key removed successfully"
});
} catch (error) {
console.error("Error removing Web API Key:", error);
toggleNotification({
type: "warning",
message: "Failed to remove Web API Key"
});
setLoading(false);
}
};
const handleSaveEditConfiguration = async () => {
try {
setLoading(true);
const jsonToSubmit = firebaseJsonValue.firebaseConfigJson;
const data = await api.saveFirebaseConfig(jsonToSubmit, editWebApiKey, {
passwordRequirementsRegex,
passwordRequirementsMessage,
passwordResetUrl,
passwordResetEmailSubject,
enableMagicLink,
magicLinkUrl,
magicLinkEmailSubject,
magicLinkExpiryHours,
emailVerificationUrl,
emailVerificationEmailSubject,
includeCredentialsInPasswordResetLink,
includeCredentialsInVerificationLink
});
if (!data || !data.firebase_config_json) {
throw new Error("Invalid response from server");
}
setFirebaseJsonValue(data);
setFirebaseWebApiKey(editWebApiKey);
setShowEditModal(false);
setLoading(false);
toggleNotification({
type: "success",
message: "Web API Key added successfully"
});
} catch (error) {
console.error("Error adding Web API Key:", error);
toggleNotification({
type: "warning",
message: "Failed to add Web API Key"
});
setLoading(false);
}
};
if (loading) {
return /* @__PURE__ */ jsxRuntime.jsx(admin.Page.Loading, {});
}
const isJsonString = (str) => {
try {
JSON.parse(str);
return true;
} catch (e) {
return false;
}
};
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsx(api.T, { style: { padding: 32 }, direction: "column", alignItems: "flex-start", gap: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(api.R, { style: { width: "100%" }, children: [
/* @__PURE__ */ jsxRuntime.jsxs(api.R, { marginBottom: 6, padding: 4, background: "neutral0", borderRadius: "4px", shadow: "filterShadow", children: [
/* @__PURE__ */ jsxRuntime.jsx(api.E, { variant: "alpha", as: "h2", style: { display: "block", marginBottom: "8px" }, children: "Firebase Authentication" }),
/* @__PURE__ */ jsxRuntime.jsx(
api.E,
{
variant: "omega",
textColor: "neutral600",
style: { display: "block", marginBottom: "24px" },
children: "Configure your Firebase service account (API key optional)"
}
),
(() => {
return !firebaseJsonValue || !firebaseJsonValue.firebaseConfigJson ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsxs(api.R, { children: [
/* @__PURE__ */ jsxRuntime.jsx(
api.E,
{
variant: "omega",
fontWeight: "bold",
style: { display: "block", marginBottom: "8px" },
children: "Firebase Service Account JSON *"
}
),
/* @__PURE__ */ jsxRuntime.jsx(
api.Jm,
{
value: firebaseJsonValueInput,
height: 400,
style: { height: 400 },
onChange: setFirebaseJsonValueInput,
error: firebaseJsonValueInput && !isJsonString(firebaseJsonValueInput) ? "Please enter a valid JSON string" : ""
}
)
] }),
/* @__PURE__ */ jsxRuntime.jsxs(api.R, { marginTop: 4, children: [
/* @__PURE__ */ jsxRuntime.jsxs(
api.Nn,
{
variant: "tertiary",
onClick: () => setShowOptionalSettings(!showOptionalSettings),
style: { marginBottom: 16 },
children: [
showOptionalSettings ? "▼" : "▶",
" Optional: Email/Password Authentication"
]
}
),
showOptionalSettings && /* @__PURE__ */ jsxRuntime.jsxs(api.R, { padding: 3, background: "neutral100", borderRadius: "4px", children: [
/* @__PURE__ */ jsxRuntime.jsx(api.E, { variant: "omega", marginBottom: 3, children: "The Web API Key is only needed if you want to use the emailLogin endpoint. Most users should authenticate with Firebase Client SDK instead." }),
/* @__PURE__ */ jsxRuntime.jsxs(api.R, { marginTop: 3, children: [
/* @__PURE__ */ jsxRuntime.jsx(
api.E,
{
variant: "omega",
fontWeight: "bold",
style: { display: "block", marginBottom: "8px" },
children: "Firebase Web API Key (Optional)"
}
),
/* @__PURE__ */ jsxRuntime.jsx(
api.G0,
{
name: "firebaseWebApiKey",
value: firebaseWebApiKey,
onChange: (e) => setFirebaseWebApiKey(e.target.value),
placeholder: "AIzaSy... (your Web API Key)",
hint: "Only required for email/password login endpoint"
}
)
] }),
/* @__PURE__ */ jsxRuntime.jsxs(api.R, { marginTop: 3, padding: 2, background: "primary100", borderRadius: "4px", children: [
/* @__PURE__ */ jsxRuntime.jsx(api.E, { variant: "omega", fontWeight: "bold", children: "📍 Where to find your Web API Key:" }),
/* @__PURE__ */ jsxRuntime.jsxs("ol", { style: { marginLeft: 20, marginTop: 8 }, children: [
/* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(api.E, { variant: "omega", children: [
"Go to",
" ",
/* @__PURE__ */ jsxRuntime.jsx(
"a",
{
href: "https://console.firebase.google.com",
target: "_blank",
rel: "noreferrer",
children: "Firebase Console"
}
)
] }) }),
/* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(api.E, { variant: "omega", children: "Select your project" }) }),
/* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(api.E, { variant: "omega", children: [
"Click the gear icon → ",
/* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Project Settings" })
] }) }),
/* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(api.E, { variant: "omega", children: [
"In the ",
/* @__PURE__ */ jsxRuntime.jsx("strong", { children: "General" }),
" tab, scroll down to ",
/* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Your apps" })
] }) }),
/* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(api.E, { variant: "omega", children: [
"Find ",
/* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Web API Key" }),
" (looks like: AIzaSyB3Xd...)"
] }) })
] })
] }),
/* @__PURE__ */ jsxRuntime.jsx(api.R, { marginTop: 3, padding: 2, background: "warning100", borderRadius: "4px", children: /* @__PURE__ */ jsxRuntime.jsxs(api.E, { variant: "omega", textColor: "warning700", children: [
"⚠️ ",
/* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Recommendation:" }),
" Instead of using emailLogin endpoint, authenticate users on the client side using Firebase SDK and exchange the ID token. This is more secure and doesn't require the Web API Key configuration."
] }) })
] })
] }),
/* @__PURE__ */ jsxRuntime.jsx(
api.T,
{
style: {
marginTop: 24,
width: "100%"
},
justifyContent: "flex-end",
children: /* @__PURE__ */ jsxRuntime.jsx(
api.Nn,
{
size: "L",
onClick: handleFirebaseJsonSubmit,
disabled: !isJsonString(firebaseJsonValueInput),
children: "Submit Firebase Config"
}
)
}
),
/* @__PURE__ */ jsxRuntime.jsxs(api.R, { marginTop: 6, paddingTop: 4, style: { borderTop: "1px solid #eaeaef" }, children: [
/* @__PURE__ */ jsxRuntime.jsx(api.E, { variant: "beta", marginBottom: 3, children: "How to setup Firebase Service Account JSON:" }),
/* @__PURE__ */ jsxRuntime.jsxs(api.R, { padding: 3, background: "warning100", borderRadius: "4px", marginBottom: 4, children: [
/* @__PURE__ */ jsxRuntime.jsx(api.E, { variant: "omega", fontWeight: "bold", textColor: "warning700", children: "⚠️ Security Warning" }),
/* @__PURE__ */ jsxRuntime.jsx(api.E, { variant: "omega", textColor: "warning700", marginTop: 1, children: "The Service Account JSON contains sensitive credentials with full admin access to your Firebase project. Never commit this file to version control or share it publicly." })
] }),
/* @__PURE__ */ jsxRuntime.jsx(api.R, { marginLeft: 4, children: /* @__PURE__ */ jsxRuntime.jsxs("ol", { style: { listStyle: "decimal", paddingLeft: "20px" }, children: [
/* @__PURE__ */ jsxRuntime.jsx("li", { style: { marginTop: 16 }, children: /* @__PURE__ */ jsxRuntime.jsxs(api.E, { children: [
"Go to the",
" ",
/* @__PURE__ */ jsxRuntime.jsx(
"a",
{
href: "https://console.firebase.google.com/project/_/settings/serviceaccounts/adminsdk",
target: "_blank",
rel: "noreferrer",
children: "Service Accounts tab"
}
),
" ",
"in your Firebase Console (Project Settings → Service Accounts)"
] }) }),
/* @__PURE__ */ jsxRuntime.jsx("li", { style: { marginTop: 16 }, children: /* @__PURE__ */ jsxRuntime.jsxs(api.E, { children: [
"Click the ",
/* @__PURE__ */ jsxRuntime.jsx("strong", { children: '"Generate New Private Key"' }),
" button"
] }) }),
/* @__PURE__ */ jsxRuntime.jsx("li", { style: { marginTop: 16 }, children: /* @__PURE__ */ jsxRuntime.jsxs(api.E, { children: [
"Confirm by clicking ",
/* @__PURE__ */ jsxRuntime.jsx("strong", { children: '"Generate Key"' }),
" in the confirmation dialog"
] }) }),
/* @__PURE__ */ jsxRuntime.jsx("li", { style: { marginTop: 16 }, children: /* @__PURE__ */ jsxRuntime.jsxs(api.E, { children: [
"A JSON file will be downloaded (e.g.,",
" ",
/* @__PURE__ */ jsxRuntime.jsx("code", { children: "your-project-firebase-adminsdk-xxxxx.json" }),
")"
] }) }),
/* @__PURE__ */ jsxRuntime.jsx("li", { style: { marginTop: 16 }, children: /* @__PURE__ */ jsxRuntime.jsxs(api.E, { children: [
"Open the downloaded JSON file, copy its ",
/* @__PURE__ */ jsxRuntime.jsx("strong", { children: "entire contents" }),
', and paste it in the "Firebase Service Account JSON" field above'
] }) }),
/* @__PURE__ */ jsxRuntime.jsx("li", { style: { marginTop: 16 }, children: /* @__PURE__ */ jsxRuntime.jsxs(api.E, { children: [
"Click ",
/* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Submit" }),
" to save your configuration"
] }) }),
/* @__PURE__ */ jsxRuntime.jsx("li", { style: { marginTop: 16 }, children: /* @__PURE__ */ jsxRuntime.jsxs(api.E, { children: [
/* @__PURE__ */ jsxRuntime.jsx("em", { children: "(Optional)" }),
' If you need email/password authentication, expand "Optional: Email/Password Authentication" and add your Web API Key'
] }) })
] }) }),
/* @__PURE__ */ jsxRuntime.jsxs(api.R, { marginTop: 4, padding: 3, background: "neutral100", borderRadius: "4px", children: [
/* @__PURE__ */ jsxRuntime.jsx(api.E, { variant: "omega", fontWeight: "bold", children: "📝 Note: Service Account JSON vs Web App Config" }),
/* @__PURE__ */ jsxRuntime.jsxs(api.E, { variant: "omega", marginTop: 2, children: [
/* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Service Account JSON" }),
" (what you need here): Contains",
" ",
/* @__PURE__ */ jsxRuntime.jsx("code", { children: "private_key" }),
", ",
/* @__PURE__ */ jsxRuntime.jsx("code", { children: "client_email" }),
", etc. Used for server-side Firebase Admin SDK operations. Download from ",
/* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Service Accounts tab" }),
"."
] }),
/* @__PURE__ */ jsxRuntime.jsxs(api.E, { variant: "omega", marginTop: 2, children: [
/* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Web App Config" }),
" (NOT what you need): Contains ",
/* @__PURE__ */ jsxRuntime.jsx("code", { children: "apiKey" }),
",",
" ",
/* @__PURE__ */ jsxRuntime.jsx("code", { children: "authDomain" }),
", etc. Used for client-side web apps. Found in SDK snippet - this is the wrong file!"
] })
] })
] })
] }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(api.R, { padding: 4, background: "neutral0", children: [
/* @__PURE__ */ jsxRuntime.jsxs(api.R, { marginBottom: 4, children: [
/* @__PURE__ */ jsxRuntime.jsx(api.E, { variant: "delta", fontWeight: "bold", style: { marginBottom: "8px" }, children: "Service Account Configuration" }),
/* @__PURE__ */ jsxRuntime.jsx(api.R, { marginBottom: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(api.E, { variant: "pi", textColor: "neutral600", component: "span", children: [
/* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Required" }),
" - Enables Firebase Admin SDK for server-side authentication"
] }) }),
/* @__PURE__ */ jsxRuntime.jsxs(api.T, { gap: 2, alignItems: "center", justifyContent: "space-between", children: [
/* @__PURE__ */ jsxRuntime.jsxs(api.T, { gap: 2, alignItems: "center", children: [
/* @__PURE__ */ jsxRuntime.jsxs(api.E, { variant: "omega", textColor: "neutral600", children: [
"Project:",
" ",
firebaseJsonValue?.firebaseConfigJson && (() => {
try {
const config = JSON.parse(firebaseJsonValue.firebaseConfigJson);
return config.project_id || config.projectId || "Unknown Project";
} catch (e) {
return "Invalid Config";
}
})()
] }),
/* @__PURE__ */ jsxRuntime.jsx(api.Is, { backgroundColor: "success200", textColor: "success700", size: "S", children: "✓ CONFIGURED" })
] }),
/* @__PURE__ */ jsxRuntime.jsx(api.Nn, { variant: "danger-light", size: "S", onClick: handleDeleteFirebaseJsonConfig, children: "Delete Config" })
] })
] }),
/* @__PURE__ */ jsxRuntime.jsxs(api.R, { paddingTop: 4, style: { borderTop: "1px solid #eaeaef" }, children: [
/* @__PURE__ */ jsxRuntime.jsx(api.E, { variant: "delta", fontWeight: "bold", style: { marginBottom: "8px" }, children: "Web API Key Configuration" }),
/* @__PURE__ */ jsxRuntime.jsx(api.R, { marginBottom: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(api.E, { variant: "pi", textColor: "neutral600", component: "span", children: [
/* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Optional" }),
" - Only needed for email/password login via emailLogin endpoint"
] }) }),
/* @__PURE__ */ jsxRuntime.jsxs(api.T, { gap: 2, alignItems: "center", justifyContent: "space-between", children: [
/* @__PURE__ */ jsxRuntime.jsxs(api.T, { gap: 2, alignItems: "center", children: [
firebaseWebApiKey?.trim() && /* @__PURE__ */ jsxRuntime.jsx(api.E, { variant: "omega", textColor: "neutral600", children: `${firebaseWebApiKey.substring(0, 10)}...` }),
firebaseWebApiKey?.trim() ? /* @__PURE__ */ jsxRuntime.jsx(api.Is, { backgroundColor: "success200", textColor: "success700", size: "S", children: "✓ CONFIGURED" }) : /* @__PURE__ */ jsxRuntime.jsx(api.Is, { backgroundColor: "neutral200", textColor: "neutral700", size: "S", children: "NOT SET" })
] }),
firebaseWebApiKey?.trim() ? /* @__PURE__ */ jsxRuntime.jsx(api.Nn, { variant: "danger-light", size: "S", onClick: handleRemoveWebApiKey, children: "Delete Config" }) : /* @__PURE__ */ jsxRuntime.jsx(api.Nn, { variant: "secondary", size: "S", onClick: handleAddWebApiKey, children: "+ Add Web API Key" })
] })
] })
] }) });
})()
] }),
/* @__PURE__ */ jsxRuntime.jsxs(api.R, { padding: 4, background: "neutral0", borderRadius: "4px", shadow: "filterShadow", marginBottom: 6, children: [
/* @__PURE__ */ jsxRuntime.jsx(api.E, { variant: "alpha", as: "h2", style: { display: "block", marginBottom: "8px" }, children: "Password Reset Settings" }),
/* @__PURE__ */ jsxRuntime.jsx(
api.E,
{
variant: "omega",
textColor: "neutral600",
style: { display: "block", marginBottom: "24px" },
children: "Configure password requirements and email settings for password reset functionality"
}
),
/* @__PURE__ */ jsxRuntime.jsxs(api.R, { marginBottom: 3, children: [
/* @__PURE__ */ jsxRuntime.jsx(api.E, { variant: "omega", fontWeight: "bold", style: { display: "block", marginBottom: "8px" }, children: "Password Requirements (Regex)" }),
/* @__PURE__ */ jsxRuntime.jsx(
api.G0,
{
name: "passwordRequirementsRegex",
value: passwordRequirementsRegex,
onChange: (e) => setPasswordRequirementsRegex(e.target.value),
placeholder: "^.{6,}$",
hint: "Regular expression to validate password strength. Default: ^.{6,}$ (min 6 characters)"
}
)
] }),
/* @__PURE__ */ jsxRuntime.jsxs(api.R, { marginBottom: 3, children: [
/* @__PURE__ */ jsxRuntime.jsx(api.E, { variant: "omega", fontWeight: "bold", style: { display: "block", marginBottom: "8px" }, children: "Password Requirements Message" }),
/* @__PURE__ */ jsxRuntime.jsx(
api.M1,
{
name: "passwordRequirementsMessage",
value: passwordRequirementsMessage,
onChange: (e) => setPasswordRequirementsMessage(e.target.value),
placeholder: "Password must be at least 6 characters long",
hint: "Error message shown when password doesn't meet requirements"
}
)
] }),
/* @__PURE__ */ jsxRuntime.jsxs(api.R, { marginBottom: 4, padding: 3, background: "neutral100", borderRadius: "4px", children: [
/* @__PURE__ */ jsxRuntime.jsx(
api.E,
{
variant: "omega",
fontWeight: "bold",
style: { display: "block", marginBottom: "12px" },
children: "Common Password Patterns:"
}
),
/* @__PURE__ */ jsxRuntime.jsxs(api.R, { marginLeft: 2, children: [
/* @__PURE__ */ jsxRuntime.jsxs(api.E, { variant: "omega", style: { display: "block", marginBottom: "8px" }, children: [
"• ",
/* @__PURE__ */ jsxRuntime.jsx("code", { children: "^.{6,}$" }),
" - Minimum 6 characters (simple)"
] }),
/* @__PURE__ */ jsxRuntime.jsxs(api.E, { variant: "omega", style: { display: "block", marginBottom: "8px" }, children: [
"• ",
/* @__PURE__ */ jsxRuntime.jsx("code", { children: "^.{8,}$" }),
" - Minimum 8 characters"
] }),
/* @__PURE__ */ jsxRuntime.jsxs(api.E, { variant: "omega", style: { display: "block", marginBottom: "8px" }, children: [
"• ",
/* @__PURE__ */ jsxRuntime.jsx("code", { children: "^(?=.*[A-Za-z])(?=.*\\d)[A-Za-z\\d]{8,}$" }),
" - At least 8 chars with letters and numbers"
] }),
/* @__PURE__ */ jsxRuntime.jsxs(api.E, { variant: "omega", style: { display: "block" }, children: [
"• ",
/* @__PURE__ */ jsxRuntime.jsx("code", { children: "^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)(?=.*[@$!%*?&])[A-Za-z\\d@$!%*?&]{8,}$" }),
" - Complex (upper, lower, number, special)"
] })
] })
] }),
/* @__PURE__ */ jsxRuntime.jsxs(api.R, { marginBottom: 3, children: [
/* @__PURE__ */ jsxRuntime.jsx(api.E, { variant: "omega", fontWeight: "bold", style: { display: "block", marginBottom: "8px" }, children: "Password Reset URL *" }),
/* @__PURE__ */ jsxRuntime.jsx(
api.G0,
{
name: "passwordResetUrl",
value: passwordResetUrl,
onChange: (e) => setPasswordResetUrl(e.target.value),
placeholder: "https://yourapp.com/reset-password",
hint: "URL where users will reset their password (your frontend application)",
required: true
}
)
] }),
/* @__PURE__ */ jsxRuntime.jsxs(api.R, { marginBottom: 3, children: [
/* @__PURE__ */ jsxRuntime.jsx(api.E, { variant: "omega", fontWeight: "bold", style: { display: "block", marginBottom: "8px" }, children: "Reset Email Subject" }),
/* @__PURE__ */ jsxRuntime.jsx(
api.G0,
{
name: "passwordResetEmailSubject",
value: passwordResetEmailSubject,
onChange: (e) => setPasswordResetEmailSubject(e.target.value),
placeholder: "Reset Your Password",
hint: "Subject line for password reset emails"
}
)
] }),
/* @__PURE__ */ jsxRuntime.jsxs(api.R, { marginBottom: 3, children: [
/* @__PURE__ */ jsxRuntime.jsx(api.E, { variant: "omega", fontWeight: "bold", style: { display: "block", marginBottom: "8px" }, children: "Include Login Credentials in Link" }),
/* @__PURE__ */ jsxRuntime.jsxs(api.T, { alignItems: "center", gap: 2, children: [
/* @__PURE__ */ jsxRuntime.jsx(
api.D1,
{
name: "includeCredentialsInPasswordResetLink",
checked: includeCredentialsInPasswordResetLink,
onChange: (e) => setIncludeCredentialsInPasswordResetLink(e.target.checked)
}
),
/* @__PURE__ */ jsxRuntime.jsx(api.E, { variant: "omega", textColor: "neutral600", children: "Append a Firebase custom token to the reset link, allowing users to be automatically logged in" })
] })
] }),
/* @__PURE__ */ jsxRuntime.jsx(
api.T,
{
style: {
marginTop: 24,
width: "100%"
},
justifyContent: "flex-end",
children: /* @__PURE__ */ jsxRuntime.jsx(api.Nn, { size: "L", variant: "secondary", onClick: handleSavePasswordSettings, children: "Save Password Settings" })
}
)
] }),
/* @__PURE__ */ jsxRuntime.jsxs(api.R, { padding: 4, background: "neutral0", borderRadius: "4px", shadow: "filterShadow", marginBottom: 6, children: [
/* @__PURE__ */ jsxRuntime.jsx(api.E, { variant: "alpha", as: "h2", style: { display: "block", marginBottom: "8px" }, children: "Email Verification" }),
/* @__PURE__ */ jsxRuntime.jsx(
api.E,
{
variant: "omega",
textColor: "neutral600",
style: { display: "block", marginBottom: "24px" },
children: "Configure email verification settings for new user registration"
}
),
/* @__PURE__ */ jsxRuntime.jsxs(api.R, { marginBottom: 3, children: [
/* @__PURE__ */ jsxRuntime.jsx(api.E, { variant: "omega", fontWeight: "bold", style: { display: "block", marginBottom: "8px" }, children: "Email Verification URL *" }),
/* @__PURE__ */ jsxRuntime.jsx(
api.G0,
{
name: "emailVerificationUrl",
value: emailVerificationUrl,
onChange: (e) => setEmailVerificationUrl(e.target.value),
placeholder: "https://yourapp.com/verify-email",
hint: "URL where users will verify their email address (your frontend application)",
required: true
}
)
] }),
/* @__PURE__ */ jsxRuntime.jsxs(api.R, { marginBottom: 3, children: [
/* @__PURE__ */ jsxRuntime.jsx(api.E, { variant: "omega", fontWeight: "bold", style: { display: "block", marginBottom: "8px" }, children: "Verification Email Subject" }),
/* @__PURE__ */ jsxRuntime.jsx(
api.G0,
{
name: "emailVerificationEmailSubject",
value: emailVerificationEmailSubject,
onChange: (e) => setEmailVerificationEmailSubject(e.target.value),
placeholder: "Verify Your Email",
hint: "Subject line for email verification emails"
}
)
] }),
/* @__PURE__ */ jsxRuntime.jsxs(api.R, { marginBottom: 3, children: [
/* @__PURE__ */ jsxRuntime.jsx(api.E, { variant: "omega", fontWeight: "bold", style: { display: "block", marginBottom: "8px" }, children: "Include Login Credentials in Link" }),
/* @__PURE__ */ jsxRuntime.jsxs(api.T, { alignItems: "center", gap: 2, children: [
/* @__PURE__ */ jsxRuntime.jsx(
api.D1,
{
name: "includeCredentialsInVerificationLink",
checked: includeCredentialsInVerificationLink,
onChange: (e) => setIncludeCredentialsInVerificationLink(e.target.checked)
}
),
/* @__PURE__ */ jsxRuntime.jsx(api.E, { variant: "omega", textColor: "neutral600", children: "Append a Firebase custom token to the verification link, allowing users to be automatically logged in" })
] })
] }),
/* @__PURE__ */ jsxRuntime.jsx(
api.T,
{
style: {
marginTop: 24,
width: "100%"
},
justifyContent: "flex-end",
children: /* @__PURE__ */ jsxRuntime.jsx(
api.Nn,
{
size: "L",
variant: "secondary",
onClick: handleSaveEmailVerificationSettings,
disabled: loading,
children: "Save Email Verification Settings"
}
)
}
)
] }),
/* @__PURE__ */ jsxRuntime.jsxs(api.R, { padding: 4, background: "neutral0", borderRadius: "4px", shadow: "filterShadow", marginBottom: 6, children: [
/* @__PURE__ */ jsxRuntime.jsx(api.E, { variant: "alpha", as: "h2", style: { display: "block", marginBottom: "8px" }, children: "Magic Link Authentication" }),
/* @__PURE__ */ jsxRuntime.jsx(
api.E,
{
variant: "omega",
textColor: "neutral600",
style: { display: "block", marginBottom: "24px" },
children: "Configure passwordless authentication via email magic links"
}
),
/* @__PURE__ */ jsxRuntime.jsx(api.R, { marginBottom: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(api.T, { alignItems: "center", gap: 2, children: [
/* @__PURE__ */ jsxRuntime.jsx(
api.D1,
{
name: "enableMagicLink",
label: "Enable Magic Link Authentication",
checked: enableMagicLink,
onChange: (e) => setEnableMagicLink(e.target.checked),
hint: "Allow users to sign in using magic links sent to their email"
}
),
/* @__PURE__ */ jsxRuntime.jsx(
api.E,
{
variant: "pi",
fontWeight: "bold",
textColor: enableMagicLink ? "success700" : "neutral400",
children: enableMagicLink ? "Active" : "Inactive"
}
)
] }) }),
enableMagicLink && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsxs(api.R, { marginBottom: 3, children: [
/* @__PURE__ */ jsxRuntime.jsx(
api.E,
{
variant: "omega",
fontWeight: "bold",
style: { display: "block", marginBottom: "8px" },
children: "Verification URL *"
}
),
/* @__PURE__ */ jsxRuntime.jsx(
api.G0,
{
name: "magicLinkUrl",
value: magicLinkUrl,
onChange: (e) => setMagicLinkUrl(e.target.value),
placeholder: "https://yourapp.com/verify-magic-link",
hint: "URL where users complete magic link authentication (must handle client-side verification)",
required: true
}
)
] }),
/* @__PURE__ */ jsxRuntime.jsxs(api.R, { marginBottom: 3, children: [
/* @__PURE__ */ jsxRuntime.jsx(
api.E,
{
variant: "omega",
fontWeight: "bold",
style: { display: "block", marginBottom: "8px" },
children: "Email Subject"
}
),
/* @__PURE__ */ jsxRuntime.jsx(
api.G0,
{
name: "magicLinkEmailSubject",
value: magicLinkEmailSubject,
onChange: (e) => setMagicLinkEmailSubject(e.target.value),
placeholder: "Sign in to Your Application",
hint: "Subject line for magic link emails"
}
)
] }),
/* @__PURE__ */ jsxRuntime.jsxs(api.R, { marginBottom: 3, children: [
/* @__PURE__ */ jsxRuntime.jsx(
api.E,
{
variant: "omega",
fontWeight: "bold",
style: { display: "block", marginBottom: "8px" },
children: "Link Expiry (hours)"
}
),
/* @__PURE__ */ jsxRuntime.jsx(
api.i1,
{
name: "magicLinkExpiryHours",
value: magicLinkExpiryHours,
onValueChange: (value) => setMagicLinkExpiryHours(value),
min: 1,
max: 72,
hint: "How long the magic link remains valid (1-72 hours)"
}
)
] }),
/* @__PURE__ */ jsxRuntime.jsxs(api.R, { marginTop: 4, padding: 3, background: "primary100", borderRadius: "4px", children: [
/* @__PURE__ */ jsxRuntime.jsx(
api.E,
{
variant: "omega",
fontWeight: "bold",
style: { display: "block", marginBottom: "12px" },
children: "Setup Requirements:"
}
),
/* @__PURE__ */ jsxRuntime.jsxs(api.R, { marginLeft: 2, children: [
/* @__PURE__ */ jsxRuntime.jsxs(api.E, { variant: "omega", style: { display: "block", marginBottom: "8px" }, children: [
"1. ",
/* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Firebase Console:" }),
' Enable "Email link (passwordless sign-in)" in Authentication → Sign-in method'
] }),
/* @__PURE__ */ jsxRuntime.jsxs(api.E, { variant: "omega", style: { display: "block", marginBottom: "8px" }, children: [
"2. ",
/* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Authorized Domains:" }),
" Add your domain to Firebase authorized domains list"
] }),
/* @__PURE__ */ jsxRuntime.jsxs(api.E, { variant: "omega", style: { display: "block", marginBottom: "8px" }, children: [
"3. ",
/* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Verification Page:" }),
" Deploy the client-side verification handler at the URL above"
] }),
/* @__PURE__ */ jsxRuntime.jsxs(api.E, { variant: "omega", style: { display: "block", marginBottom: "8px" }, children: [
"4. ",
/* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Email Service:" }),
" Configure Strapi Email plugin or custom email hook"
] })
] })
] }),
/* @__PURE__ */ jsxRuntime.jsxs(api.R, { marginTop: 3, padding: 3, background: "neutral100", borderRadius: "4px", children: [
/* @__PURE__ */ jsxRuntime.jsx(
api.E,
{
variant: "omega",
fontWeight: "bold",
style: { display: "block", marginBottom: "8px" },
children: "🧪 Testing:"
}
),
/* @__PURE__ */ jsxRuntime.jsxs(api.E, { variant: "omega", style: { display: "block" }, children: [
"Test page available at:",
" ",
/* @__PURE__ */ jsxRuntime.jsx("a", { href: "/test-magic-link.html", target: "_blank", rel: "noreferrer", children: "/test-magic-link.html" })
] }),
/* @__PURE__ */ jsxRuntime.jsx(api.E, { variant: "omega", style: { display: "block", marginTop: "4px" }, children: "In development mode, magic links are logged to the server console." })
] })
] }),
/* @__PURE__ */ jsxRuntime.jsx(
api.T,
{
style: {
marginTop: 24,
width: "100%"
},
justifyContent: "flex-end",
children: /* @__PURE__ */ jsxRuntime.jsx(api.Nn, { size: "L", variant: "secondary", onClick: handleSaveMagicLinkSettings, disabled: loading, children: "Save Magic Link Settings" })
}
)
] })
] }) }),
/* @__PURE__ */ jsxRuntime.jsx(api.t1.Root, { open: showEditModal, onOpenChange: (open) => !open && setShowEditModal(false), children: /* @__PURE__ */ jsxRuntime.jsxs(api.t1.Content, { children: [
/* @__PURE__ */ jsxRuntime.jsx(api.t1.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(api.t1.Title, { children: "Add Firebase Web API Key" }) }),
/* @__PURE__ */ jsxRuntime.jsx(api.t1.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs(api.R, { padding: 4, children: [
/* @__PURE__ */ jsxRuntime.jsx(api.E, { variant: "omega", marginBottom: 2, children: "Add your Firebase Web API Key to enable the emailLogin endpoint. This is optional and only needed if you want to authenticate users with email/password directly through your backend." }),
/* @__PURE__ */ jsxRuntime.jsxs(api.R, { marginTop: 3, children: [
/* @__PURE__ */ jsxRuntime.jsx(
api.E,
{
variant: "omega",
fontWeight: "bold",
style: { display: "block", marginBottom: "8px" },
children: "Firebase Web API Key (Optional)"
}
),
/* @__PURE__ */ jsxRuntime.jsx(
api.G0,
{
name: "editWebApiKey",
value: editWebApiKey,
onChange: (e) => setEditWebApiKey(e.target.value),
placeholder: "AIzaSy... (your Web API Key)",
hint: "Only required for email/password login endpoint"
}
)
] }),
/* @__PURE__ */ jsxRuntime.jsxs(api.R, { marginTop: 3, padding: 2, background: "primary100", borderRadius: "4px", children: [
/* @__PURE__ */ jsxRuntime.jsx(api.E, { variant: "omega", fontWeight: "bold", children: "📍 Where to find your Web API Key:" }),
/* @__PURE__ */ jsxRuntime.jsxs("ol", { style: { marginLeft: 20, marginTop: 8 }, children: [
/* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(api.E, { variant: "omega", children: [
"Go to",
" ",
/* @__PURE__ */ jsxRuntime.jsx("a", { href: "https://console.firebase.google.com", target: "_blank", rel: "noreferrer", children: "Firebase Console" })
] }) }),
/* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(api.E, { variant: "omega", children: "Select your project" }) }),
/* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(api.E, { variant: "omega", children: [
"Click the gear icon ⚙️ → ",
/* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Project Settings" })
] }) }),
/* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(api.E, { variant: "omega", children: [
"In the ",
/* @__PURE__ */ jsxRuntime.jsx("strong", { children: "General" }),
" tab, scroll down to ",
/* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Your apps" })
] }) }),
/* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(api.E, { variant: "omega", children: [
"Find ",
/* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Web API Key" }),
" (looks like: AIzaSyB3Xd...)"
] }) })
] })
] })
] }) }),
/* @__PURE__ */ jsxRuntime.jsx(api.t1.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs(api.T, { justifyContent: "flex-end", gap: 2, children: [
/* @__PURE__ */ jsxRuntime.jsx(api.Nn, { variant: "tertiary", onClick: () => setShowEditModal(false), children: "Cancel" }),
/* @__PURE__ */ jsxRuntime.jsx(api.Nn, { variant: "default", onClick: handleSaveEditConfiguration, children: "Add API Key" })
] }) })
] }) })
] });
}
exports.default = SettingsPage;