I didn't set out to design an auth UI. I set out to stop answering the same three questions every time I opened the app: who am I signed in as, what can I do, and how do I get out? All three answers ended up in the same place — the footer of the sidebar, in my starter kit's Layout component.
Here's what sits down there: a circle with the first letter of the user's name, uppercased, falling back to "U" if there's no name yet. Under it, the user's name, and a small badge showing user role exactly as the API returned it — "admin" or "user". And a Logout button.
The initial needs no avatar upload, no image pipeline, no broken-image icon when a profile photo is missing. It's a circle with a letter in it, and it works on day one for every user, including the seeded demo admin.
The role badge is the honest part. It shows the role right under the name. There's no separate "account type" page to visit, no settings screen to dig through. If you're wondering why you can't see the Users link, the badge tells you: you're not an admin. That same isAdmin check (user role === 'admin') is what hides the Users nav link above, so the badge and the navigation can never disagree.
And the logout button does the full job, not half of it. Its handler awaits logout() from AuthContext and then navigates to /login. The logout posts to /auth/logout — which revokes the current token on the server — and removes saas_token from localStorage. Only then does the sidebar navigate to /login. Logging out is not "clear the token and hope"; it's revoke server-side, clear client-side, then move. If the API call fails, the client still clears the token, so a dead session can't linger — but the normal path revokes properly.
The same initial shows up again in the top header, top-right. Same letter, same user, two places. That's not decoration; it's a cheap consistency check. If the header and the footer ever disagreed, something would be wrong with the auth state, and you'd spot it instantly.
None of this is clever. That's the point. A starter kit's auth UI shouldn't need a design system or a profile service. It needs to answer three questions at a glance, in one place you always see. An initial, a role badge, and a logout button that actually logs you out — that's the whole thing, and it's enough.
The full Layout, AuthContext, and token handling ship in my Laravel + React SaaS Starter Kit — https://kamranofficial.gumroad.com/l/mhekoig — a $19 one-time boilerplate, so your next project starts with this already working instead of half-built.
Top comments (0)