codez.guru

Become a member
Home » Practical Guide to Zustand » Zustand for Authentication and Session Management

Zustand for Authentication and Session Management

Practical Guide to Zustandzustand

On this Page

  • Why Use Zustand for Auth?
  • Managing Tokens and User Info
  • Handling Login and Logout
  • Persisting Sessions Safely
  • Accessing Auth State in Components

On this Guide

  • Lesson 18: Zustand for Authentication and Session Management
  • Lesson 19: Managing Forms and Multi-Step Wizards with Zustand
  • Lesson 20: Undo/Redo Functionality with State Snapshots
  • Lesson 21: Zustand for App-Wide UI State (Modals, Sidebars, Themes)
  • Lesson 22: Combining Zustand with React Query for Async Data
  • Lesson 23: Real-Time Data Sync with WebSockets and Zustand
  • Lesson 24: Storing User Preferences and Settings
  • Lesson 25: Migrating from Redux or Context to Zustand

Why Use Zustand for Auth?

Zustand is ideal for auth because:

  • ✅ Global access to auth state from any component
  • ✅ No need for providers or context
  • ✅ Easy integration with localStorage or cookies
  • ✅ One store handles both logic and reactive access

Managing Tokens and User Info

Here’s a simple auth store:

import { create } from "zustand";
import { persist } from "zustand/middleware";

type AuthStore = {
  user: null | { id: string; name: string };
  token: string | null;
  login: (user: { id: string; name: string }, token: string) => void;
  logout: () => void;
};

export const useAuthStore = create<authstore>()(
  persist(
    (set) =&gt; ({
      user: null,
      token: null,
      login: (user, token) =&gt; set({ user, token }),
      logout: () =&gt; set({ user: null, token: null }),
    }),
    {
      name: "auth-store", // localStorage key
    }
  )
);

Handling Login and Logout

In your auth service:

// Login function
async function handleLogin(email: string, password: string) {
  const { token, user } = await api.login(email, password);
  useAuthStore.getState().login(user, token);
}

// Logout function
function handleLogout() {
  useAuthStore.getState().logout();
}

This works from any component, service, or route handler.

Persisting Sessions Safely

Zustand’s persist middleware keeps the token in localStorage:

{
  name: "auth-store",
  partialize: (state) =&gt; ({ user: state.user, token: state.token })
}

If you’re using sensitive tokens, you may prefer sessionStorage or secure cookies.

You can also define a custom storage backend:

storage: {
  getItem: (key) =&gt; sessionStorage.getItem(key),
  setItem: (key, value) =&gt; sessionStorage.setItem(key, value),
  removeItem: (key) =&gt; sessionStorage.removeItem(key),
}

Accessing Auth State in Components

const user = useAuthStore((s) =&gt; s.user);
const token = useAuthStore((s) =&gt; s.token);

Use actions:

const logout = useAuthStore((s) =&gt; s.logout);
<button onclick="{logout}">Log Out</button>;

Summary

  • Zustand makes managing auth state simple and centralized
  • You can store and persist user info + tokens
  • Auth logic can live outside the UI and be shared app-wide
  • Customize storage and structure to fit your security needs

Next: Lesson 19 – Managing Forms and Multi-Step Wizards with Zustand