Firebase Shortcodes Documentation#
Available Shortcodes#
1. firebase-init#
Initializes Firebase on the page. Include this ONCE at the top of any page that uses Firebase features.
2. firebase-login#
Displays the FirebaseUI login widget with Google and Email/Password options.
3. firebase-user-info#
Shows the logged-in user’s information and a sign-out button. Auto-hides when not logged in.
4. firebase-protected#
Wraps content that should only be visible to logged-in users.
5. firebase-guest-only#
Wraps content that should only be visible to guests (not logged in).
Please sign in to access premium features!
Example Usage#
Login Page Example#
+++
title = "Login"
+++
## Sign in to continue
Content Page with Protected Sections#
+++
title = "Advanced Tutorial"
+++
## Public Introduction
This is visible to everyone.
### 👋 Want more?
Sign in to access the full tutorial!
[Login Here](/login/)
Dashboard Example#
+++
title = "My Dashboard"
+++
# Access Denied
Please [login](/login/) to view your dashboard.
Benefits of Using Shortcodes#
- Cleaner Markdown: No inline HTML/JavaScript clutter
- Reusable: Use the same Firebase functionality across multiple pages
- Maintainable: Update Firebase config in one place
- Dynamic Content: Show/hide content based on auth state
- Better Organization: Separation of concerns
JavaScript API Available#
After using firebase-init, you have access to:
// Get current user
firebase.auth().currentUser
// Listen to auth changes
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
console.log('User is signed in:', user.email);
} else {
console.log('User is signed out');
}
});
// Sign out
firebase.auth().signOut();You can add custom scripts to any page that use these Firebase APIs!