import { Navigate, Outlet } from "react-router-dom";
import jwt_decode from "jwt-decode";
export default function ProtectedRoutes() {
var token = sessionStorage.getItem("token");
var decoded = jwt_decode(token);
// console.log(decoded);
// console.log(decoded.exp)
const isAuthActive = () => {
const expiryTime = new Date(decoded.exp * 1000).toLocaleString(
'en-sg'
);
const currentTime = new Date().toLocaleString('en-sg');
if (expiryTime < currentTime) {
sessionStorage.remove("token");
return <div>{isAuthActive ? <Outlet /> : <Navigate to="/auth/login" />}</div>;
}
return true;
}
let userid = sessionStorage.getItem("token") == null ? false : true;
return <div>{userid ? <Outlet /> : <Navigate to="/auth/login" />}</div>;

const login = async (formData) => {
const response = await axios.post(
`${import.meta.env.VITE_BACKEND_STAGING_URL}/api/v1/auth/signin`,
formData
);
if (response.data) {
const { token } = response.data;
sessionStorage.setItem("token", token);
}
return response.data;
};
const logout = async () => {
const response = await axios.post(
`${import.meta.env.VITE_BACKEND_STAGING_URL}/api/v1/auth/logout`
);
if (response.data) {
sessionStorage.removeItem("token");
}
return response.data;
};

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import authService from "./authService";
const initialState = {
user: localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : null,
isLoading: false,
isError: false,
isSuccess: false,
}
// User Login
export const login = createAsyncThunk("auth/signin", async (formData, thunkAPI) => {
try {
return await authService.login(formData);
} catch (error) {
const message =
(error.response && error.response.data && error.response.data.message) ||
error.message ||
error.toString();
return thunkAPI.rejectWithValue(message);
}
});
export const logout = createAsyncThunk("auth/logout", async () => {
await authService.logout();
});
const authSlice = createSlice({
name: "auth",
initialState,
reducers: {
reset: (state) => {
(state.isLoading = false),
(state.isSuccess = false),
(state.isError = false),
},
},
extraReducers: (builder) => {
builder
.addCase(login.pending, (state) => {
state.isLoading = true;
})
.addCase(login.fulfilled, (state, action) => {
state.isSuccess = true;
state.user = action.payload;
})
.addCase(login.rejected, (state, action) => {
state.isError = true;
state.user = null;
})
.addCase(logout.pending, (state) => {
state.isLoading = true;
})
.addCase(logout.fulfilled, (state) => {
state.isSuccess = true;
state.user = null;
});
},
});
export default authSlice.reducer;

const App = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const token = useSelector(state => state.auth.user.token);
  useEffect(() => {
    let timerRef = null;
    const decoded = jwt_decode(token);
    const expiryTime = (new Date(decoded.exp * 1000)).getTime();
    const currentTime = (new Date()).getTime();
    cont timeout = expiryTime - currentTime;
    const onExpire = () => {
      dispatch(logout());
      navigate("/auth/login");
    };
    if (timeout > 0) {
      // token not expired, set future timeout to log out and redirect
      timerRef = setTimeout(onExpire, timeout);
    } else {
      // token expired, log out and redirect
      onExpire();
    }
    // Clear any running timers on component unmount or token state change
    return () => {
      clearTimeout(timerRef);
    };
  }, [dispatch, navigate, token]);
  ...
};