Enable Firebase Auth Based Features in Lantro UI v1.7 Pro

This guide will help you connect Firebase login, dashboard, bookmarks, and exclusive content system to your Blogger theme.

Follow each step carefully. Setup takes only 10–15 minutes.

---

🟢 Step 1: Create Firebase Account

1. Go to: https://console.firebase.google.com
2. Login using your Google account
3. Click Create a project
4. Enter project name (example: MyBlogUsers)
5. Click Continue → Disable analytics (optional)
6. Click Create project

---

🟢 Step 2: Enable Authentication

1. Open your Firebase project
2. Click Authentication
3. Click Get started
4. Open Sign-in method
5. Enable Email/Password
6. Enable Google login
7. Click Save

Important: Without enabling these, users cannot login or signup.

➤ Add Authorized Domains

1. Go to Authentication → Settings → Authorized domains
2. Add your website domain
3. Add blogspot.com (important for Blogger users)

---

🟢 Step 3: Create Firestore Database

1. Click Firestore Database
2. Click Create database
3. Select Start in test mode
4. Choose location → Enable

After creating database, open Rules tab and paste:

rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write: if request.auth != null;
}
}
}

Click Publish

---

🟢 Step 4: Get Firebase Config

1. Go to Firebase dashboard
2. Click ⚙️ Project settings
3. Scroll to Your apps
4. Click </> Web
5. Register app

You will get config like this:

const firebaseConfig = {
apiKey: "XXXX",
authDomain: "XXXX.firebaseapp.com",
projectId: "XXXX",
storageBucket: "XXXX.appspot.com",
messagingSenderId: "XXXX",
appId: "XXXX"
};

---

🟢 Step 5: Add Config in Blogger Theme

Go to Blogger → Theme → Edit HTML

Find firebase config section and replace with your details:

var firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_PROJECT.firebaseapp.com",
projectId: "YOUR_PROJECT_ID",
appId: "XXXX",

  dashboard:"/p/dashboard.html",
  login:"/p/login.html",
  signup:"/p/signup.html",
  bookmark:"/p/bookmarks.html",
  history:"/p/history.html",
  historyText:"Login to unlock this premium part"
};

Do not change page URLs unless you also change them in Blogger pages.

---

🟢 Step 6: Create Required Pages

Create these pages in Blogger:

• /p/login.html
• /p/signup.html
• /p/dashboard.html
• /p/bookmarks.html
• /p/history.html

Make sure URLs match config exactly.

---

🟢 Step 7: Test System

1. Open signup page
2. Create account
3. Verify email
4. Login
5. Open dashboard
6. Test bookmark button

If everything works correctly, your Firebase system is fully ready.

---

⭐ How to Add Exclusive Content

Wrap any content inside:

<div class='exclusiveContent'>
This content only visible for logged users
</div>

Guests will see locked message. Logged users can see content.

You can use this for premium downloads, secret links, or member tutorials.

---

🎉 Setup Completed

Your Blogger theme now supports:

• User login system
• Google login
• User dashboard
• Bookmark system
• Exclusive content lock