Conditional rendering based on authentication security question

Question

I have an app that uses firebase authentication. My question is, what is the proper way to do conditional rendering based on whether the user is logged in or not? If I use something like:

(conditionalboolean) ? render (<p>yes logged in</p>) : render (<p>not logged in</>)

would the data I want to protect still be downloaded to their browser and visible on developer tools somehow? I am not finding an answer to this question. Can someone please point me in the right direction?

thanks! Matt

I wrote a quick very generic answer below. It is hard to be more concrete, given that you're not very specific in your question either. If you want a more concrete, actionable answer, make sure that your question includes enough information about what data you're loading from the server (the snippet you have now merely shows a different piece of static HTML). — Frank van Puffelen
– Frank van Puffelen, Commented Oct 10, 2019 at 23:51

Frank van Puffelen · Accepted Answer · 2019-10-10 23:48:34Z

1

If the showing/hiding of the content happens in the browser, then indeed that content will have to live in the user's browser before it can be hidden. And that means that it is discoverable by malicious users.

If the showing/hiding happens in server-side code, you can prevent hidden content from reaching the user's browser entirely. And if the content doesn't reach the user's browser, they can never discover it there.

answered Oct 10, 2019 at 23:48

Frank van Puffelen

603k85 gold badges896 silver badges869 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Matt123 Over a year ago

Thanks! Do you have any resources on doing this with nodejs? It would be nice because I'm still not exactly sure what I'm looking for. Thanks again!!

Kavy Bamaniya · Accepted Answer · 2025-01-28 14:01:50Z

0

guest Directive: This checks if the user is a guest (not logged in). If true, it displays a "Login" button linking to the login route.

@auth Directive: This checks if the user is authenticated (logged in). If true, it displays a "Logout" button.

Logout Button with onclick: When the "Logout" button is clicked, it prevents the default link action (event.preventDefault()) and submits a hidden form (#logout-form`) to log the user out.

Hidden Logout Form: The form is used to send a POST request to the logout route, ensuring CSRF protection is included.

@guest
          <a href="{{ route('login') }}" class="btn btn-dark">Login</a>
@endguest

@auth
    <a href="{{ route('logout') }}" class="btn btn-danger" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
    Logout
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
    @csrf
</form>
 @endauth

edited Jan 28 at 14:01

answered Jan 20 at 12:57

Kavy Bamaniya

11 bronze badge

1 Comment

Community Jan 20 at 13:41

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Conditional rendering based on authentication security question

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related