react-oidc-context - npm Package Compare versions

Comparing version 3.0.0-beta.0 to 3.0.0-rc.0

dist/esm/package.json

 {
   "type": "module",
-  "version": "3.0.0-beta.0"
+  "version": "3.0.0-rc.0"
 }

dist/esm/react-oidc-context.js

@@ -206,6 +206,2 @@ // src/AuthContext.ts
   );
-  const signoutSilent = useCallback(
-    (args) => userManagerContext.signoutSilent(args),
-    [userManagerContext.signoutSilent]
-  );
   return /* @__PURE__ */ React2.createElement(
@@ -217,4 +213,3 @@ AuthContext.Provider,
         ...userManagerContext,
-        removeUser,
-        signoutSilent
+        removeUser
       }
@@ -247,2 +242,29 @@ },
 }
+
+// src/withAuthenticationRequired.tsx
+import React5 from "react";
+var withAuthenticationRequired = (Component, options = {}) => {
+  const { OnRedirecting = () => /* @__PURE__ */ React5.createElement(React5.Fragment, null), onBeforeSignin, signinRedirectArgs } = options;
+  const displayName = `withAuthenticationRequired(${Component.displayName || Component.name})`;
+  const C = (props) => {
+    const auth = useAuth();
+    React5.useEffect(() => {
+      if (hasAuthParams() || auth.isLoading || auth.activeNavigator || auth.isAuthenticated) {
+        return;
+      }
+      void (async () => {
+        onBeforeSignin && await onBeforeSignin();
+        await auth.signinRedirect(signinRedirectArgs);
+      })();
+    }, [
+      auth.isLoading,
+      auth.isAuthenticated,
+      onBeforeSignin,
+      signinRedirectArgs
+    ]);
+    return auth.isAuthenticated ? /* @__PURE__ */ React5.createElement(Component, { ...props }) : OnRedirecting();
+  };
+  C.displayName = displayName;
+  return C;
+};
 export {
@@ -253,4 +275,5 @@ AuthContext,
   useAuth,
-  withAuth
+  withAuth,
+  withAuthenticationRequired
 };
 //# sourceMappingURL=react-oidc-context.js.map

dist/types/react-oidc-context.d.ts

@@ -175,2 +175,29 @@ import type { QuerySessionStatusArgs } from 'oidc-client-ts';
 
+/**
+ * A public higher-order component to protect accessing not public content. When you wrap your components in this higher-order
+ * component and an anonymous user visits your component, they will be redirected to the login page; after logging in, they
+ * will return to the page from which they were redirected.
+ *
+ * @public
+ */
+export declare const withAuthenticationRequired: <P extends object>(Component: React_2.ComponentType<P>, options?: WithAuthenticationRequiredProps) => React_2.FC<P>;
+
+/**
+ * @public
+ */
+export declare interface WithAuthenticationRequiredProps {
+    /**
+     * Show a message when redirected to the signin page.
+     */
+    OnRedirecting?: () => JSX.Element;
+    /**
+     * Allows executing logic before the user is redirected to the signin page.
+     */
+    onBeforeSignin?: () => Promise<void> | void;
+    /**
+     * Pass additional signin redirect arguments.
+     */
+    signinRedirectArgs?: SigninRedirectArgs;
+}
+
 export { }

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.38.3"
+      "packageVersion": "7.39.0"
     }
   ]
 }

dist/umd/react-oidc-context.js

@@ -37,3 +37,4 @@ "use strict";
   useAuth: () => useAuth,
-  withAuth: () => withAuth
+  withAuth: () => withAuth,
+  withAuthenticationRequired: () => withAuthenticationRequired
 });
@@ -240,6 +241,2 @@ module.exports = __toCommonJS(src_exports);
   );
-  const signoutSilent = (0, import_react2.useCallback)(
-    (args) => userManagerContext.signoutSilent(args),
-    [userManagerContext.signoutSilent]
-  );
   return /* @__PURE__ */ import_react2.default.createElement(
@@ -251,4 +248,3 @@ AuthContext.Provider,
         ...userManagerContext,
-        removeUser,
-        signoutSilent
+        removeUser
       }
@@ -281,2 +277,29 @@ },
 }
+
+// src/withAuthenticationRequired.tsx
+var import_react5 = __toESM(require("react"));
+var withAuthenticationRequired = (Component, options = {}) => {
+  const { OnRedirecting = () => /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null), onBeforeSignin, signinRedirectArgs } = options;
+  const displayName = `withAuthenticationRequired(${Component.displayName || Component.name})`;
+  const C = (props) => {
+    const auth = useAuth();
+    import_react5.default.useEffect(() => {
+      if (hasAuthParams() || auth.isLoading || auth.activeNavigator || auth.isAuthenticated) {
+        return;
+      }
+      void (async () => {
+        onBeforeSignin && await onBeforeSignin();
+        await auth.signinRedirect(signinRedirectArgs);
+      })();
+    }, [
+      auth.isLoading,
+      auth.isAuthenticated,
+      onBeforeSignin,
+      signinRedirectArgs
+    ]);
+    return auth.isAuthenticated ? /* @__PURE__ */ import_react5.default.createElement(Component, { ...props }) : OnRedirecting();
+  };
+  C.displayName = displayName;
+  return C;
+};
 // Annotate the CommonJS export names for ESM import in node:
@@ -288,4 +311,5 @@ 0 && (module.exports = {
   useAuth,
-  withAuth
+  withAuth,
+  withAuthenticationRequired
 });
 //# sourceMappingURL=react-oidc-context.js.map

package.json

 {
   "name": "react-oidc-context",
-  "version": "3.0.0-beta.0",
+  "version": "3.0.0-rc.0",
   "description": "OpenID Connect & OAuth2 authentication using react context api as state management",
@@ -69,3 +69,3 @@ "repository": {
     "tslib": "^2.2.0",
-    "typescript": "~5.0.4",
+    "typescript": "~5.3.3",
     "yn": "^5.0.0"
@@ -72,0 +72,0 @@ },

README.md

@@ -51,2 +51,8 @@ # react-oidc-context
 
+Using [yarn](https://yarnpkg.com/)
+
+```bash
+yarn add oidc-client-ts react-oidc-context
+```
+
 ## Getting Started
@@ -222,2 +228,17 @@
 
+### Protect a route
+
+Secure a route component by using the withAuthenticationRequired higher-order component. If a user attempts to access this route without authentication, they will be redirected to the login page.
+
+```jsx
+import React from 'react';
+import { withAuthenticationRequired } from "react-oidc-context";
+
+const PrivateRoute = () => (<div>Private</div>);
+
+export default withAuthenticationRequired(PrivateRoute, {
+  onRedirecting: () => (<div>Redirecting to the login page...</div>)
+});
+```
+
 ### Adding event listeners
@@ -269,3 +290,3 @@
     const auth = useAuth();
-    const [hasTriedSignin, setHasTriedSignin] = useState(false);
+    const [hasTriedSignin, setHasTriedSignin] = React.useState(false);
 
@@ -272,0 +293,0 @@ // automatically sign-in

No alert changes

Improved metrics

Total package byte prevSize

82603

increased by11.25%

Lines of code

766

increased by10.06%

Number of lines in readme file

330

increased by6.8%

No dependency changes