Admin and user login from same login page in react and back end i am using firebase

Question

I want to use one login form for admin and a user in my project for react js and firebase,only the admin to be able to login and be redirected to the admin panel and the user to the user profile with,

Admin panel and user login in firebase and reactjs. Anybody knows how to do this?

Answer 1

There are some hints and keywords: 1> For firebase auth user, you can set custom claims to set role to user, ex. admin or user. Please refer to the link below https://firebase.google.com/docs/auth/admin/custom-claims Firebase - how to set custom claim from the console

2> When log in, you have to listen to auth state changed to get user role thanks to the getIdTokenResult function

    onAuthStateChanged(auth, async (user) => {
        if (user) {
            user.getIdTokenResult(true).then((result) => {
             // Confirm the user is an Admin.
             if (!!result.claims.admin) {
               // Show admin UI.
               showAdminUI();
             } else {
                // Show regular user UI.
                showRegularUI();
             }
            })
          }
    });

or Check for firebase's auth user's role when or after logging in https://firebase.google.com/docs/auth/admin/custom-claims#access_custom_claims_on_the_client