🔐 Auth Store

The Auth Store manages user authentication state in the Zezo OTT App. It uses Zustand for global state management and MMKV for encrypted persistence. It handles login, logout, and session restoration with a minimal, secure API.

🏗️ Store Structure

src/ZezoOtt/store/authStore.ts


import { create } from "zustand";
import { devtools, persist, createJSONStorage } from "zustand/middleware";
import { mmkvStorage, tokenStorage } from "./storage";
import { resetAndNavigate } from "@ZezoOtt/utils/NavigationUtil";
import { Route } from "@navigation/routes";
import { EdgeInsets } from "react-native-safe-area-context";
import { showMessage } from "react-native-flash-message";
import { IUser } from "@zezosoft/zezo-ott-api-client";
import { getZezoOtt } from "../http";
 
interface User extends IUser {
  id?: string;
}
 
interface IAuthStore {
  user: User | null;
  setUser: (user: User) => void;
  logout: (insets?: EdgeInsets) => void;
}
 
export const useAuthStore = create<IAuthStore>()(
  devtools(
    persist(
      (set) => ({
        user: null,
 
        setUser: (user: User) => set({ user }),
 
        logout: async (insets?: EdgeInsets) => {
          try {
            await getZezoOtt()
              .auth.logout()
              .catch(() => {
                console.log("Logout failed on server");
              });
 
            showMessage({
              message: "Logged out successfully",
              type: "success",
              icon: "success",
              floating: true,
              statusBarHeight: insets?.top,
            });
          } catch (error) {
            console.warn("Local logout fallback", error);
          } finally {
            set({ user: null });
            tokenStorage.clearAll();
            resetAndNavigate(Route.LoginWithEmail);
          }
        },
      }),
      {
        name: "auth-storage",
        storage: createJSONStorage(() => mmkvStorage),
      }
    )
  )
);

📘 Reference: getZezoOtt().auth.logout() Documentation

🔗 See related route definition: Route enum from @navigation/routes.ts

🔐 Persistence

This store uses Zustand’s persist middleware with a secure MMKV backend:


persist({ ... }, {
  name: "auth-storage",
  storage: createJSONStorage(() => mmkvStorage),
})

MMKV provides encrypted on-device storage.
User state is saved and restored across app launches.
Token clearing is handled separately via tokenStorage.

🧪 Usage

⚠️ If showMessage doesn’t display notifications, ensure FlashMessage is added to your root App.tsx. See Step 8 – Update App.tsx.

ℹ️ useSafeAreaInsets is imported from react-native-safe-area-context.

useAuthStore


import { useAuthStore } from "@ZezoOtt/store/authStore";

This hook gives access to authentication state and actions like setUser() and logout().


const { setUser } = useAuthStore();
setUser({
  id: "123",
  name: "John Doe",
  email: "john@zezo.com",
});

Logout


function handleLogout() {
  const insets = useSafeAreaInsets();
  const { logout } = useAuthStore();
  logout(insets);
}

💾 MMKV Storage Adapter

A secure adapter that bridges Zustand and MMKV for encrypted local persistence.

src/ZezoOtt/store/storage.ts


import { MMKV } from "react-native-mmkv";
 
export const storage = new MMKV({
  id: "appStorage",
  encryptionKey: "storageSecret",
});
 
export const mmkvStorage = {
  setItem: (key: string, value: string) => {
    storage.set(key, value);
  },
  getItem: (key: string): string | null => {
    const value = storage.getString(key);
    return value ?? null;
  },
  removeItem: (key: string) => {
    storage.delete(key);
  },
};

storage.ts: MMKV + local state persistence
NavigationUtil.ts: Navigation reset helper
tokenStorage: Secure token store (handled separately)
@zezosoft/zezo-ott-api-client: Typed API client