Checking a users custom claims (is an admin) on login with React, Redux and Firebase

问题

I was wondering if someone could help me.

I am currently building an admin dashboard, which can only be accessed by admins. I am using React, Redux and Firebase.

I have managed to set custom claims on specific users in a cloud function like so:

exports.addSuperAdminRole = functions.https.onCall((data, context) => {
  return admin.auth().getUserByEmail(data.email).then(user => {
    return admin.auth().setCustomUserClaims(user.uid, {
      superAdmin: true
    })
  }).then(() => {
    return {
      message: `Success! ${data.email} has been made an admin.`
    }
  }).catch(err => {
    return err;
  });
});

I would now like restrict access to the dashboard for superAdmins only, and was wondering what was the best (most secure) way to do this.

Currently I have the following client side login action working where I check the custom claim and just log the user back out if they are not an admin:

export const login = creds => {
  return async (dispatch, getState, { getFirebase }) => {
    const firebase = getFirebase();
    try {
      await firebase
        .auth()
        .signInWithEmailAndPassword(creds.email, creds.password);

        const currentUser = firebase.auth().currentUser;
        currentUser.getIdTokenResult().then(idTokenResult => {
          console.log(currentUser);
          currentUser.superAdmin = idTokenResult.claims.superAdmin;

          if (!currentUser.superAdmin) {
            console.log('is not admin');
            firebase.logout();
          }
        });

    } catch (error) {
      console.log(error);
      throw new SubmissionError({
        _error: 'Login failed'
      });
    }
  };
};

Is this sufficient or do I need to run a cloud function on login, check the claims, then logout the user? If so how would do this?

Any help you could give me would be greatly appreciated!

Cheers,

James

回答1:

Note that, in any case, what is the most important is that you correctly secured your database with security rules that incorporate the superAdmin claim.

As a matter of fact, anybody who knows the URL of your admin dashboard can easily get your Firebase configuration (even if they are not logged in, as this config object is embedded in the js files of your app). Then they can implement their own web page which calls the signInWithEmailAndPassword() method without being logged out.

In other words, you should not waste extra time "protecting" your dashboard web app, which should be considered as a simple "user interface" that displays data from your database. It is THE database that you need to protect.

Conclusion: hiding the admin dashboard pages (or the admin menu items, and/or the admin buttons), based on the claims (i.e. "modifying the client UI based on the user's role or access level", as explained in the doc) is sufficient, knowing that your database is correctly protected.

回答2:

Checking custom claims in client code is not secure, since client code can always be compromised to do whatever an attacker wants. If you want to be truly secure, you will have to also check claims in security rules and any backend code that operates on the user's behalf.

来源：https://stackoverflow.com/questions/58133041/checking-a-users-custom-claims-is-an-admin-on-login-with-react-redux-and-fire