Setting Up Firebase Sync for Monochrome

Follow these steps to enable cross-device synchronization for your library, history, and settings using your own Firebase project.

1. Create a Firebase Project

Go to the Firebase Console.
Click Add project and give it a name (e.g., "Monochrome Sync").
(Optional) Disable Gemini and Google Analytics if you want to keep it simple.
Click Create project.

2. Enable Authentication

In the left sidebar, click Build > Authentication.
Click Get Started.
Go to the Sign-in method tab.
Select Google and enable it.
Set your project support email and click Save.

2.1 Authorized Domains (CRITICAL)

Firebase will block login attempts from unknown domains.

In the Authentication section, go to the Settings tab.
Click Authorized domains in the left sub-menu.
Click Add domain.
Add your hosting domain (e.g., julienmaille.github.io).
- Note: localhost and 127.0.0.1 are usually added by default for local testing.

3. Enable Realtime Database

In the left sidebar, click Build > Realtime Database.
Click Create Database.
Choose a location near you and click Next.
Select Start in test mode (we will change the rules in the next step) and click Enable.

4. Set Security Rules

In the Realtime Database section, go to the Rules tab.

Replace the existing rules with the following to ensure users can only see their own data:

{
    "rules": {
        "users": {
            "$uid": {
                ".read": "$uid === auth.uid",
                ".write": "$uid === auth.uid"
            }
        },
        "public_playlists": {
            ".read": true,
            ".indexOn": ["uid", "name"],
            "$playlistId": {
                ".write": "auth != null && (!data.exists() || data.child('uid').val() === auth.uid)"
            }
        }
    }
}

Note: The public_playlists rule allows anyone to read the playlists. The write rule ensures that only authenticated users can publish, and only the owner (creator) of a playlist can modify or delete it.

Click Publish.

5. Get Your Configuration

Click the gear icon (⚙️) next to "Project Overview" and select Project settings.
In the General tab, scroll down to "Your apps" and click the Web icon (</>).
Register the app (e.g., "Monochrome App").

You will see a firebaseConfig object. It looks like this:

const firebaseConfig = {
    apiKey: 'AIzaSy...',
    authDomain: 'your-project.firebaseapp.com',
    databaseURL: 'https://your-project.firebaseio.com',
    projectId: 'your-project',
    storageBucket: 'your-project.appspot.com',
    messagingSenderId: '...',
    appId: '...',
};

Copy only the part with the curly braces { ... }.

6. Configure Monochrome

Open the Monochrome app and go to Settings.
Find the Firebase Configuration section.
Paste the JSON object you copied into the textarea.
Click Save & Reload.
Under Sync & Backup, click Connect with Google and sign in.

Your library is now synced to the cloud! Log in on any other device with the same configuration to see your music everywhere.

3.4 KiB Raw Blame History