react-oidc-context - npm Package Compare versions

Comparing version 2.1.0 to 2.1.1

dist/esm/react-oidc-context.js

@@ -0,1 +1,3 @@
+"use strict";
+
 // src/AuthContext.ts
@@ -7,3 +9,10 @@ import React from "react";
 // src/AuthProvider.tsx
-import React2, { useCallback, useEffect, useMemo, useReducer, useState } from "react";
+import React2, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState
+} from "react";
 import { UserManager } from "oidc-client-ts";
@@ -126,3 +135,6 @@
     userManager[key] ? async (...args) => {
-      dispatch({ type: "NAVIGATOR_INIT", method: key });
+      dispatch({
+        type: "NAVIGATOR_INIT",
+        method: key
+      });
       try {
@@ -135,5 +147,8 @@ return await userManager[key](...args);
   ]))), [userManager]);
+  const didInitialize = useRef(false);
   useEffect(() => {
-    if (!userManager)
+    if (!userManager || didInitialize.current) {
       return;
+    }
+    didInitialize.current = true;
     void (async () => {
@@ -140,0 +155,0 @@ try {

dist/types/tsdoc-metadata.json

@@ -8,5 +8,5 @@ // This file is read by tools that parse documentation comments conforming to the TSDoc standard.
       "packageName": "@microsoft/api-extractor",
-      "packageVersion": "7.19.4"
+      "packageVersion": "7.28.0"
     }
   ]
 }

dist/umd/react-oidc-context.js

@@ -0,1 +1,2 @@
+"use strict";
 var __create = Object.create;
@@ -7,3 +8,2 @@ var __defProp = Object.defineProperty;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
@@ -13,18 +13,12 @@ for (var name in all)
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
@@ -40,2 +34,3 @@ // src/index.ts
 });
+module.exports = __toCommonJS(src_exports);
 
@@ -166,3 +161,6 @@ // src/AuthContext.ts
     userManager[key] ? async (...args) => {
-      dispatch({ type: "NAVIGATOR_INIT", method: key });
+      dispatch({
+        type: "NAVIGATOR_INIT",
+        method: key
+      });
       try {
@@ -175,5 +173,8 @@ return await userManager[key](...args);
   ]))), [userManager]);
+  const didInitialize = (0, import_react2.useRef)(false);
   (0, import_react2.useEffect)(() => {
-    if (!userManager)
+    if (!userManager || didInitialize.current) {
       return;
+    }
+    didInitialize.current = true;
     void (async () => {
@@ -251,3 +252,2 @@ try {
 }
-module.exports = __toCommonJS(src_exports);
 // Annotate the CommonJS export names for ESM import in node:
@@ -254,0 +254,0 @@ 0 && (module.exports = {

package.json

 {
   "name": "react-oidc-context",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "OpenID Connect & OAuth2 authentication using react context api as state management",
@@ -48,6 +48,7 @@ "repository": {
     "@testing-library/jest-dom": "^5.5.0",
-    "@testing-library/react": "^12.0.0",
-    "@testing-library/react-hooks": "^7.0.0",
-    "@types/react": "^17.0.5",
-    "@types/react-dom": "^17.0.5",
+    "@testing-library/react": "^13.1.1",
+    "@testing-library/react-hooks": "^7.0.2",
+    "@types/react": "^18.0.6",
+    "@types/react-dom": "^18.0.2",
+    "@types/react-test-renderer": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^5.7.0",
@@ -58,9 +59,9 @@ "@typescript-eslint/parser": "^5.7.0",
     "eslint-plugin-testing-library": "^5.0.0",
-    "husky": "^7.0.2",
+    "husky": "^8.0.1",
     "jest": "^27.2.0",
     "jest-mock": "^27.4.2",
-    "lint-staged": "^12.0.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-test-renderer": "^17.0.2",
+    "lint-staged": "^13.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-test-renderer": "^18.0.0",
     "ts-jest": "^27.0.5",
@@ -67,0 +68,0 @@ "tslib": "^2.2.0",

README.md

@@ -29,3 +29,7 @@ # react-oidc-context
 
-The User and UserManager is hold in this context, which is accessible from the
+The
+[`User`](https://authts.github.io/oidc-client-ts/classes/User.html)
+and
+[`UserManager`](https://authts.github.io/oidc-client-ts/classes/UserManager.html)
+is hold in this context, which is accessible from the
 React application. Additionally it intercepts the auth redirects by looking at
@@ -36,2 +40,6 @@ the query/fragment parameters and acts accordingly. You still need to setup a
 
+To renew the access token, the
+[automatic silent renew](https://authts.github.io/oidc-client-ts/interfaces/UserManagerSettings.html#automaticSilentRenew)
+feature of `oidc-client-ts` can be used.
+
 ## Installation
@@ -102,3 +110,3 @@
             Hello {auth.user?.profile.sub}{" "}
-            <button onClick={auth.removeUser}>Log out</button>
+            <button onClick={() => void auth.removeUser()}>Log out</button>
         </div>
@@ -108,3 +116,3 @@ );
 
-    return <button onClick={auth.signinRedirect}>Log in</button>;
+    return <button onClick={() => void auth.signinRedirect()}>Log in</button>;
 }
@@ -115,2 +123,7 @@
 
+You **must** provide an implementation of `onSigninCallback` to `oidcConfig` to remove the payload from the URL upon successful login. Otherwise if you refresh the page and the payload is still there, `signinSilent` - which handles renewing your token - won't work. 
+
+A working implementation is already in the code [here](https://github.com/authts/react-oidc-context/blob/f175dcba6ab09871b027d6a2f2224a17712b67c5/src/AuthProvider.tsx#L20-L30).
+
+
 ### Use with a Class Component
@@ -152,13 +165,13 @@
         (async () => {
-        try {
-            const token = auth.user?.access_token;
-            const response = await fetch("https://api.example.com/posts", {
-            headers: {
-                Authorization: `Bearer ${token}`,
-            },
-            });
-            setPosts(await response.json());
-        } catch (e) {
-            console.error(e);
-        }
+            try {
+                const token = auth.user?.access_token;
+                const response = await fetch("https://api.example.com/posts", {
+                    headers: {
+                        Authorization: `Bearer ${token}`,
+                    },
+                });
+                setPosts(await response.json());
+            } catch (e) {
+                console.error(e);
+            }
         })();
@@ -202,4 +215,4 @@ }, [auth]);
     async () => {
-        const user = getUser()
-        const token = user?.access_token
+        const user = getUser();
+        const token = user?.access_token;
         return fetch("https://api.example.com/posts", {
@@ -228,11 +241,11 @@ headers: {
     React.useEffect(() => {
-      // the `return` is important - addAccessTokenExpiring() returns a cleanup function
-      return auth.events.addAccessTokenExpiring(() => {
-        if (alert("You're about to be signed out due to inactivity. Press continue to stay signed in.")) {
-          auth.signinSilent()
-        }
-      })
+        // the `return` is important - addAccessTokenExpiring() returns a cleanup function
+        return auth.events.addAccessTokenExpiring(() => {
+            if (alert("You're about to be signed out due to inactivity. Press continue to stay signed in.")) {
+                auth.signinSilent();
+            }
+        })
     }, [auth.events, auth.signinSilent])
 
-    return <button onClick={auth.signinRedirect}>Log in</button>;
+    return <button onClick={() => void auth.signinRedirect()}>Log in</button>;
 }
@@ -239,0 +252,0 @@

No alert changes

Improved metrics

Total package byte prevSize

69622

increased by4.84%

Lines of code

623

increased by2.3%

Number of lines in readme file

263

increased by5.2%

Worsened metrics

Dev dependency count

23

increased by4.55%

No dependency changes