Login Widget Customizer

Customize Widget

Backend Configuration
API Key:
Auth Domain:
Project ID:
Storage Bucket:
Messaging Sender ID:
App ID:
(These settings only update the code in the 'Full Widget Code' box below)
Main Colors
Primary:
Danger:
Success:
Info:
Text & Backgrounds
Widget BG:
Dark Text:
Medium Text:
Light Text:
Placeholder:
Borders & Radius
Divider/Border:
Input Border:
Widget Border:
Widget Brdr W:px
Radius (Lg):px
Radius (Md):px
Input Focus:
Sizing & Font
Widget Width:px
W. Padding:px
Base Font:px
Font Family:
Input Pad V:px
Input Pad H:px
Button Pad V:px
Button Pad H:px
Message Styles
Error BG:
Error Border:
Success BG:
Success Brdr:
Success Text:
Info BG:
Info Border:
Provider Colors
Facebook:
GitHub:
Yahoo:
(Google button color is fixed)
Full Widget Code
<!doctype html>
<style>
    :root {
        --primary-color: #007bff;
        --danger-color: #dc3545;
        --success-color: #28a745;
        --info-color: #17a2b8;
        --bg-light: #ffffff;
        --dark-text: #212529;
        --medium-text: #495057;
        --light-text: #6c757d;
        --grey-text: #adb5bd;
        --border-color: #dee2e6;
        --input-border-color: #ced4da;
        --widget-border-color: #007bff;
        --widget-border-width: 2px;
        --border-radius-lg: 6px;
        --border-radius-md: 4px;
        --input-focus-shadow-color: rgba(0, 123, 255, 0.15);
        --widget-width-preview: 300px;
        --widget-padding-preview: 18px;
        --widget-base-font-size: 13px;
        --widget-font: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif";
        --input-padding-vertical: 9px;
        --input-padding-horizontal: 10px;
        --button-padding-vertical: 9px;
        --button-padding-horizontal: 9px;
        --danger-light-bg: #ffe3e3;
        --danger-border-color: #f5c6cb;
        --success-light-bg: #eaf7ec;
        --success-border: #a1d9a5;
        --success-dark-text: #155724;
        --info-light-bg: #e8f7fa;
        --info-border: #bee5eb;
        --facebook-color: #1877F2;
        --github-color: #333333;
        --yahoo-color: #6001d2;
        --primary-light-bg: #e7f5ff;
        --bg-body: #f8f9fa;
        --box-shadow-light: 0px 1px 2px rgba(0, 0, 0, 0.05);
        --box-shadow-strong: 0px 2px 6px rgba(0, 0, 0, 0.1);
    }
     .firebase-auth-widget-container,        .firebase-auth-logout-box,        .firebase-auth-popup { font-family: var(--widget-font); font-size: var(--widget-base-font-size); box-sizing: border-box; }        .firebase-auth-widget-container *, .firebase-auth-logout-box *, .firebase-auth-popup * { box-sizing: border-box; }        .firebase-auth-widget-hidden { display: none !important; }        #firebase-auth-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.3); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 999; }        #firebase-auth-backdrop.firebase-auth-widget-hidden { display: none !important; }        .firebase-auth-widget-container { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: var(--widget-width-preview); background: var(--bg-light); padding: var(--widget-padding-preview); border-radius: var(--border-radius-lg); box-shadow: var(--box-shadow-strong); display: flex; flex-direction: column; align-items: center; z-index: 1000; border: var(--widget-border-width) solid var(--widget-border-color); color: var(--dark-text); max-height: 90vh; overflow-y: auto; }        .firebase-auth-widget-box { width: 100%; text-align: center; }        .firebase-auth-widget-box h2 { color: var(--dark-text); font-weight: 600; font-size: calc(var(--widget-base-font-size) * 1.1); margin: 0 0 12px 0; line-height: 1.3; flex-shrink: 0; }        .firebase-auth-input-group { margin-bottom: 10px; width: 100%; flex-shrink: 0;}        .firebase-auth-input-group input { width: 100%; padding: var(--input-padding-vertical) var(--input-padding-horizontal); border: 1px solid var(--input-border-color); border-radius: var(--border-radius-md); font-size: var(--widget-base-font-size); transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; background-color: var(--bg-light); color: var(--dark-text); margin-bottom: 6px; font-family: inherit; }        .firebase-auth-input-group input:last-child { margin-bottom: 0; }        .firebase-auth-input-group input::placeholder { color: var(--grey-text); opacity: 1; }        .firebase-auth-input-group input:hover { background-color: #f8f9fa; }        .firebase-auth-input-group input:focus { border-color: var(--primary-color); outline: none; box-shadow: 0 0 0 2px var(--input-focus-shadow-color); background-color: var(--bg-light); }        .firebase-auth-action-btn { display: flex; align-items: center; justify-content: center; width: 100%; padding: var(--button-padding-vertical) var(--button-padding-horizontal); border: none; cursor: pointer; border-radius: var(--border-radius-md); font-size: var(--widget-base-font-size); font-weight: 600; transition: all 0.2s ease; margin-top: 5px; font-family: inherit; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.5px; flex-shrink: 0; }        .firebase-auth-action-btn:hover { opacity: 1; transform: translateY(-1px); filter: brightness(1.1); }        .firebase-auth-action-btn:disabled { opacity: 0.65; cursor: not-allowed; filter: brightness(1); transform: none; }        .firebase-auth-sign-in-btn { background-color: var(--primary-color); color: white; }        .firebase-auth-sign-up-btn { background-color: var(--success-color); color: white; }        .firebase-auth-reset-btn { background-color: var(--info-color); color: white; }        .firebase-auth-email-link-btn { color: var(--medium-text); background-color: #f1f3f5; border: 1px solid var(--input-border-color); margin-top: 10px; text-transform: none; letter-spacing: normal; font-weight: 500; }        .firebase-auth-email-link-btn:hover { background-color: #e9ecef; border-color: #adb5bd; filter: brightness(1); }        .firebase-auth-link-btn { background: none; border: none; color: var(--primary-color); font-size: calc(var(--widget-base-font-size) * 0.85); cursor: pointer; padding: 0; text-align: right; width: 100%; display: block; margin-top: 4px; margin-bottom: 8px; font-family: inherit; flex-shrink: 0;}        .firebase-auth-link-btn:hover { text-decoration: underline; }        .firebase-auth-toggle-link { background: none; border: none; color: var(--primary-color); font-size: calc(var(--widget-base-font-size) * 0.92); cursor: pointer; padding: 5px 0; text-align: center; width: 100%; display: block; margin-top: 10px; font-weight: 500; font-family: inherit; flex-shrink: 0;}        .firebase-auth-toggle-link:hover { text-decoration: underline; }        .firebase-auth-provider-btn { margin: 5px 0; color: white; text-transform: none; letter-spacing: normal; font-weight: 500; border-radius: var(--border-radius-md); }        .firebase-auth-provider-btn:hover { filter: brightness(1.1); }        .firebase-auth-google-btn { background: #DB4437; }        .firebase-auth-facebook-btn-style { background: var(--facebook-color); }        .firebase-auth-github-btn-style { background: var(--github-color); }        .firebase-auth-yahoo-btn-style { background: var(--yahoo-color); }        .firebase-auth-message { color: var(--danger-color); margin-top: 12px; margin-bottom: 12px; min-height: 1.4em; font-size: calc(var(--widget-base-font-size) * 0.92); font-weight: 500; text-align: center; width: 100%; line-height: 1.4; word-wrap: break-word; padding: 6px 8px; border-radius: var(--border-radius-md); border: 1px solid transparent; flex-shrink: 0; }        .firebase-auth-message.info { color: var(--info-color); background-color: var(--info-light-bg); border-color: var(--info-border); }        .firebase-auth-message.error { color: var(--danger-color); background-color: var(--danger-light-bg); border-color: var(--danger-border-color); }        .firebase-auth-message.success { color: var(--success-dark-text); background-color: var(--success-light-bg); border-color: var(--success-border); }        .firebase-auth-divider { font-size: calc(var(--widget-base-font-size) * 0.85); color: var(--light-text); margin: 15px 0; text-align: center; position: relative; width: 100%; line-height: 1; flex-shrink: 0; }        .firebase-auth-divider::before, .firebase-auth-divider::after { content: ''; position: absolute; top: 50%; width: 37%; height: 1px; background-color: var(--border-color); transform: translateY(-50%); }        .firebase-auth-divider::before { left: 0; } .firebase-auth-divider::after { right: 0; }        .firebase-auth-legal-text { font-size: calc(var(--widget-base-font-size) * 0.77); color: var(--light-text); margin-top: 10px; line-height: 1.3; text-align: center; width: 100%; flex-shrink: 0; }        .firebase-auth-legal-text a { color: var(--primary-color); text-decoration: none; }        .firebase-auth-legal-text a:hover { text-decoration: underline; }        .firebase-auth-popup { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: auto; max-width: 90%; min-width: 250px; background-color: var(--success-light-bg); color: var(--success-dark-text); border: 1px solid var(--success-border); border-radius: var(--border-radius-lg); padding: 18px 25px; box-shadow: var(--box-shadow-strong); z-index: 2000; text-align: center; font-size: 14px; font-weight: 600; line-height: 1.4; }        .firebase-auth-popup p { margin: 0; padding: 0; }        .firebase-auth-logout-box { width: auto; padding: 5px 8px; position: fixed; bottom: 15px; left: 15px; background-color: var(--bg-light); color: var(--dark-text); border-radius: 18px; box-shadow: var(--box-shadow-light); border: 1px solid var(--border-color); display: flex; align-items: center; gap: 6px; z-index: 9999; transition: background-color 0.2s ease, box-shadow 0.2s ease; }        .firebase-auth-logout-box.firebase-auth-widget-hidden { display: none !important; }        .firebase-auth-logout-box:hover { box-shadow: var(--box-shadow-strong); }        .firebase-auth-profile-img { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border-color); display: block; }        .firebase-auth-profile-initial { width: 24px; height: 24px; border-radius: 50%; background-color: var(--primary-color); color: white; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; line-height: 1; text-transform: uppercase; border: 1px solid var(--border-color); }        .firebase-auth-logout-box button { background-color: transparent; color: var(--danger-color); border: 1px solid var(--danger-light-bg); padding: 3px 8px; font-size: 11px; font-weight: 600; cursor: pointer; margin: 0; width: auto; border-radius: var(--border-radius-md); transition: all 0.2s ease; font-family: inherit; }        .firebase-auth-logout-box button:hover { background-color: var(--danger-color); color: white; border-color: var(--danger-color); text-decoration: none; transform: translateY(-1px); box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); }        #firebase-auth-reset-password-section p { font-size: calc(var(--widget-base-font-size) * 0.92); color: var(--medium-text); margin-bottom: 10px; line-height: 1.4; flex-shrink: 0; }
</style>
<div id="firebase-auth-backdrop" class="firebase-auth-widget-hidden"></div>
<div id="firebase-auth-login-popup" class="firebase-auth-widget-container firebase-auth-widget-hidden">
    <div class="firebase-auth-widget-box">
        <div id="firebase-auth-sign-in-section"><h2>Sign In</h2><div class="firebase-auth-input-group"><input type="email" id="firebase-auth-email-input-signin" placeholder="Enter email" aria-label="Email address for Sign In" autocomplete="email" /><input type="password" id="firebase-auth-password-input-signin" placeholder="Enter password" aria-label="Password for Sign In" autocomplete="current-password" /></div><button onclick="firebaseAuthToggleView('reset')" class="firebase-auth-link-btn">Forgot Password?</button><button id="firebase-auth-signin-btn" onclick="firebaseAuthSignInWithEmailPassword()" class="firebase-auth-action-btn firebase-auth-sign-in-btn">Sign In</button><button onclick="firebaseAuthToggleView('signup')" class="firebase-auth-toggle-link">New user? Sign Up</button></div>
        <div id="firebase-auth-sign-up-section" class="firebase-auth-widget-hidden"><h2>Create Account</h2><div class="firebase-auth-input-group"><input type="email" id="firebase-auth-email-input-signup" placeholder="Enter email" aria-label="Email address for Sign Up" autocomplete="email" /><input type="password" id="firebase-auth-password-input-signup" placeholder="Create password (min. 6 chars)" aria-label="Password for Sign Up" autocomplete="new-password" /><input type="password" id="firebase-auth-password-confirm-signup" placeholder="Confirm password" aria-label="Confirm Password for Sign Up" autocomplete="new-password" /></div><button onclick="firebaseAuthSignUpWithEmailPassword()" class="firebase-auth-action-btn firebase-auth-sign-up-btn">Sign Up</button><button onclick="firebaseAuthToggleView('signin')" class="firebase-auth-toggle-link">Already have an account? Sign In</button></div>
        <div id="firebase-auth-reset-password-section" class="firebase-auth-widget-hidden"><h2>Reset Password</h2><p>Enter your email address below and we'll send you a link to reset your password.</p><div class="firebase-auth-input-group"><input type="email" id="firebase-auth-email-input-reset" placeholder="Enter your email" aria-label="Email address for Password Reset" autocomplete="email" /></div><button onclick="firebaseAuthSendPasswordReset()" class="firebase-auth-action-btn firebase-auth-reset-btn">Send Reset Link</button><button onclick="firebaseAuthToggleView('signin')" class="firebase-auth-toggle-link">Back to Sign In</button></div>
         <p id="firebase-auth-message" class="firebase-auth-message" aria-live="polite"></p>
        <div id="firebase-auth-other-methods-divider" class="firebase-auth-divider">OR</div>
        <button id="firebase-auth-magic-link-btn" onclick="firebaseAuthSendEmailLink()" class="firebase-auth-action-btn firebase-auth-email-link-btn">Send Magic Link (Passwordless)</button>
        <div id="firebase-auth-provider-divider" class="firebase-auth-divider" style="margin-top: 10px;">OR USE</div>
        <button id="firebase-auth-google-btn" onclick="firebaseAuthLoginWithProvider('google')" class="firebase-auth-action-btn firebase-auth-provider-btn firebase-auth-google-btn">Continue with Google</button>
        <button id="firebase-auth-facebook-btn" onclick="firebaseAuthLoginWithProvider('facebook')" class="firebase-auth-action-btn firebase-auth-provider-btn firebase-auth-facebook-btn-style">Continue with Facebook</button>
        <button id="firebase-auth-github-btn" onclick="firebaseAuthLoginWithProvider('github')" class="firebase-auth-action-btn firebase-auth-provider-btn firebase-auth-github-btn-style">Continue with GitHub</button>
        <button id="firebase-auth-yahoo-btn" onclick="firebaseAuthLoginWithProvider('yahoo')" class="firebase-auth-action-btn firebase-auth-provider-btn firebase-auth-yahoo-btn-style">Continue with Yahoo</button>
        <p class="firebase-auth-legal-text">By signing in, you agree to our <a href="#">Policy</a> & <a href="#">Terms</a>.</p>
    </div>
</div>
<div id="firebase-auth-logout-box" class="firebase-auth-logout-box firebase-auth-widget-hidden"><img id="firebase-auth-profile-pic" src="" alt="User profile picture" class="firebase-auth-profile-img firebase-auth-widget-hidden" /><div id="firebase-auth-profile-fallback" class="firebase-auth-profile-initial firebase-auth-widget-hidden"><span id="firebase-auth-profile-initial-letter"></span></div><button onclick="firebaseAuthLogout()">Logout</button></div>
<div id="firebase-auth-success-popup" class="firebase-auth-popup firebase-auth-widget-hidden"><p id="firebase-auth-popup-message"></p></div>
<script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-auth-compat.js"></script>
<script>
    (function() {
        "use strict";
        const firebaseConfig = {
            apiKey: "PLACEHOLDER_API_KEY",
            authDomain: "PLACEHOLDER_AUTH_DOMAIN",
            projectId: "PLACEHOLDER_PROJECT_ID",
            storageBucket: "PLACEHOLDER_STORAGE_BUCKET",
            messagingSenderId: "PLACEHOLDER_SENDER_ID",
            appId: "PLACEHOLDER_APP_ID"
        };
        const EMAIL_STORAGE_KEY = 'loginWidgetEmailForSignIn';
        const actionCodeSettings = { url: window.location.href.split('?')[0].split('#')[0], handleCodeInApp: true };
        const SIGNUP_SUCCESS_DELAY = 4000;
        const RESET_SUCCESS_DELAY = 3000;
        const fallbackColors = ["#007bff","#6f42c1","#e83e8c","#dc3545","#fd7e14","#ffc107","#28a745","#20c997","#17a2b8","#6c757d"];
        let auth = null; let app = null;
        const loginPopup=document.getElementById('firebase-auth-login-popup'),logoutBox=document.getElementById('firebase-auth-logout-box'),backdrop=document.getElementById('firebase-auth-backdrop'),profilePic=document.getElementById('firebase-auth-profile-pic'),profileFallback=document.getElementById('firebase-auth-profile-fallback'),initialSpan=document.getElementById('firebase-auth-profile-initial-letter'),messageElement=document.getElementById('firebase-auth-message'),signInSection=document.getElementById('firebase-auth-sign-in-section'),signUpSection=document.getElementById('firebase-auth-sign-up-section'),resetPasswordSection=document.getElementById('firebase-auth-reset-password-section'),emailInputSignIn=document.getElementById('firebase-auth-email-input-signin'),passwordInputSignIn=document.getElementById('firebase-auth-password-input-signin'),signInBtn=document.getElementById('firebase-auth-signin-btn'),emailInputSignUp=document.getElementById('firebase-auth-email-input-signup'),passwordInputSignUp=document.getElementById('firebase-auth-password-input-signup'),passwordConfirmInputSignUp=document.getElementById('firebase-auth-password-confirm-signup'),emailInputReset=document.getElementById('firebase-auth-email-input-reset'),successPopup=document.getElementById('firebase-auth-success-popup'),popupMessageElement=document.getElementById('firebase-auth-popup-message'),otherMethodsDivider=document.getElementById('firebase-auth-other-methods-divider'),magicLinkBtn=document.getElementById('firebase-auth-magic-link-btn'),providerDivider=document.getElementById('firebase-auth-provider-divider'),googleBtn=document.getElementById('firebase-auth-google-btn'),facebookBtn=document.getElementById('firebase-auth-facebook-btn'),githubBtn=document.getElementById('firebase-auth-github-btn'),yahooBtn=document.getElementById('firebase-auth-yahoo-btn');
        const getVisibleEmailInput=()=>{ return signInSection && !signInSection.classList.contains('firebase-auth-widget-hidden') ? emailInputSignIn : (signUpSection && !signUpSection.classList.contains('firebase-auth-widget-hidden') ? emailInputSignUp : emailInputReset); };
        function isValidEmail(e){return!!e&&/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(String(e).toLowerCase())};
        function getUserColorIndex(e){if(!e)return 0;let t=0;for(let n=0;n<e.length;n++)t=e.charCodeAt(n)+((t<<5)-t),t&=t;return Math.abs(t)%fallbackColors.length};
        function showLoginPopupMessage(e,t="error"){if(messageElement){messageElement.textContent=e;messageElement.className="firebase-auth-message";if(e&&t)messageElement.classList.add(t)}};
        function clearMessages(){showLoginPopupMessage("")};
        function showSuccessPopup(message, duration) { if (!successPopup || !popupMessageElement) return; popupMessageElement.textContent = message; successPopup.classList.remove('firebase-auth-widget-hidden'); setTimeout(() => { successPopup.classList.add('firebase-auth-widget-hidden'); }, duration); }
        function cleanUrlAfterSignIn(){if(window.history&&window.history.replaceState){const e=window.location.protocol+"//"+window.location.host+window.location.pathname+window.location.hash;try{window.history.replaceState({path:e},"",e)}catch(err){console.warn("Could not clean URL:",err)}}};
        function displayGlobalError(e){console.error("GLOBAL WIDGET ERROR:",e);if(messageElement){showLoginPopupMessage(e,"error");if(loginPopup)loginPopup.classList.remove("firebase-auth-widget-hidden")}else if(loginPopup){loginPopup.innerHTML=`<p style='color:red; font-weight:bold; padding: 10px;'>${e}</p>`;loginPopup.classList.remove("firebase-auth-widget-hidden")}else{alert("Widget Error: "+e)}if(backdrop)backdrop.classList.remove("firebase-auth-widget-hidden")};
        function initializeApp(){
           const requiredElements = [loginPopup, logoutBox, backdrop, profilePic, profileFallback, initialSpan, messageElement, signInSection, signUpSection, resetPasswordSection, emailInputSignIn, passwordInputSignIn, signInBtn, emailInputSignUp, passwordInputSignUp, passwordConfirmInputSignUp, emailInputReset, successPopup, popupMessageElement];
           if (requiredElements.some(el => !el)) { displayGlobalError("Widget Initialization Error: Missing required HTML elements."); return; }
           try {
               if (typeof firebase === "undefined" || !firebase.initializeApp || !firebase.auth) { throw new Error("Backend service SDKs not loaded correctly."); }
               if (!firebase.apps.length) { app = firebase.initializeApp(firebaseConfig); } else { app = firebase.app(); }
               auth = firebase.auth(app);
               console.log("Authentication service initialized for project:", app.options.projectId);
               setupAuthentication();
               handleEmailLinkSignInOnLoad();
           } catch(e) { console.error("Initialization Failed:", e); displayGlobalError("Widget failed to start: " + (e.message || "Init error")); }
        };
        function setupAuthentication(){if(!auth)return;auth.setPersistence(firebase.auth.Auth.Persistence.LOCAL).then(()=>{auth.onAuthStateChanged(handleAuthStateChange)}).catch(e=>{console.error("Persistence error:",e);auth.onAuthStateChanged(handleAuthStateChange)})};
        window.firebaseAuthToggleView=e=>{if(!signInSection||!signUpSection||!resetPasswordSection)return;signInSection.classList.add("firebase-auth-widget-hidden");signUpSection.classList.add("firebase-auth-widget-hidden");resetPasswordSection.classList.add("firebase-auth-widget-hidden");successPopup&&successPopup.classList.add("firebase-auth-widget-hidden");clearMessages();let t=!0;"signin"===e?signInSection.classList.remove("firebase-auth-widget-hidden"):"signup"===e?signUpSection.classList.remove("firebase-auth-widget-hidden"):"reset"===e&&(resetPasswordSection.classList.remove("firebase-auth-widget-hidden"),t=!1);[otherMethodsDivider,magicLinkBtn,providerDivider,googleBtn,facebookBtn,githubBtn,yahooBtn].forEach(el=>{el&&el.classList.toggle("firebase-auth-widget-hidden",!t)})};
        function handleAuthStateChange(e){ successPopup&&successPopup.classList.add("firebase-auth-widget-hidden");if(!loginPopup||!logoutBox||!backdrop||!profilePic||!profileFallback||!initialSpan||!passwordInputSignIn)return;const t=auth&&auth.isSignInWithEmailLink(window.location.href);if(e){loginPopup.classList.add("firebase-auth-widget-hidden");backdrop.classList.add("firebase-auth-widget-hidden");logoutBox.classList.remove("firebase-auth-widget-hidden");if(e.photoURL){profilePic.src=e.photoURL;profilePic.classList.remove("firebase-auth-widget-hidden");profileFallback.classList.add("firebase-auth-widget-hidden")}else{const i=(e.displayName?.charAt(0)||e.email?.charAt(0)||"U").toUpperCase(),c=getUserColorIndex(e.uid);initialSpan.textContent=i;if(profileFallback){profileFallback.style.backgroundColor=fallbackColors[c];profileFallback.classList.remove("firebase-auth-widget-hidden")}profilePic.classList.add("firebase-auth-widget-hidden")}console.log("User logged in:",e.uid);messageElement?.classList.contains("success")?setTimeout(()=>clearMessages(),3500):clearMessages();passwordInputSignIn.value="";if(passwordInputSignUp)passwordInputSignUp.value="";if(passwordConfirmInputSignUp)passwordConfirmInputSignUp.value="";if(emailInputReset)emailInputReset.value=""}else{logoutBox.classList.add("firebase-auth-widget-hidden");profilePic.classList.add("firebase-auth-widget-hidden");profileFallback.classList.add("firebase-auth-widget-hidden");passwordInputSignIn.value="";if(passwordInputSignUp)passwordInputSignUp.value="";if(passwordConfirmInputSignUp)passwordConfirmInputSignUp.value="";if(emailInputReset)emailInputReset.value="";console.log("User logged out or not logged in.");if(!t){loginPopup.classList.remove("firebase-auth-widget-hidden");backdrop.classList.remove("firebase-auth-widget-hidden");firebaseAuthToggleView("signin");clearMessages()}else{loginPopup.classList.add("firebase-auth-widget-hidden");backdrop.classList.add("firebase-auth-widget-hidden")}}};
        window.firebaseAuthSignUpWithEmailPassword=()=>{ if(!auth||!emailInputSignUp||!passwordInputSignUp||!passwordConfirmInputSignUp)return;const e=emailInputSignUp.value.trim(),t=passwordInputSignUp.value,n=passwordConfirmInputSignUp.value;clearMessages();if(!isValidEmail(e))return showLoginPopupMessage("Invalid email format","error"),void emailInputSignUp.focus();if(t.length<6)return showLoginPopupMessage("Password must be at least 6 characters","error"),void passwordInputSignUp.focus();if(t!==n)return showLoginPopupMessage("Passwords do not match","error"),void passwordConfirmInputSignUp.focus();showLoginPopupMessage("Creating account...","info");auth.createUserWithEmailAndPassword(e,t).then(t=>{console.log("Sign up OK:",t.user?.uid);clearMessages();showSuccessPopup("Account created! You can now sign in.", SIGNUP_SUCCESS_DELAY);if(emailInputSignUp)emailInputSignUp.value="";if(passwordInputSignUp)passwordInputSignUp.value="";if(passwordConfirmInputSignUp)passwordConfirmInputSignUp.value="";setTimeout(()=>{firebaseAuthToggleView("signin");if(emailInputSignIn)emailInputSignIn.value=e;if(passwordInputSignIn)passwordInputSignIn.focus()},SIGNUP_SUCCESS_DELAY)}).catch(handleAuthError)};
        window.firebaseAuthSignInWithEmailPassword=()=>{ if(!auth||!emailInputSignIn||!passwordInputSignIn||!signInBtn)return;const e=emailInputSignIn.value.trim(),t=passwordInputSignIn.value;clearMessages();if(!isValidEmail(e))return showLoginPopupMessage("Invalid email format","error"),void emailInputSignIn.focus();if(!t)return showLoginPopupMessage("Please enter your password","error"),void passwordInputSignIn.focus();signInBtn.disabled=!0;signInBtn.textContent="Signing In...";showLoginPopupMessage("Signing in...","info");auth.signInWithEmailAndPassword(e,t).then(e=>{console.log("Sign in OK:",e.user?.uid);}).catch(e=>{if(passwordInputSignIn)passwordInputSignIn.value="";handleAuthError(e)}).finally(()=>{if(signInBtn){signInBtn.disabled=!1;signInBtn.textContent="Sign In"}if(messageElement&&messageElement.classList.contains("info")&&!messageElement.classList.contains("error")&&!messageElement.classList.contains("success"))clearMessages()})};
        window.firebaseAuthSendPasswordReset=()=>{ if(!auth||!emailInputReset)return;const e=emailInputReset.value.trim();clearMessages();if(!isValidEmail(e))return showLoginPopupMessage("Please enter a valid email address","error"),void emailInputReset.focus();showLoginPopupMessage("Sending password reset link...","info");auth.sendPasswordResetEmail(e,actionCodeSettings).then(()=>{console.log("Reset email sent:",e);showSuccessPopup("Password reset email sent. Check your inbox.", RESET_SUCCESS_DELAY);setTimeout(()=>{firebaseAuthToggleView("signin");if(emailInputReset)emailInputReset.value=""},RESET_SUCCESS_DELAY)}).catch(handleAuthError)};
        function handleEmailLinkSignInOnLoad(){ if(backdrop)backdrop.classList.add("firebase-auth-widget-hidden");if(!auth||typeof auth.isSignInWithEmailLink!=="function")return;if(auth.isSignInWithEmailLink(window.location.href)){if(loginPopup)loginPopup.classList.remove("firebase-auth-widget-hidden");if(backdrop)backdrop.classList.remove("firebase-auth-widget-hidden");firebaseAuthToggleView("signin");showLoginPopupMessage("Verifying magic link...","info");let e=window.localStorage.getItem(EMAIL_STORAGE_KEY);if(!e){e=window.prompt("Please provide your email address again:");if(!e||!isValidEmail(e))return showLoginPopupMessage("Valid email required. Try the link again.","error"),void cleanUrlAfterSignIn()}auth.signInWithEmailLink(e,window.location.href).then(e=>{console.log("Email link sign-in OK:",e.user?.uid);window.localStorage.removeItem(EMAIL_STORAGE_KEY);cleanUrlAfterSignIn();}).catch(e=>{console.error("Email link sign-in error:",e);window.localStorage.removeItem(EMAIL_STORAGE_KEY);handleAuthError(e);cleanUrlAfterSignIn()})}};
        window.firebaseAuthSendEmailLink=()=>{ if(!auth)return void showLoginPopupMessage("Auth service unavailable","error");const e=getVisibleEmailInput();if(!e)return void showLoginPopupMessage("Email field not found","error");const t=e.value.trim();clearMessages();if(!isValidEmail(t))return showLoginPopupMessage("Enter email first","error"),void e.focus();showLoginPopupMessage("Sending magic link...","info");auth.sendSignInLinkToEmail(t,actionCodeSettings).then(()=>{console.log("Sign-in link sent to:",t);window.localStorage.setItem(EMAIL_STORAGE_KEY,t);showLoginPopupMessage("Magic link sent! Check your email.","success")}).catch(handleAuthError)};
        window.firebaseAuthLoginWithProvider=e=>{ console.log("Login with:",e);if(!auth)return void showLoginPopupMessage("Auth service unavailable","error");clearMessages();let t,n=e.charAt(0).toUpperCase()+e.slice(1);try{switch(e.toLowerCase()){case"google":t=new firebase.auth.GoogleAuthProvider;n="Google";break;case"facebook":t=new firebase.auth.FacebookAuthProvider;n="Facebook";break;case"github":t=new firebase.auth.GithubAuthProvider;n="GitHub";break;case"yahoo":t=new firebase.auth.OAuthProvider("yahoo.com");n="Yahoo";break;default:throw new Error(`Unsupported provider: ${e}`)}}catch(err){return console.error(`Provider error ${n}:`,err),void showLoginPopupMessage(`Cannot setup ${n}`,"error")}showLoginPopupMessage(`Connecting to ${n}...`,"info");auth.signInWithPopup(t).then(e=>{console.log(`${n} sign-in OK:`,e.user?.uid);clearMessages()}).catch(e=>{if("auth/popup-closed-by-user"===e.code||"auth/cancelled-popup-request"===e.code){console.log(`${n} popup closed`);clearMessages()}else if("auth/account-exists-with-different-credential"===e.code){console.warn("Account exists",e.email);const provider=e.customData?.providerId||"other method";showLoginPopupMessage(`Email linked to ${provider}. Sign in that way.`,"error")}else{handleAuthError(e)}})};
        window.firebaseAuthLogout=()=>{ if(!auth)return console.error("Logout fail: No auth"),void alert("Logout failed: Service unavailable.");auth.signOut().then(()=>{console.log("Logout OK")}).catch(e=>{console.error("Logout error:",e);(loginPopup&&!loginPopup.classList.contains("firebase-auth-widget-hidden")&&messageElement)?showLoginPopupMessage("Logout failed","error"):alert("Logout failed: "+e.message)})};
        function handleAuthError(e){ console.error("Auth Error:",e.code,e.message);let t="",n="error";switch(e.code){case"auth/invalid-login-credentials":case"auth/invalid-credential":t="Incorrect email or password.";break;case"auth/invalid-email":t="Invalid email format.";break;case"auth/email-already-in-use":t="Email already registered.";break;case"auth/weak-password":t="Password too short.";break;case"auth/requires-recent-login":t="Sign in again.",n="info";break;case"auth/too-many-requests":t="Too many attempts. Wait.",n="info";break;case"auth/network-request-failed":t="Network error.",n="info";break;case"auth/user-disabled":t="Account disabled.";break;case"auth/user-not-found":t="No account found with this email.";break;case"auth/wrong-password":t="Incorrect password.";break;case"auth/invalid-action-code":t="Link invalid/expired.";break;case"auth/operation-not-allowed":t="Method not enabled.";break;case"auth/popup-blocked":t="Popup blocked.";break;case"auth/popup-closed-by-user":case"auth/cancelled-popup-request":return void clearMessages();case"auth/account-exists-with-different-credential":t=`Email uses ${e.customData?.providerId||"other method"}.`;break;case"auth/unauthorized-domain":t="Domain not allowed.";break;case"auth/auth-domain-config-required":t="Config error.";break;default:console.warn("Unhandled Error:",e.code),t=`Unexpected issue (${e.code}).`}showLoginPopupMessage(t,n)};
        "loading"===document.readyState?document.addEventListener("DOMContentLoaded",initializeApp):initializeApp();
    })();
</script>
Customize Widget

Live Preview (Appearance Only)

Sign In

Create Account

Reset Password
