@spidy092/auth-client 1.0.0

package/Readme.md

@@ -0,0 +1,112 @@
+# auth-client SDK
+
+A lightweight, framework-agnostic authentication client SDK designed for scalable React (and non-React) apps using centralized login via Keycloak + Auth Service.
+
+---
+
+## 📦 Installation
+
+```bash
+npm install auth-client
+```
+
+---
+
+## 🔧 Setup
+
+```js
+import { auth } from 'auth-client';
+
+auth.setConfig({
+  clientKey: 'admin-ui',
+  authBaseUrl: 'http://auth.localhost:4000/auth',
+});
+```
+
+---
+
+## 🚀 Usage
+
+### Login
+```js
+auth.login();
+```
+
+### Handle Callback
+```js
+auth.handleCallback(); // Call this on /callback page
+```
+
+### Logout
+```js
+auth.logout();
+```
+
+### Get Token
+```js
+const token = auth.getToken();
+```
+
+---
+
+## 🧠 React Integration
+
+### Provider
+```jsx
+import { AuthProvider } from 'auth-client/react/AuthProvider';
+
+<AuthProvider>
+  <App />
+</AuthProvider>
+```
+
+### Hook
+```jsx
+import { useAuth } from 'auth-client/react/useAuth';
+
+const { user, token, login, logout } = useAuth();
+```
+
+---
+
+## 📡 Authenticated API
+```js
+import api from 'auth-client/api';
+
+api.get('/me'); // sends Authorization header
+```
+
+---
+
+## 🧪 Utilities
+```js
+import { decodeToken, isTokenExpired } from 'auth-client/utils/jwt';
+```
+
+---
+
+## ✅ Built-in Features
+- Token handling (in-memory + localStorage)
+- CSRF-safe login with state param
+- Auto API auth header via Axios
+- React support via context and hooks
+
+---
+
+## 🔐 Security
+- No HttpOnly cookies — safe from XSS if you sandbox `localStorage`
+- Handles CSRF via `state`
+- Designed for refresh via backend `/refresh`
+
+---
+
+## 📦 To Publish Locally
+```bash
+npm pack
+npm install ../auth-client-1.0.0.tgz
+```
+
+---
+
+## 🏁 License
+MIT

package/api.js

@@ -0,0 +1,38 @@
+// auth-client/api.js
+import axios from 'axios';
+import { getToken } from './token';
+import { getConfig } from './config';
+
+// ✅ Fixed: Create instance without baseURL initially
+const api = axios.create({
+  withCredentials: true,
+});
+
+// ✅ Fixed: Set baseURL dynamically in interceptor
+api.interceptors.request.use((config) => {
+  // Set baseURL dynamically each time
+  if (!config.baseURL) {
+    const authConfig = getConfig();
+    config.baseURL = authConfig?.authBaseUrl || 'http://localhost:4000';
+  }
+  
+  const token = getToken();
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+  return config;
+});
+
+// ✅ Added: Response interceptor for token refresh/error handling
+api.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (error.response?.status === 401) {
+      console.warn('API request failed with 401, token may be expired');
+      // You could trigger token refresh or logout here
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default api;

package/config.js

@@ -0,0 +1,26 @@
+let config = {
+  clientKey: null,
+  authBaseUrl: null,
+  redirectUri: null,
+  usePkce: false, // optional future
+};
+
+export function setConfig(customConfig = {}) {
+  if (!customConfig.clientKey || !customConfig.authBaseUrl) {
+    throw new Error('Missing required config: clientKey and authBaseUrl are required');
+  }
+
+  config = {
+    ...config,
+    ...customConfig,
+    redirectUri: customConfig.redirectUri || window.location.origin + '/callback',
+  };
+}
+
+export function getConfig() {
+  return { ...config };
+}
+
+
+
+// pass client key and authbaseurl and redirectUri

package/core.js

@@ -0,0 +1,109 @@
+
+import { setToken, clearToken, getToken } from './token';
+import { getConfig } from './config';
+
+export function login(clientKeyArg, redirectUriArg, stateArg) {
+  const { 
+    clientKey: defaultClientKey, 
+    authBaseUrl, 
+    redirectUri: defaultRedirectUri,
+    accountUiUrl 
+  } = getConfig();
+
+  const clientKey = clientKeyArg || defaultClientKey;
+  const redirectUri = redirectUriArg || defaultRedirectUri;
+  const state = stateArg || crypto.randomUUID();
+
+  if (!clientKey || !redirectUri) {
+    throw new Error('Missing clientKey or redirectUri');
+  }
+
+  // Store original app info for return after auth
+  sessionStorage.setItem('authState', state);
+  sessionStorage.setItem('originalApp', clientKey);
+  sessionStorage.setItem('returnUrl', redirectUri);
+
+  // Redirect to centralized Account UI instead of direct auth service
+  const accountLoginUrl = `${accountUiUrl}/login?` + new URLSearchParams({
+    client: clientKey,
+    redirect_uri: redirectUri,
+    state: state
+  });
+
+  console.log('Redirecting to Account UI:', accountLoginUrl);
+  window.location.href = accountLoginUrl;
+}
+
+export function logout() {
+  const { clientKey, authBaseUrl, accountUiUrl } = getConfig();
+  const token = getToken();
+  
+  if (!token) {
+    window.location.href = `${accountUiUrl}/login`;
+    return;
+  }
+
+  clearToken();
+  
+  // Call logout endpoint
+  fetch(`${authBaseUrl}/logout/${clientKey}`, {
+    method: 'POST',
+    credentials: 'include',
+    headers: {
+      'Authorization': `Bearer ${token}`
+    }
+  }).catch(console.error);
+
+  // Redirect to Account UI logout page
+  window.location.href = `${accountUiUrl}/logout?client=${clientKey}`;
+}
+
+export function handleCallback() {
+  const params = new URLSearchParams(window.location.search);
+  const accessToken = params.get('access_token');
+  const error = params.get('error');
+  const state = params.get('state');
+  const storedState = sessionStorage.getItem('authState');
+
+  // Validate state
+  if (state && storedState && state !== storedState) {
+    throw new Error('Invalid state. Possible CSRF attack.');
+  }
+
+  sessionStorage.removeItem('authState');
+  sessionStorage.removeItem('originalApp');
+  sessionStorage.removeItem('returnUrl');
+
+  if (error) {
+    throw new Error(`Authentication failed: ${error}`);
+  }
+
+  if (accessToken) {
+    setToken(accessToken);
+    return accessToken;
+  }
+
+  throw new Error('No access token found in callback URL');
+}
+
+export async function refreshToken() {
+  const { clientKey, authBaseUrl } = getConfig();
+  
+  try {
+    const response = await fetch(`${authBaseUrl}/refresh/${clientKey}`, {
+      method: 'POST',
+      credentials: 'include',
+    });
+
+    if (!response.ok) {
+      throw new Error('Refresh failed');
+    }
+
+    const { access_token } = await response.json();
+    setToken(access_token);
+    return access_token;
+  } catch (err) {
+    clearToken();
+    throw err;
+  }
+}

package/index.js

@@ -0,0 +1,48 @@
+import { setConfig, getConfig } from './config';
+import { login, logout, handleCallback, refreshToken } from './core';
+import { getToken, setToken, clearToken } from './token';
+import api from './api';
+import { decodeToken, isTokenExpired } from './utils/jwt';
+
+export const auth = {
+  // 🔧 Config
+  setConfig,
+  getConfig,
+
+  // 🔐 Core flows
+  login,
+  logout,
+  handleCallback,
+  refreshToken,
+
+  // 🔑 Token management
+  getToken,
+  setToken,
+  clearToken,
+
+  // 🌐 Authenticated API client
+  api,
+
+  // 🧪 Utilities
+  decodeToken,
+  isTokenExpired,
+  
+  // 🔄 Auto-refresh setup
+  startTokenRefresh: () => {
+    const interval = setInterval(async () => {
+      const token = getToken();
+      if (token && isTokenExpired(token, 300)) { // Refresh 5 min before expiry
+        try {
+          await refreshToken();
+        } catch (err) {
+          console.error('Auto-refresh failed:', err);
+          clearInterval(interval);
+        }
+      }
+    }, 60000); // Check every minute
+    return interval;
+  }
+};
+
+export { AuthProvider } from './react/AuthProvider';
+export { useAuth } from './react/useAuth';

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@spidy092/auth-client",                      
+  "version": "1.0.0",                        
+  "description": "Scalable frontend auth SDK for centralized login using Keycloak + Auth Service.",
+  "main": "index.js",                         
+  "module": "index.js",                                           
+  "type": "module",                           
+  "exports": {
+    ".": "./index.js",
+    "./react/AuthProvider": "./react/AuthProvider.jsx",
+    "./react/useAuth": "./react/useAuth.js"
+  },
+  "files": [
+    "*.js",
+    "react/",
+    "utils/",
+    "token.js",
+    "core.js",
+    "config.js",
+    "api.js",
+    "README.md"
+  ],
+  "keywords": [
+    "auth",
+    "sdk",
+    "keycloak",
+    "react",
+    "access-token",
+    "centralized-login"
+  ],
+  "author": {
+    "name": "Spiddyy",
+    "url": "https://github.com/Spidy092"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Spidy092/auth-client.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Spidy092/auth-client/issues"
+  },
+  "homepage": "https://github.com/Spidy092/auth-client#readme",
+  "dependencies": {
+    "axios": "^1.6.0",
+    "jwt-decode": "^4.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0"
+  },
+  "engines": {
+    "node": ">=14.0.0",
+    "npm": ">=6.0.0"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "prepublishOnly": "echo 'Run build scripts here if needed'"
+  }
+}

package/react/AuthProvider.jsx

@@ -0,0 +1,79 @@
+// auth-client/react/AuthProvider.jsx
+import React, { createContext, useState, useEffect } from 'react';
+import { getToken, setToken, clearToken } from '../token';
+import { getConfig } from '../config';
+import { login as coreLogin, logout as coreLogout } from '../core';
+
+export const AuthContext = createContext();
+
+export function AuthProvider({ children }) {
+  const [token, setTokenState] = useState(getToken());
+  const [user, setUser] = useState(null);
+  const [loading, setLoading] = useState(!!token); // Loading if we have a token to validate
+
+  useEffect(() => {
+    if (!token) {
+      setLoading(false);
+      return;
+    }
+    
+    const { authBaseUrl } = getConfig();
+    if (!authBaseUrl) {
+      console.warn('AuthProvider: No authBaseUrl configured');
+      setLoading(false);
+      return;
+    }
+
+    fetch(`${authBaseUrl}/me`, {
+      headers: { Authorization: `Bearer ${token}` },
+      credentials: 'include',
+    })
+      .then(res => {
+        if (!res.ok) throw new Error('Failed to fetch user');
+        return res.json();
+      })
+      .then(userData => {
+        setUser(userData);
+        setLoading(false);
+      })
+      .catch(err => {
+        console.error('Fetch user error:', err);
+        clearToken();
+        setTokenState(null);
+        setUser(null);
+        setLoading(false);
+      });
+  }, [token]);
+
+  const login = (clientKey, redirectUri, state) => {
+    coreLogin(clientKey, redirectUri, state);
+  };
+
+  const logout = () => {
+    coreLogout();
+    setUser(null);
+    setTokenState(null);
+  };
+
+  const value = {
+    token,
+    user,
+    loading,
+    login,
+    logout,
+    isAuthenticated: !!token && !!user,
+    setUser,
+    setToken: (newToken) => {
+      setToken(newToken);
+      setTokenState(newToken);
+    },
+    clearToken: () => {
+      clearToken();
+      setTokenState(null);
+      setUser(null);
+    },
+  };
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}
+

package/react/useAuth.js

@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { AuthContext } from './AuthProvider';
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+}

package/token.js

@@ -0,0 +1,31 @@
+let memoryToken = null;
+
+export function setToken(token) {
+  memoryToken = token;
+  try {
+    localStorage.setItem('authToken', token);
+  } catch (err) {
+    console.warn('Could not write token to localStorage:', err);
+  }
+}
+
+export function getToken() {
+  if (memoryToken) return memoryToken;
+  try {
+    const stored = localStorage.getItem('authToken');
+    memoryToken = stored;
+    return stored;
+  } catch (err) {
+    console.warn('Could not read token from localStorage:', err);
+    return null;
+  }
+}
+
+export function clearToken() {
+  memoryToken = null;
+  try {
+    localStorage.removeItem('authToken');
+  } catch (err) {
+    console.warn('Could not clear token from localStorage:', err);
+  }
+}

package/utils/jwt.js

@@ -0,0 +1,18 @@
+// auth-client/utils/jwt.js
+import { jwtDecode } from 'jwt-decode';
+
+export function decodeToken(token) {
+  try {
+    return jwtDecode(token);
+  } catch (err) {
+    console.warn('Failed to decode JWT:', err);
+    return null;
+  }
+}
+
+export function isTokenExpired(token, bufferSeconds = 60) {
+  const decoded = decodeToken(token);
+  if (!decoded || !decoded.exp) return true;
+  const currentTime = Date.now() / 1000;
+  return decoded.exp < currentTime + bufferSeconds;
+}