@torq-north/react-tools 1.0.0 → 1.1.0

package/README.md

@@ -1,6 +1,6 @@
-# Torq Tools
+# Torq North Tools
 
-A collection of react components, hooks and other utilities used in various Crew 2 projects
+A collection of react components, hooks and other utilities used in various projects
 
 ## Getting it running
 
@@ -8,6 +8,32 @@ Upon pulling down the repo, in order to get the component browser running, all y
 
 ![image](https://user-images.githubusercontent.com/68865874/229501155-90c89bfb-e29b-4664-9eab-bd6313b53c14.png)
 
+## Session expiry redirects
+
+The API helpers (`sendGet`, `sendPost`, etc.) can automatically detect when a user's session has expired and redirect them to the login page. This is triggered when any API call receives a 401 response, or when the server issues a redirect to `/auth/login`, which is the typical behaviour of a Symfony OAuth firewall that redirects rather than returning 401 directly.
+
+This behaviour is opt-in. Call `enableAuthRedirect` once at app startup with the login URL to activate it:
+
+```typescript
+import { enableAuthRedirect } from "@torq-north/react-tools";
+
+enableAuthRedirect("/auth/login");
+```
+
+If `enableAuthRedirect` is never called, session expiry responses are left for the call site to handle as normal errors.
+
+### Dev environments
+
+In local development the frontend and backend often run on different ports. If the backend is on a different port than the Vite dev server, navigating to `/auth/login` will hit Vite instead of the backend and the login page won't render correctly. Pass the full backend URL for dev:
+
+```typescript
+enableAuthRedirect(
+  import.meta.env.DEV ? "http://localhost:8103/auth/login" : "/auth/login"
+);
+```
+
+Replace `8103` with whichever port your backend is exposed on locally. In production the relative URL is used and no special configuration is needed.
+
 ## Adding your own component
 
 1. Copy/paste in component from IRC project

package/dist/index.cjs

@@ -146,8 +146,12 @@ var sendGet = function (url, params) { return __awaiter(void 0, void 0, void 0,
         switch (_a.label) {
             case 0:
                 params &&
-                    Object.keys(params).forEach(function (key) { return params[key] === undefined && delete params[key]; });
-                fetchUrl = params ? "".concat(url, "?").concat(new URLSearchParams(params).toString()) : url;
+                    Object.keys(params).forEach(function (key) {
+                        return params[key] === undefined && delete params[key];
+                    });
+                fetchUrl = params
+                    ? "".concat(url, "?").concat(new URLSearchParams(params).toString())
+                    : url;
                 return [4 /*yield*/, fetch(fetchUrl)];
             case 1:
                 response = _a.sent();
@@ -248,11 +252,29 @@ function isJson(response) {
     }
     return contentType.indexOf("application/json") >= 0;
 }
+var authLoginUrl = "/auth/login";
+var authRedirectEnabled = false;
+function enableAuthRedirect(loginUrl) {
+    if (loginUrl === void 0) { loginUrl = "/auth/login"; }
+    authLoginUrl = loginUrl;
+    authRedirectEnabled = true;
+}
+function isSessionExpired(response) {
+    return (response.status === 401 ||
+        (response.redirected && response.url.includes("/auth/login")));
+}
 function process$1(response) {
     return __awaiter(this, void 0, void 0, function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
-                case 0: return [4 /*yield*/, checkResponse(response)];
+                case 0:
+                    if (authRedirectEnabled && isSessionExpired(response)) {
+                        window.location.href = authLoginUrl;
+                        // Return a never-resolving promise to suspend execution while the browser navigates away,
+                        // preventing any error handling or UI updates from firing before the page unloads.
+                        return [2 /*return*/, new Promise(function () { })];
+                    }
+                    return [4 /*yield*/, checkResponse(response)];
                 case 1:
                     _a.sent();
                     if (isJson(response)) {
@@ -5205,6 +5227,7 @@ exports.TabSet = TabSet;
 exports.TextFormField = TextFormField;
 exports.asInteger = asInteger;
 exports.asPhoneNumber = asPhoneNumber;
+exports.enableAuthRedirect = enableAuthRedirect;
 exports.isEmail = isEmail;
 exports.isPostalCode = isPostalCode;
 exports.sendDelete = sendDelete;