feat: add dateProvider config (#784)

* Add dateProvider config

* chore: update CHANGELOG.md

* PR changes

* Fix tests

* PR changes

* Update Changelog

* update dependencies version

---------

Co-authored-by: Mihály Lengyel <[email protected]>

Author: anku255

CHANGELOG.md

@@ -5,6 +5,18 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html)
 
+## [0.37.0] - 2024-01-15
+
+## Breaking Changes
+
+-   The default `DateProvider` implementation relies on `localStorage`. If your environment lacks support for `localStorage`, you must provide custom implementations for either the `DateProvider` or `localStorage`.
+
+### Changes
+
+-   Exporting the `DateProvider` from supertokens-web-js, that both built-in and custom validators can use instead of `Date.now` to get an estimate of the server clock.
+-   Added the `dateProvider` prop to the configuration that can be used to customize the built-in `DateProvider`.
+-   Added `calculateClockSkewInMillis` as an overrideable function to the Session recipe that estimates the time difference between the backend and the client.
+
 ## [0.36.1] - 2023-12-20
 
 ### Fixes

lib/build/dateProvider/index.d.ts

@@ -0,0 +1,16 @@
+/* Copyright (c) 2024, VRAI Labs and/or its affiliates. All rights reserved.
+ *
+ * This software is licensed under the Apache License, Version 2.0 (the
+ * "License") as published by the Apache Software Foundation.
+ *
+ * You may not use this file except in compliance with the License. You may
+ * obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+
+export { DateProviderReference } from "supertokens-web-js/utils/dateProvider";

lib/build/dateProvider/types.d.ts

@@ -0,0 +1,16 @@
+/* Copyright (c) 2024, VRAI Labs and/or its affiliates. All rights reserved.
+ *
+ * This software is licensed under the Apache License, Version 2.0 (the
+ * "License") as published by the Apache Software Foundation.
+ *
+ * You may not use this file except in compliance with the License. You may
+ * obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+
+export { DateProviderInput, DateProviderInterface } from "supertokens-web-js/utils/dateProvider/types";

lib/build/genericComponentOverrideContext.js

@@ -13,6 +13,7 @@
  * under the License.
  */
 
+import type { DateProviderInput } from "./dateProvider/types";
 import type { BaseRecipeModule } from "./recipe/recipeModule/baseRecipeModule";
 import type { NormalisedConfig as NormalisedRecipeModuleConfig } from "./recipe/recipeModule/types";
 import type { TranslationFunc, TranslationStore } from "./translation/translationHelpers";
@@ -72,6 +73,8 @@ export type SuperTokensConfig = {
 
     windowHandler?: WindowHandlerInput;
 
+    dateProvider?: DateProviderInput;
+
     usesDynamicLoginMethods?: boolean;
 
     languageTranslations?: {

lib/build/types.d.ts

@@ -12,4 +12,4 @@
  * License for the specific language governing permissions and limitations
  * under the License.
  */
-export const package_version = "0.36.1";
+export const package_version = "0.37.0";

lib/build/version.d.ts

@@ -1,6 +1,6 @@
 {
     "name": "supertokens-auth-react",
-    "version": "0.36.1",
+    "version": "0.37.0",
     "description": "ReactJS SDK that provides login functionality with SuperTokens.",
     "main": "./index.js",
     "engines": {
@@ -83,7 +83,7 @@
     "peerDependencies": {
         "react": ">=16.8.0",
         "react-dom": ">=16.8.0",
-        "supertokens-web-js": "^0.8.0"
+        "supertokens-web-js": "^0.9.0"
     },
     "scripts": {
         "init": "bash ./init.sh",
@@ -109,7 +109,7 @@
         "build-pretty": "npm run build && npm run pretty && npm run pretty",
         "lint": "node other/checkTranslationKeys.js && cd lib && eslint ./ts --ext .ts,.tsx",
         "lint-fix": "cd lib && npx eslint ./ts --ext .ts,.tsx --fix",
-        "prune": "cd lib && ts-prune | grep -vE 'used in module| - default$| - package_version$|getSuperTokensRoutesForReactRouterDom$|supertokens-web-js|supertokens-website' && exit 1 || exit 0",
+        "prune": "cd lib && ts-prune | grep -vE 'used in module| - default$| - package_version$|getSuperTokensRoutesForReactRouterDom$|supertokens-web-js|supertokens-website|dateProvider' && exit 1 || exit 0",
         "pretty-check": "npx pretty-quick --staged --check .",
         "set-up-hooks": "cp hooks/pre-commit.sh .git/hooks/pre-commit && chmod +x .git/hooks/pre-commit",
         "build-docs": "rm -rf ./docs && npx typedoc --out ./docs --tsconfig ./lib/tsconfig.json ./lib/ts/index.ts ./lib/ts/**/index.ts ./lib/ts/**/*/index.ts",

lib/ts/dateProvider/index.ts

@@ -925,3 +925,81 @@ describe("Email verification signOut errors", function () {
         assert.strictEqual(await error.evaluate((e) => e.textContent), SOMETHING_WENT_WRONG_ERROR);
     });
 });
+
+describe("Email verification claim refresh with clock skew", function () {
+    let browser;
+    let page;
+    before(async function () {
+        await backendBeforeEach();
+
+        await fetch(`${TEST_SERVER_BASE_URL}/startst`, {
+            method: "POST",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify({
+                coreConfig: {
+                    access_token_validity: 2 * 60 * 60, // 2 hours
+                },
+            }),
+        }).catch(console.error);
+
+        browser = await puppeteer.launch({
+            args: ["--no-sandbox", "--disable-setuid-sandbox"],
+            headless: true,
+        });
+    });
+
+    after(async function () {
+        await browser.close();
+        await fetch(`${TEST_SERVER_BASE_URL}/after`, {
+            method: "POST",
+        }).catch(console.error);
+        await fetch(`${TEST_SERVER_BASE_URL}/stopst`, {
+            method: "POST",
+        }).catch(console.error);
+    });
+
+    afterEach(function () {
+        return screenshotOnFailure(this, browser);
+    });
+
+    beforeEach(async function () {
+        page = await browser.newPage();
+        await clearBrowserCookiesWithoutAffectingConsole(page, []);
+        await Promise.all([
+            page.goto(`${TEST_CLIENT_BASE_URL}/auth?mode=REQUIRED`),
+            page.waitForNavigation({ waitUntil: "networkidle0" }),
+        ]);
+    });
+
+    it("should not go into an infinite loop during claim refresh with adjusted clock skew", async function () {
+        await toggleSignInSignUp(page);
+
+        // Override Date.now() to simulate a clock skew of 1 hour
+        await page.evaluate(() => {
+            globalThis.originalNow = Date.now;
+            Date.now = function () {
+                return originalNow() + 60 * 60 * 1000;
+            };
+        });
+
+        let claimRefreshCalledCount = 0;
+
+        await page.setRequestInterception(true);
+
+        page.on("request", (req) => {
+            if (req.url() === `${TEST_APPLICATION_SERVER_BASE_URL}/auth/user/email/verify` && req.method() === "GET") {
+                // Simulate a failure after 5 claim refresh API calls to avoid an infinite loop
+                if (claimRefreshCalledCount >= 5) {
+                    return req.respond({ status: 500, contentType: "text/plain", body: "Something went wrong" });
+                } else {
+                    claimRefreshCalledCount++;
+                }
+            }
+            req.continue();
+        });
+
+        const { fieldValues, postValues } = getDefaultSignUpFieldValues({ email: getTestEmail() });
+        await signUp(page, fieldValues, postValues, "emailpassword");
+        assert(claimRefreshCalledCount < 2);
+    });
+});

lib/ts/dateProvider/types.ts

@@ -0,0 +1,69 @@
+/* Copyright (c) 2022, VRAI Labs and/or its affiliates. All rights reserved.
+ *
+ * This software is licensed under the Apache License, Version 2.0 (the
+ * "License") as published by the Apache Software Foundation.
+ *
+ * You may not use this file except in compliance with the License. You may
+ * obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+import "@testing-library/jest-dom";
+import { BooleanClaim } from "../../recipe/session";
+import EmailPassword from "../../recipe/emailpassword";
+import SuperTokens from "../../lib/ts/superTokens";
+import assert from "assert";
+
+describe("Date Provider test", function () {
+    let storageLogs: string[] = [];
+
+    beforeEach(function () {
+        SuperTokens.reset();
+        storageLogs = [];
+    });
+
+    it("should use custom date provider when calling init", async function () {
+        SuperTokens.init({
+            appInfo: {
+                appName: "SuperTokens",
+                websiteDomain: "supertokens.io",
+                apiDomain: "api.supertokens.io",
+            },
+            dateProvider: function () {
+                return {
+                    getClientClockSkewInMillis() {
+                        storageLogs.push("ST_LOGS DATE_PROVIDER_GET_CLIENT_CLOCK_SKEW");
+                        return 0;
+                    },
+                    setClientClockSkewInMillis() {
+                        storageLogs.push("ST_LOGS DATE_PROVIDER_SET_CLIENT_CLOCK_SKEW");
+                    },
+                    getThresholdInSeconds() {
+                        storageLogs.push("ST_LOGS DATE_PROVIDER_GET_THRESHOLD");
+                        return 7;
+                    },
+                    setThresholdInSeconds() {
+                        storageLogs.push("ST_LOGS DATE_PROVIDER_SET_THRESHOLD");
+                        return;
+                    },
+                    now() {
+                        storageLogs.push("ST_LOGS DATE_PROVIDER_NOW");
+                        return Date.now();
+                    },
+                };
+            },
+            recipeList: [EmailPassword.init()],
+        });
+
+        // Calling the shouldRefresh method on a SessionClaimValidator should call the DateProvider now method
+        const claim = new BooleanClaim({ id: "test-claim", defaultMaxAgeInSeconds: 1000, refresh: async () => {} });
+        const validator = claim.validators.isTrue();
+        await validator.shouldRefresh({ "test-claim": { v: true, t: Date.now() } }, {});
+
+        assert.deepStrictEqual(storageLogs, ["ST_LOGS DATE_PROVIDER_GET_THRESHOLD", "ST_LOGS DATE_PROVIDER_NOW"]);
+    });
+});