feat: add sign-out callback support

docs/react-oidc-context.api.md

@@ -62,8 +62,10 @@ export const AuthProvider: (props: AuthProviderProps) => JSX.Element;
 // @public (undocumented)
 export interface AuthProviderBaseProps {
     children?: React_2.ReactNode;
+    matchSignoutCallback?: (args: UserManagerSettings) => boolean;
     onRemoveUser?: () => Promise<void> | void;
     onSigninCallback?: (user: User | void) => Promise<void> | void;
+    onSignoutCallback?: () => Promise<void> | void;
     skipSigninCallback?: boolean;
 }
 

src/AuthProvider.tsx

@@ -14,7 +14,7 @@ import type {
 import { AuthContext } from "./AuthContext";
 import { initialAuthState } from "./AuthState";
 import { reducer } from "./reducer";
-import { hasAuthParams, signinError } from "./utils";
+import { hasAuthParams, signinError, signoutError } from "./utils";
 
 /**
  * @public
@@ -54,6 +54,38 @@ export interface AuthProviderBaseProps {
      */
     skipSigninCallback?: boolean;
 
+    /**
+      * Match the redirect uri used for logout (e.g. `post_logout_redirect_uri`)
+      * This provider will then call automatically the `userManager.signoutCallback`.
+      *
+      * HINT:
+      * Do not call `userManager.signoutRedirect()` within a `React.useEffect`, otherwise the
+      * logout might be unsuccessful.
+      *
+      * ```jsx
+      * <AuthProvider
+      *   matchSignoutCallback={(args) => {
+      *     window &&
+      *     (window.location.href === args.post_logout_redirect_uri);
+      *   }}
+      * ```
+      */
+    matchSignoutCallback?: (args: UserManagerSettings) => boolean;
+
+    /**
+     * On sign out callback hook. Can be a async function.
+     * Here you can change the url after the user is signed out.
+     * When using this, specifying `matchSignoutCallback` is required.
+     *
+     * ```jsx
+     * const onSignoutCallback = (): void => {
+     *     // go to home after logout
+     *     window.location.pathname = ""
+     * }
+     * ```
+     */
+    onSignoutCallback?: () => Promise<void> | void;
+
     /**
      * On remove user hook. Can be a async function.
      * Here you can change the url after the user is removed.
@@ -133,6 +165,9 @@ export const AuthProvider = (props: AuthProviderProps): JSX.Element => {
         onSigninCallback,
         skipSigninCallback,
 
+        matchSignoutCallback,
+        onSignoutCallback,
+
         onRemoveUser,
 
         userManager: userManagerProp = null,
@@ -194,6 +229,7 @@ export const AuthProvider = (props: AuthProviderProps): JSX.Element => {
         didInitialize.current = true;
 
         void (async (): Promise<void> => {
+            // sign-in
             let user: User | void | null = null;
             try {
                 // check if returning back from authority server
@@ -206,8 +242,18 @@ export const AuthProvider = (props: AuthProviderProps): JSX.Element => {
             } catch (error) {
                 dispatch({ type: "ERROR", error: signinError(error) });
             }
+
+            // sign-out
+            try {
+                if (matchSignoutCallback && matchSignoutCallback(userManager.settings)) {
+                    await userManager.signoutCallback();
+                    onSignoutCallback && (await onSignoutCallback());
+                }
+            } catch (error) {
+                dispatch({ type: "ERROR", error: signoutError(error) });
+            }
         })();
-    }, [userManager, skipSigninCallback, onSigninCallback]);
+    }, [userManager, skipSigninCallback, onSigninCallback, onSignoutCallback, matchSignoutCallback]);
 
     // register to userManager events
     useEffect(() => {

src/utils.ts

@@ -27,3 +27,4 @@ const normalizeErrorFn = (fallbackMessage: string) => (error: unknown): Error =>
 };
 
 export const signinError = normalizeErrorFn("Sign-in failed");
+export const signoutError = normalizeErrorFn("Sign-out failed");

test/AuthProvider.test.tsx

@@ -108,6 +108,37 @@ describe("AuthProvider", () => {
         expect(UserManager.prototype.signinCallback).toHaveBeenCalledTimes(1);
     });
 
+    it("should handle signoutCallback success and call onSignoutCallback", async () => {
+        // arrange
+        const onSignoutCallback = jest.fn();
+        window.history.pushState(
+            {},
+            document.title,
+            "/signout-callback",
+        );
+        expect(window.location.pathname).toBe(
+            "/signout-callback",
+        );
+
+        const wrapper = createWrapper({
+            ...settingsStub,
+            post_logout_redirect_uri: "https://www.example.com/signout-callback",
+            matchSignoutCallback: () => window.location.pathname === "/signout-callback",
+            onSignoutCallback,
+        });
+
+        // act
+        act(() => {
+            renderHook(() => useAuth(), {
+                wrapper,
+            });
+        });
+
+        // assert
+        await waitFor(() => expect(onSignoutCallback).toHaveBeenCalledTimes(1));
+        expect(UserManager.prototype.signoutCallback).toHaveBeenCalledTimes(1);
+    });
+
     it("should signinResourceOwnerCredentials when asked", async () => {
         // arrange
         const wrapper = createWrapper({ ...settingsStub });

test/__mocks__/oidc-client-ts.ts

@@ -1,6 +1,6 @@
-import type { UserManager, UserManagerEvents } from "oidc-client-ts";
+import type { UserManager, UserManagerEvents, UserManagerSettings } from "oidc-client-ts";
 
-const MockUserManager: typeof UserManager = jest.fn(function (this: { events: Partial<UserManagerEvents> }) {
+const MockUserManager: typeof UserManager = jest.fn(function (this: { events: Partial<UserManagerEvents>; settings: Partial<UserManagerSettings> }, args: UserManagerSettings) {
     this.events = {
         load: jest.fn(),
         unload: jest.fn(),
@@ -24,6 +24,8 @@ const MockUserManager: typeof UserManager = jest.fn(function (this: { events: Pa
         removeUserSessionChanged: jest.fn(),
     };
 
+    this.settings = args;
+
     return this as UserManager;
 });
 MockUserManager.prototype.clearStaleState = jest.fn().mockResolvedValue(undefined);