I'm hoping to be able to create a section of a site that is unable to be read/seen by anyone that's not logged in... I am using Firebase and Javascript

I have read that you are unable to set permissions for files (.htmls ect) so i wont be able to block people from seeing the pages as a whole... Ive also read that this isn't the best practice anyway... So my question is...

What is the protocol for doing this sort of thing? And how can this be done in Firebase?

I have managed to create a user only page before from a tutorial, but this was just done by hiding the content of the page with Javascript and also blocking the permissions to the displayed data through Firestore permissions.

But I don't feel this is adequate for my site as I don't want people being able to read the code in the background or get access to the page at all to begin with.

I have also read that a way to go about doing this is to use Firebase Cloud Functions to check weather the user is logged in and if they are then it spits out the code for the pages from the google servers. Is this a good idea? Or is there a better way?

Any help, tips or insights would be greatly appreciated. Just trying to get a feel for where to begin with this problem. Hoping there is a solution.

Thanks

CodePudding user response：

1. Yes, its a good practice hiding or preventing the UI to be rendered for unauthorize users.

2. Yes, its also a good practice setting the permissions accessing your data from the database.

3. You should also consider middleware, navigation guards or route guards for preventing unauthorized users to visit the restricted page. It would depend on the stack, or what frontend technology you are using. You can find whatever navigation guard you chosse. For vuejs there is vue-router. Also you can use firebase authState listener. Depends on your choice.

CodePudding user response：

Use firebase auth to signInWithEmailAndPassword, or whatever your authentication method was. Then, you can check the auth state in onAuthStateChange, and set your new userId state:

// somewhere...
const [currentUserId, setCurrentUserId] = useState(null) 

// later..
onAuthStateChanged(auth, (user) => {
  if (user && user.uid) {
    setUserId(user.uid)
  }
});

// even later in this component:
return (<Layout userId={currentUserId} />); 

// in wherever you have links, I assumed you passed currentUserId to here:

return (
  currentUserId != null ? (<a href="/hidden-link!">Give content pls</a>) : routeToLogin();
);

Something like this should be fine and secure enough. Noone is gonna go and flip a variable in your extremely obfuscated, transpiled javascript code generated by your bundler, and even if they did find a place to flip a variable, the code would probably throw an error anyway.

You could lazy load that certain page as well once authenticated, then the code for it it wouldn't even be loaded into the users disk until they've successfully signed in.