CODEWITHSUNDEEP
htmlcssreactjsfirebase
Matt123
Matt123

Reputation: 411

Conditional rendering based on authentication security 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

Upvotes: 0

Views: 228

Answers (2)

Kavy Bamaniya
Kavy Bamaniya

Reputation: 1

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

Upvotes: 0

Frank van Puffelen
Frank van Puffelen

Reputation: 598740

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.

Upvotes: 1

Related Questions