Next.js Discord

Discord Forum

Is it visible?

Unanswered
Scottish Fold posted this in #help-forum
Open in Discord
Scottish FoldOP
Considering example below, we are making a request to backend to check if the user is authenticated, and display the content

import { useEffect, useState } from 'react';

const Home = () => {
  const [isAuthenticated, setIsAuthenticated] = useState(null);

  useEffect(() => {
    fetch('/api/isAuth')
      .then((response) => response.json())
      .then((data) => {
        setIsAuthenticated(data.isAuthenticated);
      });
  }, []);

  if (isAuthenticated === null) {
    return <div>Loading...</div>;
  }

  if (isAuthenticated) {
    return <div>Authorized Content</div>;
  }

  return <div>Not Authorized</div>;
};

export default Home;


my question is:
is the authorized content visible to the user in any way? or not , like if he enter dev tools can he see what he will get if he was auth ?

7 Replies

Rafael Almeida
Since the component is doing all the logic on client side the browser should have all the code to switch the rendering of the authenticated or not authenticated components, so yes, there is a way to get the code of both contents through the bundle. Sensitive data should be given from the API to only authorized users instead of you hardcoding it in the JSX
Rafael Almeida
Send the data from the API then render it on the client
@Rafael Almeida Send the data from the API then render it on the client
Scottish FoldOP
but the markup will still be visible
Rafael Almeida
That shouldn't really matter in almost all cases 🤔 But if the html is somehow a big deal then you have no other choice if not returning it from the server as well, so that means SSR
Scottish FoldOP
I think the answer is to use middleware which allows you to check if user auth before a request is completed, and if not redirect him
If anyone has a better idea let me know