Sermon & Event Planner
Organize your expository sermons, series, and church calendar.
Add New Sermon or Event
Upcoming Schedule
Your sermon and event calendar is empty. Start planning!
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Firebase Config Fix</title>
<script src=”https://cdn.tailwindcss.com”></script>
<style>
body { font-family: ‘Inter’, sans-serif; background-color: #f7f7f7; }
</style>
</head>
<body>
<div class=”max-w-xl mx-auto p-8 mt-10 bg-white shadow-xl rounded-xl”>
<h1 class=”text-3xl font-bold text-gray-800 mb-4″>Firebase Initialization Status</h1>
<p class=”text-gray-600 mb-6″>
This app demonstrates the correct way to initialize Firebase using the environment-provided global variables (`__firebase_config`, `__initial_auth_token`, `__app_id`).
</p>
<div id=”status-container” class=”space-y-3″>
<div id=”config-status” class=”p-3 bg-blue-100 border border-blue-300 rounded-lg text-blue-800″>Checking configuration…</div>
<div id=”auth-status” class=”p-3 bg-yellow-100 border border-yellow-300 rounded-lg text-yellow-800″>Authenticating user…</div>
<div id=”user-info” class=”p-3 bg-gray-100 border border-gray-300 rounded-lg text-gray-700 hidden”></div>
</div>
</div>
<!– Firebase SDK Imports –>
<script type=”module”>
import { initializeApp } from “https://www.gstatic.com/firebasejs/11.6.1/firebase-app.js”;
import { getAuth, signInAnonymously, signInWithCustomToken, onAuthStateChanged } from “https://www.gstatic.com/firebasejs/11.6.1/firebase-auth.js”;
import { getFirestore, setLogLevel } from “https://www.gstatic.com/firebasejs/11.6.1/firebase-firestore.js”;
// IMPORTANT: Set log level to see detailed debug messages in the console
setLogLevel(‘debug’);
const configStatus = document.getElementById(‘config-status’);
const authStatus = document.getElementById(‘auth-status’);
const userInfo = document.getElementById(‘user-info’);
let db;
let auth;
let userId;
/**
* The error you are seeing happens because firebaseConfig isn’t loaded
* or is not correctly parsed before initializeApp is called.
*/
function initializeFirebase() {
try {
// 1. Access the global configuration variable and parse it
const firebaseConfigString = typeof __firebase_config !== ‘undefined’ ? __firebase_config : ‘{}’;
const firebaseConfig = JSON.parse(firebaseConfigString);
// Check for the critical ‘projectId’
if (!firebaseConfig.projectId) {
throw new Error(‘”projectId” not found in the parsed configuration.’);
}
// 2. Initialize the app
const app = initializeApp(firebaseConfig);
auth = getAuth(app);
db = getFirestore(app);
configStatus.textContent = `✅ Firebase App Initialized! Project ID: ${firebaseConfig.projectId}`;
configStatus.classList.replace(‘bg-blue-100’, ‘bg-green-100’);
configStatus.classList.replace(‘text-blue-800’, ‘text-green-800’);
// 3. Start the authentication process
handleAuth();
} catch (error) {
const errorMessage = `❌ Initialization Failed: ${error.message}`;
configStatus.textContent = errorMessage;
configStatus.classList.replace(‘bg-blue-100’, ‘bg-red-100’);
configStatus.classList.replace(‘text-blue-800’, ‘text-red-800’);
console.error(“Database Error: Initialization Failure”, error);
}
}
async function handleAuth() {
try {
const authToken = typeof __initial_auth_token !== ‘undefined’ ? __initial_auth_token : null;
if (authToken) {
// Use the custom token provided by the environment
await signInWithCustomToken(auth, authToken);
authStatus.textContent = “✅ Signed in using custom token.”;
} else {
// Fallback to anonymous sign-in if no token is provided
await signInAnonymously(auth);
authStatus.textContent = “⚠️ Signed in anonymously (No custom token provided).”;
}
authStatus.classList.replace(‘bg-yellow-100’, ‘bg-green-100’);
authStatus.classList.replace(‘text-yellow-800’, ‘text-green-800’);
// 4. Set up an authentication state listener (best practice)
onAuthStateChanged(auth, (user) => {
if (user) {
userId = user.uid;
userInfo.classList.remove(‘hidden’);
userInfo.innerHTML = `
<strong>User is ready!</strong><br>
App ID: ${typeof __app_id !== ‘undefined’ ? __app_id : ‘default-app-id’}<br>
User UID: <span class=”break-all font-mono text-sm”>${userId}</span>
`;
// Now you can safely start your Firestore operations (e.g., loading data)
console.log(“Authentication complete. User ID:”, userId);
} else {
// User is signed out or connection lost
console.warn(“User state changed: Signed out.”);
}
});
} catch (error) {
const errorMessage = `❌ Authentication Failed: ${error.message}`;
authStatus.textContent = errorMessage;
authStatus.classList.replace(‘bg-yellow-100’, ‘bg-red-100’);
authStatus.classList.replace(‘text-yellow-800’, ‘text-red-800’);
console.error(“Database Error: Authentication Failure”, error);
}
}
// Wait for the window to fully load before initializing Firebase
window.onload = initializeFirebase;
</script>
</body>
</html>
