title: Add own properties to user object in firebase (react, redux)
body: <p>I'm trying to build role-based authentication using firebase, react and redux. 
  Is it any way to add a custom property (such as 'permission' or 'role') to the firebase user object while creating new user from app level, or should I make it done some other way? </p>
  
  <p>@<strong>UPDATE</strong> - <strong>problem resolved</strong>
  I built the role-based firebase authentication using <strong>custom claims</strong> as @frank-van-puffelen suggested. There are three roles: admin, worker and customer. Only admin is able to create worker accounts, customers are logging in via google+.</p>
  
  <p>I used firebase cloud functions to create worker accounts, (because when i was trying to do this locally, <strong>i was automatically signed in with newly created account</strong>), then to set custom claims containing user's role. Cloud function is also decoding a <strong>token</strong>, which contains custom claims.</p>
  
  <p>So here's my code snippets:</p>
  
  <p><strong>Cloud functions</strong>    </p>
  
  <pre><code>const functions = require('firebase-functions');
  const cors = require('cors');
  const corsHandler = cors({origin: true});
  const admin = require('firebase-admin');
  admin.initializeApp();
  
  exports.createWorkerAccount = functions.https.onRequest((request, response) =&gt; {
    corsHandler(request, response, () =&gt; {
      response.status(200).send('Hello from Cloud Function');
    });
    admin.auth().createUser({
     email: request.body.email,
     password: request.body.password
    }).then(() =&gt; {
      admin.auth().getUserByEmail(request.body.email).then((user) =&gt; {
        admin.auth().setCustomUserClaims(user.uid, {role: 'worker'});
      });
    });
  });
  
  exports.getToken = functions.https.onRequest((request, response) =&gt; {
    const token = admin.auth().verifyIdToken(request.body.token) //decoding token that contains custom claims
  .then((t) =&gt; { 
      corsHandler(request, response, () =&gt; {
        response.status(200).send(t.role); //sending role as a response
    });
     });
  });
  </code></pre>
  
  <p>Both functions are called by simple ajax requests.</p>
  
  <p>The user's role comes back as a request response, then it's pushed to <strong>redux state</strong> so I am able to access it from everywhere in the app. </p>
  
  <p>To redirect logged in user to specific path and restrict it I'am using react-router public and private paths and also firebase function onAuthStateChanged.</p>
  
  <p><strong>Detecting firebase auth state changes</strong> - it's redirecting user to specific path based on custom claim.</p>
  
  <pre><code>firebase.auth().onAuthStateChanged((user) =&gt; {
    if (user) {
      store.dispatch(login(user.uid));
  
      firebase.auth().currentUser.getIdToken() //getting current user's token
      .then((t) =&gt; {
        getTokenRequest(t) // Promise containing the reqest
        .then((role) =&gt; {
          store.dispatch(permissions(role)); //dispatching role to store
          renderApp();
          if (role == "admin") {
            console.log('admin');
            history.push('/admin/dashboard'); //redirecting to user-role-specific path
          }
          else if (role == "worker") {
            history.push('/worker/dashboard');
          } 
          else {
            history.push('/customer/dashboard');
          }
        });
      });
  
    } else {
      store.dispatch(logout());
      renderApp();
      history.push('/');
    }
  });
  </code></pre>
  
  <p><strong>React-router public route component</strong> which is disallowing the user to access wrong paths.</p>
  
  <pre><code>export const PublicRoute = ({
    isAuthenticated,
    role,
    component: Component,
    ...rest 
  }) =&gt; (
      &lt;Route {...rest} component={(props) =&gt; {
        if(isAuthenticated &amp;&amp; role == "admin") {
          return &lt;Redirect to="/admin/dashboard" /&gt;
        } else if (isAuthenticated &amp;&amp; role == "") {
          return &lt;Redirect to ="/customer/dashboard" /&gt;
        }
        else {
          return &lt;Component {...props} /&gt;
        }
      }} /&gt;
    );
  
  const mapStateToProps = (state) =&gt; ({
    isAuthenticated: !!state.auth.uid,
    role: state.role
  });
  
  export default connect(mapStateToProps)(PublicRoute);
  </code></pre>