CODEWITHSUNDEEP
javascriptreactjsauthenticationfirebasefirebase-authentication
Raphael Rafatpanah
Raphael Rafatpanah

Reputation: 19967

Security - How to prevent rendering of React Component to unauthenticated users?

I'm trying to wrap my head around security issues when using Firebase Auth.

firebase.auth().onAuthStateChanged(user => {
  if (user) {
    // User is signed in.
  } else {
    // No user is signed in.
  }
});

Let's say I have a single page React that renders a <Login /> component when user is null, and render the <App /> if user is not null, using this.state.

Can't someone just go into React DevTools and change the state of user to render <App />?

Knowing that Firebase provides an Auth ID token, is there a way to guarantee unauthenticated users are not able to render <App />?

Upvotes: 0

Views: 279

Answers (1)

Ross Mackay
Ross Mackay

Reputation: 972

I'd have a think about if there's anything in there really worth protecting, if they're able to change the user state they won't be able to do much more, as I'm guessing you'll be making other API calls or rendering views based off that data, so they won't render data that isn't there.

Even if you were able to prevent rendering, there's nothing to stop someone trawling through the source to see what was outputted anyway, so if there's something critical that should be completely inaccessible, then it probably belongs on the server instead (and the devtools should probably be disabled in production either way)

Upvotes: 3

Related Questions