shortcut-next 0.2.0 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shortcut-next",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Scaffold Next.js apps with MUI base or Tailwind v4 preset.",
   "main": "index.js",
   "bin": {
@@ -56,7 +56,11 @@
     "cac": "^6.7.14",
     "execa": "^9.6.0",
     "fs-extra": "^11.3.1",
+    "js-cookie": "^3.0.5",
     "kolorist": "^1.8.0",
     "ora": "^8.2.0"
+  },
+  "devDependencies": {
+    "@types/js-cookie": "^3.0.6"
   }
 }

package/templates/base/@core/clients/apiClient.ts

@@ -1,5 +1,5 @@
 import axios, { AxiosError, AxiosInstance, InternalAxiosRequestConfig } from 'axios'
-import { accessToken, baseURL, refreshAPI, logoutAPI, fallbackPage, requestTimeout } from '../configs/clientConfig'
+import { baseURL, fallbackPage, requestTimeout, authConfig } from '../configs/clientConfig'
 
 interface CustomAxiosRequestConfig extends InternalAxiosRequestConfig {
   _retry?: boolean
@@ -37,8 +37,8 @@ const processQueue = (error: AxiosError | null, token: string | null = null) =>
 // ** --- Request Interceptor
 apiClient.interceptors.request.use((config: CustomAxiosRequestConfig) => {
   if (typeof window !== 'undefined') {
-    const token = localStorage.getItem(accessToken)
-    if (token && !config.url?.includes(refreshAPI)) {
+    const token = localStorage.getItem(authConfig.storageTokenKeyName)
+    if (token && !config.url?.includes(authConfig.refreshEndpoint)) {
       config.headers.Authorization = `Bearer ${token}`
     }
   }
@@ -74,7 +74,7 @@ apiClient.interceptors.response.use(
         const { token } = refreshRes.data
 
         if (typeof window !== 'undefined') {
-          localStorage.setItem(accessToken, token)
+          localStorage.setItem(authConfig.storageTokenKeyName, token)
         }
 
         processQueue(null, token)
@@ -101,20 +101,27 @@ apiClient.interceptors.response.use(
 
 // ** --- Refresh function (uses cookies)
 const refreshToken = () => {
-  return axios.post<RefreshResponse>(`${baseURL}${refreshAPI}`, {}, { withCredentials: true })
+  return axios.post<RefreshResponse>(`${baseURL}${authConfig.refreshEndpoint}`, {}, { withCredentials: true })
 }
 
 // ** --- Logout function
 const logoutUser = async () => {
-  try {
-    await axios.post(`${baseURL}${logoutAPI}`, {}, { withCredentials: true })
-  } catch (error) {
-    console.error(error)
-  }
   if (typeof window !== 'undefined') {
-    localStorage.removeItem(accessToken)
+    // Clear all auth-related storage
+    localStorage.removeItem(authConfig.storageTokenKeyName)
+    localStorage.removeItem(authConfig.storageUserDataKeyName)
+    localStorage.removeItem(authConfig.storageRefreshTokenKeyName)
+
+    // Clear cookies
+    document.cookie = `${authConfig.cookieName}=; path=/; expires=Thu, 01 Jan 1970 00:00:01 GMT`
+    document.cookie = `${authConfig.storageRefreshTokenKeyName}=; path=/; expires=Thu, 01 Jan 1970 00:00:01 GMT`
+
+    // Redirect to login page
     window.location.href = fallbackPage
   }
 }
 
 export default apiClient
+
+// ** Export utilities for external use
+export { logoutUser }

package/templates/base/@core/configs/authConfig.ts

@@ -0,0 +1,47 @@
+// ** Auth Types - Simple and modifiable
+export interface User {
+  id: string
+  email: string
+  name?: string
+  role?: string
+  [key: string]: unknown // Allow additional custom fields
+}
+
+export interface LoginCredentials {
+  email: string
+  password: string
+  [key: string]: unknown // Allow additional fields like rememberMe, etc.
+}
+
+export interface SignupCredentials {
+  email: string
+  password: string
+  name?: string
+  [key: string]: unknown // Allow additional fields
+}
+
+export interface AuthResponse {
+  user: User
+  accessToken: string
+  refreshToken?: string
+  [key: string]: unknown // Allow additional response fields
+}
+
+export interface AuthContextType {
+  // ** State
+  user: User | null
+  isAuthenticated: boolean
+  isLoading: boolean
+
+  // ** Actions
+  login: (credentials: LoginCredentials, onError?: ErrorCallback) => Promise<void>
+  signup: (credentials: SignupCredentials, onError?: ErrorCallback) => Promise<void>
+  logout: () => Promise<void>
+
+  // ** Utilities
+  setUser: (user: User | null) => void
+  setLoading: (loading: boolean) => void
+}
+
+// ** Error callback type
+export type ErrorCallback = (error: string | Record<string, string>) => void

package/templates/base/@core/configs/clientConfig.ts

@@ -1,22 +1,33 @@
-// ** Base API path (rewritten to backend in next.config.ts)
-const baseURL = '/api'
+// ** Auth Configuration - Easily customizable for different apps
+const authConfig = {
+  // ** API Configuration
+  baseURL: '/api',
+  loginEndpoint: '/auth/login',
+  signupEndpoint: '/auth/signup',
+  refreshEndpoint: '/auth/refresh',
 
-// ** Keys for localStorage/session
-const accessToken = 'accessToken'
-const refreshAPI = '/refresh-token'
-const logoutAPI = '/logout'
+  // ** Storage Keys
+  storageTokenKeyName: 'accessToken',
+  storageRefreshTokenKeyName: 'refreshToken',
+  storageUserDataKeyName: 'userData',
 
-// ** Where to redirect after logout
-const fallbackPage = '/login'
+  // ** Routes
+  loginPageURL: '/login',
+  homePageURL: '/',
 
-// ** Axios defaults
-const requestTimeout = 15000 // 15 seconds
+  // ** Request Configuration
+  requestTimeout: 15000, // 15 seconds
 
-export {
-  baseURL,
-  accessToken,
-  refreshAPI,
-  logoutAPI,
-  fallbackPage,
-  requestTimeout
+  // ** Cookie Configuration
+  cookieName: 'accessToken',
+  cookieMaxAge: 60 * 60 * 24 * 7, // 7 days
+  cookieSecure: typeof window !== 'undefined' ? window.location.protocol === 'https:' : true,
+  cookieSameSite: 'Strict' as const
 }
+
+// ** Legacy exports for backward compatibility
+const baseURL = authConfig.baseURL
+const fallbackPage = authConfig.loginPageURL
+const requestTimeout = authConfig.requestTimeout
+
+export { authConfig, baseURL, fallbackPage, requestTimeout }

package/templates/base/@core/context/AuthContext.tsx

@@ -0,0 +1,202 @@
+'use client'
+
+import { createContext, useContext, useEffect, useState, ReactNode } from 'react'
+import { useRouter } from 'next/navigation'
+import axios from 'axios'
+import { authConfig } from '@/@core/configs/clientConfig'
+import type {
+  User,
+  LoginCredentials,
+  SignupCredentials,
+  AuthResponse,
+  AuthContextType,
+  ErrorCallback
+} from '@/@core/configs/authConfig'
+
+// ** Default context value
+const defaultProvider: AuthContextType = {
+  user: null,
+  isAuthenticated: false,
+  isLoading: true,
+  login: () => Promise.resolve(),
+  signup: () => Promise.resolve(),
+  logout: () => Promise.resolve(),
+  setUser: () => null,
+  setLoading: () => null
+}
+
+// ** Create context
+const AuthContext = createContext<AuthContextType>(defaultProvider)
+
+// ** Auth Provider Props
+interface AuthProviderProps {
+  children: ReactNode
+}
+
+// ** Auth Provider Component
+export const AuthProvider = ({ children }: AuthProviderProps) => {
+  // ** State
+  const [user, setUser] = useState<User | null>(null)
+  const [isLoading, setIsLoading] = useState<boolean>(true)
+
+  // ** Hooks
+  const router = useRouter()
+
+  // ** Computed
+  const isAuthenticated = !!user
+
+  // ** Initialize auth state on mount
+  useEffect(() => {
+    const initAuth = () => {
+      try {
+        const token = localStorage.getItem(authConfig.storageTokenKeyName)
+        const userData = localStorage.getItem(authConfig.storageUserDataKeyName)
+
+        if (token && userData) {
+          const parsedUser = JSON.parse(userData) as User
+          setUser(parsedUser)
+        }
+      } catch (error) {
+        console.error('Failed to initialize auth:', error)
+        // Clear invalid data
+        localStorage.removeItem(authConfig.storageTokenKeyName)
+        localStorage.removeItem(authConfig.storageUserDataKeyName)
+        localStorage.removeItem(authConfig.storageRefreshTokenKeyName)
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    initAuth()
+  }, [])
+
+  // ** Login function
+  const login = async (credentials: LoginCredentials, onError?: ErrorCallback): Promise<void> => {
+    try {
+      setIsLoading(true)
+
+      const response = await axios.post<AuthResponse>(
+        `${authConfig.baseURL}${authConfig.loginEndpoint}`,
+        credentials,
+        { timeout: authConfig.requestTimeout }
+      )
+
+      const { user: userData, accessToken, refreshToken } = response.data
+
+      // Store tokens and user data
+      localStorage.setItem(authConfig.storageTokenKeyName, accessToken)
+      localStorage.setItem(authConfig.storageUserDataKeyName, JSON.stringify(userData))
+
+      if (refreshToken) {
+        localStorage.setItem(authConfig.storageRefreshTokenKeyName, refreshToken)
+      }
+
+      // Set cookie for SSR
+      document.cookie = `${authConfig.cookieName}=${accessToken}; path=/; max-age=${authConfig.cookieMaxAge}; SameSite=${authConfig.cookieSameSite}${authConfig.cookieSecure ? '; Secure' : ''}`
+
+      setUser(userData)
+
+      // Redirect to home page
+      router.push(authConfig.homePageURL)
+
+    } catch (error) {
+      console.error('Login failed:', error)
+      const message = axios.isAxiosError(error) && error.response?.data?.message
+        ? error.response.data.message
+        : 'Login failed. Please try again.'
+
+      onError?.(message)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  // ** Signup function
+  const signup = async (credentials: SignupCredentials, onError?: ErrorCallback): Promise<void> => {
+    try {
+      setIsLoading(true)
+
+      const response = await axios.post<AuthResponse>(
+        `${authConfig.baseURL}${authConfig.signupEndpoint}`,
+        credentials,
+        { timeout: authConfig.requestTimeout }
+      )
+
+      const { user: userData, accessToken, refreshToken } = response.data
+
+      // Store tokens and user data
+      localStorage.setItem(authConfig.storageTokenKeyName, accessToken)
+      localStorage.setItem(authConfig.storageUserDataKeyName, JSON.stringify(userData))
+
+      if (refreshToken) {
+        localStorage.setItem(authConfig.storageRefreshTokenKeyName, refreshToken)
+      }
+
+      // Set cookie for SSR
+      document.cookie = `${authConfig.cookieName}=${accessToken}; path=/; max-age=${authConfig.cookieMaxAge}; SameSite=${authConfig.cookieSameSite}${authConfig.cookieSecure ? '; Secure' : ''}`
+
+      setUser(userData)
+
+      // Redirect to home page
+      router.push(authConfig.homePageURL)
+
+    } catch (error) {
+      console.error('Signup failed:', error)
+      const message = axios.isAxiosError(error) && error.response?.data?.message
+        ? error.response.data.message
+        : 'Signup failed. Please try again.'
+
+      onError?.(message)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  // ** Logout function
+  const logout = async (): Promise<void> => {
+      // Clear all auth data regardless of API call result
+      setUser(null)
+      localStorage.removeItem(authConfig.storageTokenKeyName)
+      localStorage.removeItem(authConfig.storageUserDataKeyName)
+      localStorage.removeItem(authConfig.storageRefreshTokenKeyName)
+
+      // Clear cookie
+      document.cookie = `${authConfig.cookieName}=; path=/; expires=Thu, 01 Jan 1970 00:00:01 GMT`
+
+      // Redirect to login page
+      router.push(authConfig.loginPageURL)
+
+  }
+
+  // ** Context value
+  const contextValue: AuthContextType = {
+    user,
+    isAuthenticated,
+    isLoading,
+    login,
+    signup,
+    logout,
+    setUser,
+    setLoading: setIsLoading
+  }
+
+  return (
+    <AuthContext.Provider value={contextValue}>
+      {children}
+    </AuthContext.Provider>
+  )
+}
+
+// ** Auth Hook
+export const useAuth = (): AuthContextType => {
+  const context = useContext(AuthContext)
+
+  if (!context) {
+    throw new Error('useAuth must be used within an AuthProvider')
+  }
+
+  return context
+}
+
+// ** Export context for advanced usage
+export { AuthContext }

package/templates/base/providers/AppProviders.tsx

@@ -8,11 +8,12 @@ import I18nProvider from '@/providers/I18nProvider'
 import HydrationGate from '@/components/HydrationGate'
 import { useSettings } from '@/@core/hooks/useSettings'
 import Spinner from '@/components/loaders/Spinner'
+import { AuthProvider } from '@/@core/context/AuthContext'
 
 function ThemedProviders({ children, client }: { children: React.ReactNode; client: QueryClient }) {
   const { settings } = useSettings()
   return (
-    <ThemeComponent settings={{ ...settings }}>
+    <ThemeComponent settings={settings}>
       <QueryClientProvider client={client}>
         <I18nProvider>
           <HydrationGate fallback={<Spinner />}>{children}</HydrationGate>
@@ -26,8 +27,10 @@ export default function AppProviders({ children }: { children: React.ReactNode }
   const [client] = useState(() => new QueryClient())
 
   return (
-    <SettingsProvider>
-      <ThemedProviders client={client}>{children}</ThemedProviders>
-    </SettingsProvider>
+    <AuthProvider>
+      <SettingsProvider>
+        <ThemedProviders client={client}>{children}</ThemedProviders>
+      </SettingsProvider>
+    </AuthProvider>
   )
 }