create-next-structure 1.0.0

package/templates/store/slices/authSlice.js

@@ -0,0 +1,86 @@
+/**
+ * Auth Slice
+ * Responsibility: Manage authentication state (user, tokens)
+ *
+ * USAGE GUIDE:
+ * - Import: import { selectCurrentUser, selectToken, setCredentials, logout } from '@/store/slices/authSlice'
+ * - Use in components: const user = useSelector(selectCurrentUser)
+ * - Dispatch actions: dispatch(setCredentials({ user, accessToken, refreshToken }))
+ */
+
+import { createSlice } from "@reduxjs/toolkit";
+
+// Initial state with token from localStorage (client-side only)
+const getInitialState = () => {
+  if (typeof window !== "undefined") {
+    const accessToken = localStorage.getItem("accessToken");
+    const refreshToken = localStorage.getItem("refreshToken");
+    const user = localStorage.getItem("user");
+
+    return {
+      user: user ? JSON.parse(user) : null,
+      accessToken: accessToken || null,
+      refreshToken: refreshToken || null,
+    };
+  }
+
+  return {
+    user: null,
+    accessToken: null,
+    refreshToken: null,
+  };
+};
+
+const authSlice = createSlice({
+  name: "auth",
+  initialState: getInitialState(),
+  reducers: {
+    setCredentials: (state, action) => {
+      const { user, accessToken, refreshToken } = action.payload;
+
+      state.user = user;
+      state.accessToken = accessToken;
+
+      if (refreshToken) {
+        state.refreshToken = refreshToken;
+      }
+
+      // Persist to localStorage
+      if (typeof window !== "undefined") {
+        if (accessToken) localStorage.setItem("accessToken", accessToken);
+        if (refreshToken) localStorage.setItem("refreshToken", refreshToken);
+        if (user) localStorage.setItem("user", JSON.stringify(user));
+      }
+    },
+    updateAccessToken: (state, action) => {
+      state.accessToken = action.payload;
+
+      // Persist to localStorage
+      if (typeof window !== "undefined") {
+        localStorage.setItem("accessToken", action.payload);
+      }
+    },
+    logout: (state) => {
+      state.user = null;
+      state.accessToken = null;
+      state.refreshToken = null;
+
+      // Clear localStorage
+      if (typeof window !== "undefined") {
+        localStorage.removeItem("accessToken");
+        localStorage.removeItem("refreshToken");
+        localStorage.removeItem("user");
+      }
+    },
+  },
+});
+
+export const { setCredentials, updateAccessToken, logout } = authSlice.actions;
+
+export default authSlice.reducer;
+
+// Selectors
+export const selectCurrentUser = (state) => state.auth.user;
+export const selectToken = (state) => state.auth.accessToken;
+export const selectRefreshToken = (state) => state.auth.refreshToken;
+export const selectIsAuthenticated = (state) => !!state.auth.accessToken;

package/templates/store/store.js

@@ -0,0 +1,27 @@
+/**
+ * Redux Store Configuration
+ * Responsibility: Configure Redux store with middleware and reducers
+ *
+ * USAGE GUIDE:
+ * - This is the main Redux store configuration
+ * - All slices and API services are automatically configured
+ * - The store is wrapped in the root layout
+ */
+
+import { configureStore } from "@reduxjs/toolkit";
+import authReducer from "./slices/authSlice";
+import { apiSlice } from "./api/apiSlice";
+
+export const store = configureStore({
+  reducer: {
+    auth: authReducer,
+    // Add the RTK Query API reducer
+    [apiSlice.reducerPath]: apiSlice.reducer,
+  },
+  // Adding the api middleware enables caching, invalidation, polling, and other features of RTK Query
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware().concat(apiSlice.middleware),
+  devTools: process.env.NODE_ENV !== "production",
+});
+
+export default store;