Log In button needs to disappear after visitor enters proper creds.

[jPaulB]

Hi Everybody,

I have a Log-In button that will appear on each page of a website.

However, once a visitor has supplied the correct credentials, that Log-In button should disappear. How do I make that happen?

 

[alexsan147]

Chào mọi người,

Tôi có một nút Đăng nhập sẽ xuất hiện trên mỗi trang của trang web.

Tuy nhiên, sau khi khách truy cập cung cấp thông tin đăng nhập chính xác, nút Đăng nhập sẽ biến mất. Tôi phải làm thế nào để thực hiện điều đó?

you can ask chatgpt kkkk

 

[jPaulB]

Tôi nghĩ bạn vừa dịch câu hỏi của tôi sang tiếng Việt.

Tại sao bạn lại làm vậy?

 

[Moorcam]

There are two layers to this. The actual authentication (verifying credentials) and the display logic (deciding what UI to render). Here's how it typically works:

1. Store something that proves they're logged in​

When login succeeds, the server sends back a session token (or sets a session cookie). This gets stored so it persists across page loads:

• Cookie (especially httpOnly + secure) - best for security, sent automatically with every request
• localStorage/sessionStorage token (e.g. JWT) - common in SPAs, but more exposed to XSS
• Server-side session - server keeps track, browser just holds a session ID cookie

2. Check that state on every page load​

If your pages are server-rendered (e.g. Node/Express, PHP, Django):

js
// Express example
app.get('/some-page', (req, res) => {
const isLoggedIn = checkSession(req); // reads cookie, validates session
res.render('page', { isLoggedIn });
});

html

<!-- template -->
{{#unless isLoggedIn}}
<button id="login-btn">Log In</button>
{{/unless}}

The button simply never gets sent to the browser if they're logged in.

If it's a client-side rendered site (React, Vue, plain JS SPA):

jsx
function Header() {
const [isLoggedIn, setIsLoggedIn] = useState(false);

useEffect(() => {
// check with the server whether the current token/cookie is valid
fetch('/api/me', { credentials: 'include' })
.then(res => setIsLoggedIn(res.ok));
}, []);

return (
<header>
{!isLoggedIn && <button onClick={handleLogin}>Log In</button>}
</header>
);
}

Plain JS / static HTML site:

js

async function updateHeader() {
const res = await fetch('/api/me', { credentials: 'include' });
document.getElementById('login-btn').style.display = res.ok ? 'none' : 'inline-block';
}
updateHeader();

Important: don't rely on hiding the button alone​

Hiding the button is just UX polish. The real security has to happen server-side - every protected page/action must independently verify the session/token, because a user could otherwise just navigate to a protected URL directly or re-show the button via dev tools.

 

[Damian01]

Yes. Once a visitor logs in with valid credentials, the Log In button should no longer be displayed. Instead, the interface should update to reflect that the user is authenticated.

A common approach is to hide the Log In button and replace it with options such as the user's name or profile icon, Dashboard, My Account, or a Log Out button. This prevents users from attempting to log in again and creates a smoother experience.

If the button still appears after a successful login, it usually means the application is not refreshing the authentication state correctly. Check that the login session or authentication token is being stored properly, and make sure the UI re-renders based on the user's logged-in status. Also verify that browser caching or JavaScript errors are not preventing the interface from updating.

This behavior is considered standard practice in most web applications and improves both usability and navigation.