feat: add withAuthenticationRequired

README.md

@@ -218,6 +218,21 @@ export const getPosts = createAsyncThunk(
 )
 ```
 
+### 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
 
 The underlying [`UserManagerEvents`](https://authts.github.io/oidc-client-ts/classes/UserManagerEvents.html) instance can be imperatively managed with the `useAuth` hook.

docs/react-oidc-context.api.md

@@ -98,6 +98,13 @@ export const useAuth: () => AuthContextProps;
 // @public
 export function withAuth<P>(Component: React_2.ComponentType<P>): React_2.ComponentType<Omit<P, keyof AuthContextProps>>;
 
+// @public (undocumented)
+export interface WithAuthenticationRequiredOptions {
+    onBeforeSignin?: () => Promise<void> | void;
+    onRedirecting?: () => JSX.Element;
+    signinRedirectArgs?: SigninRedirectArgs;
+}
+
 // (No @packageDocumentation comment for this package)
 
 ```

src/index.ts

@@ -4,3 +4,4 @@ export type { AuthState } from "./AuthState";
 export * from "./useAuth";
 export { hasAuthParams } from "./utils";
 export * from "./withAuth";
+export * from "./withAuthenticationRequired";

src/withAuthenticationRequired.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+
+import { useAuth } from "./useAuth";
+import type { SigninRedirectArgs } from "oidc-client-ts";
+
+/**
+ * @public
+ */
+export interface WithAuthenticationRequiredOptions {
+    /**
+     * Show a message when redirected to the login page.
+     */
+    onRedirecting?: () => JSX.Element;
+
+    /**
+     * Allows executing logic before the user is redirected to the login page.
+     */
+    onBeforeSignin?: () => Promise<void> | void;
+
+    /**
+     * Pass additional signin redirect options.
+     */
+    signinRedirectArgs?: SigninRedirectArgs;
+}
+
+/**
+ * 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
+ */
+const withAuthenticationRequired = <P extends object>(
+    Component: React.ComponentType<P>,
+    options: WithAuthenticationRequiredOptions = {},
+): React.FC<P> => {
+    const { onRedirecting = (): JSX.Element => <></>, onBeforeSignin, signinRedirectArgs } = options;
+
+    const displayName = `withAuthenticationRequired(${Component.displayName || Component.name})`;
+    const C: React.FC<P> = (props) => {
+        const auth = useAuth();
+
+        React.useEffect(() => {
+            if (auth.isLoading || auth.isAuthenticated) {
+                return;
+            }
+            void (async (): Promise<void> => {
+                onBeforeSignin && await onBeforeSignin();
+                await auth.signinRedirect(signinRedirectArgs);
+            })();
+        }, [
+            auth.isLoading,
+            auth.isAuthenticated,
+            onBeforeSignin,
+            signinRedirectArgs,
+        ]);
+
+        return auth.isAuthenticated ? <Component {...props} /> : onRedirecting();
+    };
+
+    C.displayName = displayName;
+
+    return C;
+};
+
+export default withAuthenticationRequired;