Locking down admin access

Hello world.

As a number of people on here talk about making an admin panel/view/application for their projects, could I ask how you’re ensuring only you or your designated people have access to it? I’ve been working on one for my app for a while now, but I don’t want to launch it to the prod server until I know that I’m the only one can get in there. I already have the server’s rules set up so I’m the only one with write access (which turns out means NOBODY else can use the built-in interactions to make changes I want them to be able to make, another problem), but if somebody happens on the url once it’s out there, they can just log into it with their Google account and read through things I’d rather they didn’t.

Thanks for you help here.

Hey @Jeff_Crowl, I can give you more details about the process later when I have more time in the computer but as I do it is changing the Firebase plugin to gather information about the user from the database. I have a field which is “userStatus” and with the modification to the plugin I save in a dataSlot this field. You can stablish the behaviour in your app if that field does not exist (an unkown user that happens to arrive to your web) or if it does and it is recognised. You can do this with a script to show different states of the first screen in your project.

I will try to give you more details later.

Oh interesting. Thanks! I’d love to see your script when you’re able to share it. Have a great day!

Ok. Let’s see if I explain it so you are able to achieve it.

1. Stablish the user role. I guess there will be several ways to do this. I just have a collection in my Firestore database named “users” and inside it each user has a document with their unique ID. Inside these documents I have a field named “userStatus” where I specify: admin, student or demoUser. Obviously the first one is me, then my students that can access to my documents, and finally the unknown user that happens to arrive to the app.

2. Save in a dataSlot the admin role in the login process. Once you have the users collection, you will need to retrive that information in the momento the user does the login process. In order to do that you have to edit the Firebase login plugin. With React Studio opened go to “Plugins – Edit plugin”, select Firebase Login and click on Edit. In the plugin editor you have to select “component-template.js” in the left side and then you will have to modify according to your needs something like the following code:

loginSuccess() {
        var uid = this.props.appActions.dataSlots['ds_SlotUserId'];
      	var db = firebase.firestore();
      	var docRef = db.collection('usuarios').doc(uid);
      	docRef.get().then((doc) => {
      		if (doc.exists) {
				
      		//Update userStatus
      			if (doc.data().userStatus == "admin") {
    				this.props.appActions.updateDataSlot('ds_SlotUserStatus',"admin");
    			} else if (doc.data().userStatus == "estudiante") {
                	this.props.appActions.updateDataSlot('ds_SlotUserStatus',"estudiante");
    			} else {
            		this.props.appActions.updateDataSlot('ds_SlotUserStatus',"demoUser");
                }

				{{{LOGINSUCCESS}}}

            } else {
              this.props.appActions.updateDataSlot('ds_SlotUserStatus',"demoUser");
              	//doc.data() will be undefined in this case
              	console.log("No such document!");
              	{{{LOGINSUCCESS}}}
            }

    	}).catch(function(error) {
          	console.log("Error getting document:", error);
        });
  }

3. Select the state of the screen according to the dataSlot. With that you will have in the dataSlot the user Role. Now you can use that dataSlot to decide what to show to the user. You can use different screens and a switch but personally I rather user states as I have experienced a better behaviour. So after I have created different states in a screen where each one shows different content, I just go the the “State” option in the right side panel (Select screen state based on data slot value.) and select my dataSlot with the userStatus information and edit the script with something like:

var SlotUserStatus = this.props.appActions.dataSlots['ds_SlotUserStatus']

if (SlotUserStatus == 'admin' || SlotUserStatus == 'estudiante' {
 return 0;
} else {
 return 1; 
} 

return input;

I hope you find the information useful and you achieve what you are looking for.

Hi,

Please note that user can potentially use developer tools and change the value in the Data slot so you cannot trust that value: the backend must also check every Admin function that the user is really an admin before it runs the business logic.

In Xano backend you can build checks for user roles on every API funtion. In the Firestore you probably need to do the same thing with rules.