The Admin Dashboard UI

The Starter Kit comes with an admin dashboard baked into the Python API. It's a Vue.js application that allows you to see and manage your users and also perform CRUD (create, read, update, delete) operations on any selected Supabase tables. You can also manage your Terms of Service and Privacy Policy copy, and send a push notification to all your users.

Your Firebase Auth user entry must have admin pivileges to login in to the dashboard. Please see the previous section about how to create the first admin user. For subsequent admins, existing admins can use the dashboard to set new roles, such as the admin role.

When the Python API is running, just append /dashboard to the url to access the admin UI.

In the ff-starterkit-python-api repository, you'll find two files: admin_config.dev.json and admin_config.json (one for each of prod and dev). These files configure the admin dashboard and allow you to enter the names of your Supabase tables. Then you or members of your team may interact with the database using this UI. You specify the name and type of each column in the table, only including the tables and columns you want.

For the dashboard to work, it's also necessary to add the firebase_config web credentials. You can find this as javascript code in Firebase under Project Settings > General > Your apps > Web apps. There'll be a code snippet when you click into your web app, with a variable called firebaseConfig. You just need to convert this Javascript object to JSON (add quotes to the keys and remove the = and const keywords). Also change firebaseConfig camelCase to firebase_config snake_case.

For example, if the snippet reads

const firebaseConfig = {
  apiKey: "AIzaSyB3Gpwbncdy45kjOlBVxpfIZ46Fbgqvo",
  authDomain: "ficg-vg2c.firebaseapp.com",
  projectId: "ficg-vg2c",
  storageBucket: "ficg-vg2c.firebasestorage.app",
  messagingSenderId: "22257611269",
  appId: "1:22257611269:web:ee4b968b2cc84090a2aca8",
  measurementId: "G-V1NGJH1PL"
};

Then you need to convert this to JSON:

"firebase_config": {
  "apiKey": "AIzaSyB3Gpwbncdy45kjOlBVxpfIZ46Fbgqvo",
  "authDomain": "ficg-vg2c.firebaseapp.com",
  "projectId": "ficg-vg2c",
  "storageBucket": "ficg-vg2c.firebasestorage.app",
  "messagingSenderId": "22257611269",
  "appId": "1:22257611269:web:ee4b968b2cc84090a2aca8",
  "measurementId": "G-V1NGJH1PL"
}