How to hide content based on whether user is logged in?

just like the title suggest, I’m trying to hide a content based on whether user is logged in or not, and I’m going to use this for my navbar. So when user is logged in the page will show dropdown content, and if there is no user logged in, the navbar will show “join us” link instead.

And actually I have achieved this using

{% if user.is_authenticated %}

But there is a problem.

And as you can you can see from the picture above, the content inside {% if user.is_authenticated %} is not really hidden. So my flex css doesn’t work the way I intended it to.

And for more context, here is my code

<header>
    <a class='green-border' href='/signup'>follow us</a>
    <a href='/'>
        <img src={% static 'img/mabu.png' %} height=45>
    </a>
    <a class='green-border' href='/join'>join us</a>
    {% if user %}
        <div class='dropdown'>
            <button class='hover'>{{ user.username }}</button>
            <div class='dropdown-content'>
                <a href='/profile'>profile</a>
                <a href='/library'>library</a>
                <a href='/add-books'>add books</a>
                <a href='/logout'>logout</a>
            </div>
        </div>
    {% else %}
        <a href='/login/'>join us</a>
    {% endif %}
</header>

Is there a way to completely hide those content based on user login state? Or should I do the conditional on the views.py instead?

That’s all, thank you in advance

For clarity, you say you are using:

But your template shows:

Which is not the same test.

1 Like

Ah yes, you’re right. I change the {% if user %} to {% if user.is_authenticated %}, and both join us (before and after if) shows up. From there I figured I made a mistake in my HTML structure.
I should not place join us before the if statement. Thank you for your answer!