// Authentication Action Types export const LOGIN_REQUEST = 'LOGIN_REQUEST'; export const LOGIN_SUCCESS = 'LOGIN_SUCCESS'; export const LOGIN_FAILURE = 'LOGIN_FAILURE'; export const LOGOUT_REQUEST = 'LOGOUT_REQUEST'; export const LOGOUT_SUCCESS = 'LOGOUT_SUCCESS'; export const SET_TOKEN = 'SET_TOKEN'; // Action to set token initially (e.g., from storage) export const CLEAR_TOKEN = 'CLEAR_TOKEN'; // Action to clear token // You might add REFRESH_TOKEN actions here if needed import { LOGIN_REQUEST, LOGIN_SUCCESS, LOGIN_FAILURE, LOGOUT_REQUEST, LOGOUT_SUCCESS, SET_TOKEN, CLEAR_TOKEN, } from './actionTypes'; // Login Actions export const loginRequest = (credentials) => ({ type: LOGIN_REQUEST, payload: credentials, }); export const loginSuccess = (user, token) => ({ type: LOGIN_SUCCESS, payload: { user, token }, }); export const loginFailure = (error) => ({ type: LOGIN_FAILURE, payload: error, }); // Logout Actions export const logoutRequest = () => ({ type: LOGOUT_REQUEST, }); export const logoutSuccess = () => ({ type: LOGOUT_SUCCESS, }); // Token Actions (can be dispatched by sagas or initial app load) export const setToken = (token) => ({ type: SET_TOKEN, payload: token, }); export const clearToken = () => ({ type: CLEAR_TOKEN, }); import { LOGIN_REQUEST, LOGIN_SUCCESS, LOGIN_FAILURE, LOGOUT_SUCCESS, SET_TOKEN, CLEAR_TOKEN, } from './actionTypes'; const initialState = { isAuthenticated: false, user: null, token: localStorage.getItem('authToken') || null, // Initialize token from localStorage loading: false, error: null, }; const authReducer = (state = initialState, action) => { switch (action.type) { case LOGIN_REQUEST: return { ...state, loading: true, error: null, isAuthenticated: false, // Ensure not authenticated during login attempt user: null, }; case LOGIN_SUCCESS: return { ...state, loading: false, isAuthenticated: true, user: action.payload.user, token: action.payload.token, error: null, }; case LOGIN_FAILURE: return { ...state, loading: false, isAuthenticated: false, user: null, // token: null, // Keep potentially expired token or clear it? Decide based on strategy error: action.payload, }; case LOGOUT_SUCCESS: case CLEAR_TOKEN: // Handle clearing token explicitly return { ...state, isAuthenticated: false, user: null, token: null, loading: false, error: null, }; case SET_TOKEN: // Handle setting token (e.g., on app load) return { ...state, token: action.payload, // Optionally verify token and set isAuthenticated/user here or via a separate saga }; default: return state; } }; export default authReducer; // This is a MOCK service. Replace with your actual API calls. import api from './api'; // Import the configured Axios instance // Simulate API delay const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms)); export const loginUser = async (credentials) => { console.log('Attempting login with credentials:', credentials); // Replace with your actual API endpoint and logic // Example using the configured Axios instance: // const response = await api.post('/auth/login', credentials); // return response.data; // Assuming API returns { user: {...}, token: '...' } // Mock Implementation: await delay(1000); // Simulate network latency if (credentials.username === 'user' && credentials.password === 'password') { const mockToken = `mock-jwt-token-${Date.now()}`; const mockUser = { id: 1, username: 'user', name: 'Test User' }; console.log('Mock login successful:', { user: mockUser, token: mockToken }); return { user: mockUser, token: mockToken }; } else { console.error('Mock login failed: Invalid credentials'); throw new Error('Invalid credentials'); } }; // Add other auth-related API calls here (e.g., register, refreshToken) // export const refreshToken = async (currentToken) => { // // const response = await api.post('/auth/refresh', { token: currentToken }); // // return response.data; // Assuming API returns { token: '...' } // await delay(500); // const newToken = `refreshed-mock-jwt-token-${Date.now()}`; // console.log('Mock token refreshed:', newToken); // return { token: newToken }; // }; import { call, put, takeLatest, select } from 'redux-saga/effects'; import { loginUser } from '../services/authService'; import { LOGIN_REQUEST, LOGOUT_REQUEST, } from './actionTypes'; import { loginSuccess, loginFailure, logoutSuccess, clearToken, } from './actions'; import { setAuthToken } from '../services/api'; // Import function to update Axios header // Selector to get the current token from the state // const getToken = (state) => state.auth.token; // Worker Saga: Handles the login request function* handleLogin(action) { try { const { username, password } = action.payload; // Call the API service const { user, token } = yield call(loginUser, { username, password }); // Store the token (e.g., in localStorage) localStorage.setItem('authToken', token); // Update the Axios instance header yield call(setAuthToken, token); // Dispatch success action with user data and token yield put(loginSuccess(user, token)); } catch (error) { // Dispatch failure action yield put(loginFailure(error.message || 'Login failed')); // Optionally clear token from storage/Axios on failure localStorage.removeItem('authToken'); yield call(setAuthToken, null); // Clear token in Axios header } } // Worker Saga: Handles the logout request function* handleLogout() { try { // Clear the token from storage localStorage.removeItem('authToken'); // Clear the token in the Axios instance header yield call(setAuthToken, null); // Dispatch success action (which clears state in reducer) yield put(logoutSuccess()); // Optional: Call a backend logout endpoint if necessary // yield call(api.post, '/auth/logout'); } catch (error) { // Handle potential errors during logout (e.g., network issues) console.error('Logout failed:', error); // Still dispatch logoutSuccess or a specific logoutFailure action if needed // Ensure client-side state is cleared regardless localStorage.removeItem('authToken'); yield call(setAuthToken, null); yield put(logoutSuccess()); // Ensure state is cleared } } // Watcher Saga: Listens for login and logout actions function* authSaga() { yield takeLatest(LOGIN_REQUEST, handleLogin); yield takeLatest(LOGOUT_REQUEST, handleLogout); // Add watchers for other actions like REFRESH_TOKEN_REQUEST if needed } export default authSaga; import { all } from 'redux-saga/effects'; import authSaga from './sagas'; // Combine all sagas here export default function* rootSaga() { yield all([ authSaga(), // Add other sagas here ]); } import { createStore, applyMiddleware, combineReducers } from 'redux'; import createSagaMiddleware from 'redux-saga'; import { composeWithDevTools } from '@redux-devtools/extension'; // Optional: for Redux DevTools import authReducer from './reducer'; import rootSaga from './rootSaga'; import { setAuthToken, setupAxiosInterceptors } from '../services/api'; // Import Axios setup // Combine reducers if you have more than one const rootReducer = combineReducers({ auth: authReducer, // Add other reducers here }); const sagaMiddleware = createSagaMiddleware(); const configureStore = () => { const store = createStore( rootReducer, composeWithDevTools(applyMiddleware(sagaMiddleware)) // Use composeWithDevTools if installed // applyMiddleware(sagaMiddleware) // Use this if Redux DevTools are not needed/installed ); // Run the root saga sagaMiddleware.run(rootSaga); // Setup Axios interceptors AFTER the store is created, passing the store setupAxiosInterceptors(store); // Initialize Axios header with token from initial state (localStorage) const currentToken = store.getState().auth.token; if (currentToken) { setAuthToken(currentToken); } return store; }; export default configureStore; import axios from 'axios'; import { logoutRequest } from '../store/actions'; // Import logout action creator // Base URL for your API const API_BASE_URL = process.env.REACT_APP_API_URL || 'http://localhost:5000/api'; // Example base URL // Create an Axios instance const api = axios.create({ baseURL: API_BASE_URL, headers: { 'Content-Type': 'application/json', }, }); // Function to set the Authorization header dynamically export const setAuthToken = (token) => { if (token) { console.log('Setting Axios Authorization header'); api.defaults.headers.common['Authorization'] = `Bearer ${token}`; } else { console.log('Deleting Axios Authorization header'); delete api.defaults.headers.common['Authorization']; } }; // Function to setup interceptors, needs access to the store's dispatch export const setupAxiosInterceptors = (store) => { // Request interceptor to add the token api.interceptors.request.use( (config) => { // Get token from Redux state (or localStorage as fallback) const token = store.getState().auth.token || localStorage.getItem('authToken'); if (token && !config.headers['Authorization']) { // Add header if token exists and not already set console.log('Request Interceptor: Adding token to header'); config.headers['Authorization'] = `Bearer ${token}`; } return config; }, (error) => { console.error('Request Interceptor Error:', error); return Promise.reject(error); } ); // Response interceptor to handle errors (like 401 Unauthorized) api.interceptors.response.use( (response) => { // Any status code within the range of 2xx cause this function to trigger return response; }, (error) => { // Any status codes outside the range of 2xx cause this function to trigger const originalRequest = error.config; console.error('Response Interceptor Error:', error.response?.status, error.message); // Handle 401 Unauthorized errors if (error.response?.status === 401) { console.warn('Response Interceptor: Received 401 Unauthorized'); // Prevent infinite loops if refresh also fails with 401 if (originalRequest.url === '/auth/refresh-token') { // Adjust URL if needed console.error('Refresh token request failed with 401. Logging out.'); store.dispatch(logoutRequest()); // Dispatch logout action return Promise.reject(error); } // --- Token Refresh Logic (Optional) --- // If you implement token refresh: // 1. Check if a refresh attempt is already in progress to avoid multiple requests. // 2. Dispatch a REFRESH_TOKEN_REQUEST action. // 3. The corresponding saga would call your refreshToken API endpoint. // 4. If refresh is successful, update the token in store/localStorage, update Axios header, and retry the original request. // 5. If refresh fails, dispatch logoutRequest. // --- Simple Logout on 401 (if not refreshing) --- console.log('Dispatching logout due to 401.'); store.dispatch(logoutRequest()); // Dispatch logout action if token is invalid/expired // Optionally redirect to login page // window.location.href = '/login'; } // Return any error which is not due to 401 return Promise.reject(error); } ); }; export default api; import React, { useState } from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { loginRequest, logoutRequest } from './store/actions'; import './App.css'; // Add some basic styling function App() { const dispatch = useDispatch(); const { isAuthenticated, user, loading, error, token } = useSelector(state => state.auth); const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const handleLogin = (e) => { e.preventDefault(); dispatch(loginRequest({ username, password })); }; const handleLogout = () => { dispatch(logoutRequest()); }; return (

Redux Saga JWT Auth Example

Authentication Status

Is Authenticated: {isAuthenticated ? 'Yes' : 'No'}

{isAuthenticated && user &&

User: {user.name} ({user.username})

} {token &&

Token: {token.substring(0, 30)}...

} {loading &&

} {error &&

Error: {error}

}

{!isAuthenticated ? ( ) : (

)}

); } export default App; body { font-family: sans-serif; padding: 20px; background-color: #f4f7f6; } .app-container { max-width: 600px; margin: 0 auto; padding: 20px; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } h1, h2 { color: #333; text-align: center; margin-bottom: 20px; } .auth-status { margin-bottom: 30px; padding: 15px; border: 1px solid #eee; border-radius: 4px; background-color: #f9f9f9; } .auth-status p { margin: 5px 0; font-size: 0.95em; } .token-display { word-break: break-all; font-size: 0.8em; color: #666; } .loading { color: #007bff; font-weight: bold; } .error { color: #dc3545; font-weight: bold; border: 1px solid #f5c6cb; background-color: #f8d7da; padding: 10px; border-radius: 4px; } .login-form, .logout-section { display: flex; flex-direction: column; align-items: center; } .login-form div { margin-bottom: 15px; width: 100%; max-width: 300px; } .login-form label { display: block; margin-bottom: 5px; font-weight: bold; color: #555; } .login-form input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; /* Include padding in width */ } button { padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 1em; transition: background-color 0.2s ease; } button:hover { background-color: #0056b3; } button:disabled { background-color: #cccccc; cursor: not-allowed; } .logout-section button { background-color: #dc3545; } .logout-section button:hover { background-color: #c82333; } import React from 'react'; import ReactDOM from 'react-dom/client'; import { Provider } from 'react-redux'; import configureStore from './store/configureStore'; import App from './App'; import './index.css'; // Optional global styles // Configure the Redux store const store = configureStore(); const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: #f4f7f6; /* Match App.css background */ } code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } { "name": "react-redux-saga-jwt", "version": "0.1.0", "private": true, "dependencies": { "@redux-devtools/extension": "^3.3.0", "axios": "^1.7.2", "react": "^18.3.1", "react-dom": "^18.3.1", "react-redux": "^9.1.2", "react-scripts": "5.0.1", "redux": "^5.0.1", "redux-saga": "^1.3.0" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }