react-token-manager 1.0.0

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "react-token-manager",
+  "version": "1.0.0",
+  "description": "A simple React library to manage JWT tokens",
+  "main": "dist/index.js",      
+  "module": "dist/index.mjs",  
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts",
+    "dev": "tsup src/index.ts --watch"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "js-cookie": "^3.0.5",
+    "jwt-decode": "^4.0.0"
+  },
+  "devDependencies": {
+    "@types/js-cookie": "^3.0.6",
+    "@types/react": "^19.2.14",
+    "react": "^19.2.4",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  }
+}

package/src/core.ts

@@ -0,0 +1,75 @@
+import type { JwtPayload } from 'jwt-decode'
+import * as jwtDecodeModule from 'jwt-decode'
+
+// Properly type the callable function
+const jwtDecode: <T = unknown>(token: string) => T = 
+  (jwtDecodeModule as any).default || jwtDecodeModule
+
+
+export type StorageType = 'localStorage' | 'sessionStorage' | 'cookie'
+
+export interface TokenManagerOptions {
+  storage?: StorageType
+  tokenKey?: string
+}
+
+// ---------------- Global configuration ----------------
+let globalOptions: TokenManagerOptions = {
+  storage: 'localStorage',
+  tokenKey: 'access_token',
+}
+
+export const configureTokenManager = (options: TokenManagerOptions) => {
+  globalOptions = { ...globalOptions, ...options }
+}
+
+// ---------------- TokenManager Class ----------------
+export class TokenManager {
+  private storage: StorageType
+  private tokenKey: string
+
+  constructor(options?: TokenManagerOptions) {
+    const opts = options || globalOptions
+    this.storage = opts.storage || 'localStorage'
+    this.tokenKey = opts.tokenKey || 'access_token'
+  }
+
+  set(token: string) {
+    if (this.storage === 'localStorage') localStorage.setItem(this.tokenKey, token)
+    else if (this.storage === 'sessionStorage') sessionStorage.setItem(this.tokenKey, token)
+    else document.cookie = `${this.tokenKey}=${token}; path=/`
+  }
+
+  get(): string | null {
+    if (this.storage === 'localStorage') return localStorage.getItem(this.tokenKey)
+    if (this.storage === 'sessionStorage') return sessionStorage.getItem(this.tokenKey)
+    const match = document.cookie.match(new RegExp('(^| )' + this.tokenKey + '=([^;]+)'))
+    return match ? match[2] : null
+  }
+
+  remove() {
+    if (this.storage === 'localStorage') localStorage.removeItem(this.tokenKey)
+    else if (this.storage === 'sessionStorage') sessionStorage.removeItem(this.tokenKey)
+    else document.cookie = `${this.tokenKey}=;expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`
+  }
+
+  decode<T = unknown>(): T | null {
+    const token = this.get()
+    if (!token) return null
+    try {
+      return jwtDecode<T>(token) // Now callable
+    } catch {
+      return null
+    }
+  }
+
+  isExpired(): boolean {
+    const decoded = this.decode<JwtPayload>()
+    if (!decoded || !decoded.exp) return true
+    return Date.now() >= decoded.exp * 1000
+  }
+
+  getValid(): string | null {
+    return this.isExpired() ? null : this.get()
+  }
+}

package/src/hook.ts

@@ -0,0 +1,40 @@
+import { useEffect, useState } from 'react'
+import { TokenManager, TokenManagerOptions } from './core'
+
+export interface UseTokenManagerReturn {
+  token: string | null
+  setToken: (value: string) => void
+  removeToken: () => void
+  isExpired: () => boolean
+  decode: <T = unknown>() => T | null
+}
+
+export const useTokenManager = (
+  options?: TokenManagerOptions
+): UseTokenManagerReturn => {
+  const manager = new TokenManager(options)
+
+  const [token, setTokenState] = useState<string | null>(null)
+
+  useEffect(() => {
+    setTokenState(manager.getValid())
+  }, [])
+
+  const setToken = (value: string) => {
+    manager.set(value)
+    setTokenState(value)
+  }
+
+  const removeToken = () => {
+    manager.remove()
+    setTokenState(null)
+  }
+
+  return {
+    token,
+    setToken,
+    removeToken,
+    isExpired: () => manager.isExpired(),
+    decode: <T = unknown>() => manager.decode<T>(),
+  }
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './core'
+export * from './hook'

package/src/useTokenManager.ts

@@ -0,0 +1,38 @@
+import { useEffect, useState, useMemo } from 'react'
+import { TokenManager } from './core'
+
+export interface UseTokenManagerReturn {
+  token: string | null
+  setToken: (value: string) => void
+  removeToken: () => void
+  isExpired: () => boolean
+  decode: <T = unknown>() => T | null
+}
+
+export const useTokenManager = (): UseTokenManagerReturn => {
+  const manager = useMemo(() => new TokenManager(), [])
+
+  const [token, setTokenState] = useState<string | null>(null)
+
+  useEffect(() => {
+    setTokenState(manager.getValid())
+  }, [manager])
+
+  const setToken = (value: string) => {
+    manager.set(value)
+    setTokenState(value)
+  }
+
+  const removeToken = () => {
+    manager.remove()
+    setTokenState(null)
+  }
+
+  return {
+    token,
+    setToken,
+    removeToken,
+    isExpired: () => manager.isExpired(),
+    decode: <T = unknown>() => manager.decode<T>(),
+  }
+}

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+    "compilerOptions": {
+      "target": "ES2019",
+      "module": "ESNext",
+      "declaration": true,
+      "outDir": "dist",
+      "strict": true,
+      "esModuleInterop": true,
+      "moduleResolution": "Node",
+      "skipLibCheck": true
+    },
+    "include": ["src"]
+  }
+