Merge pull request #1378 from authts/backport-on-signout-callback

backport on signout callback

docs/react-oidc-context.api.md

@@ -14,6 +14,7 @@ import type { SigninResourceOwnerCredentialsArgs } from 'oidc-client-ts';
 import type { SigninSilentArgs } from 'oidc-client-ts';
 import type { SignoutPopupArgs } from 'oidc-client-ts';
 import type { SignoutRedirectArgs } from 'oidc-client-ts';
+import type { SignoutResponse } from 'oidc-client-ts';
 import type { SignoutSilentArgs } from 'oidc-client-ts';
 import { User } from 'oidc-client-ts';
 import { UserManager } from 'oidc-client-ts';
@@ -73,8 +74,10 @@ export interface AuthProviderPropsBase extends UserManagerSettings {
     children?: React_2.ReactNode;
     // @deprecated (undocumented)
     implementation?: typeof UserManager | null;
+    matchSignoutCallback?: (args: UserManagerSettings) => boolean;
     onRemoveUser?: () => Promise<void> | void;
     onSigninCallback?: (user: User | void) => Promise<void> | void;
+    onSignoutCallback?: (resp: SignoutResponse | void) => Promise<void> | void;
     // @deprecated (undocumented)
     onSignoutPopup?: () => Promise<void> | void;
     // @deprecated (undocumented)

package.json

@@ -40,7 +40,7 @@
     "prepare": "husky install"
   },
   "peerDependencies": {
-    "oidc-client-ts": "^2.2.1",
+    "oidc-client-ts": "^2.4.1",
     "react": ">=16.8.0"
   },
   "devDependencies": {

src/AuthProvider.tsx

@@ -5,12 +5,13 @@ import type {
     SignoutPopupArgs,
     SignoutSilentArgs,
     ProcessResourceOwnerPasswordCredentialsArgs,
+    SignoutResponse,
 } from "oidc-client-ts";
 
 import { AuthContext } from "./AuthContext";
 import { initialAuthState } from "./AuthState";
 import { reducer } from "./reducer";
-import { hasAuthParams, loginError } from "./utils";
+import { hasAuthParams, loginError, signoutError } from "./utils";
 
 /**
  * @public
@@ -50,6 +51,38 @@ export interface AuthProviderPropsBase extends UserManagerSettings {
      */
     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 = (resp: SignoutResponse | void): void => {
+     *     // go to home after logout
+     *     window.location.pathname = ""
+     * }
+     * ```
+     */
+    onSignoutCallback?: (resp: SignoutResponse | void) => Promise<void> | void;
+
     /**
      * On remove user hook. Can be a async function.
      * Here you can change the url after the user is removed.
@@ -140,6 +173,9 @@ export const AuthProvider = (props: AuthProviderProps): JSX.Element => {
         onSigninCallback,
         skipSigninCallback,
 
+        matchSignoutCallback,
+        onSignoutCallback,
+
         onRemoveUser,
         onSignoutRedirect,
         onSignoutPopup,
@@ -204,6 +240,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
@@ -216,8 +253,18 @@ export const AuthProvider = (props: AuthProviderProps): JSX.Element => {
             } catch (error) {
                 dispatch({ type: "ERROR", error: loginError(error) });
             }
+
+            // sign-out
+            try {
+                if (matchSignoutCallback && matchSignoutCallback(userManager.settings)) {
+                    const resp = await userManager.signoutCallback();
+                    onSignoutCallback && await onSignoutCallback(resp);
+                }
+            } catch (error) {
+                dispatch({ type: "ERROR", error: signoutError(error) });
+            }
         })();
-    }, [userManager, skipSigninCallback, onSigninCallback]);
+    }, [userManager, skipSigninCallback, onSigninCallback, onSignoutCallback, matchSignoutCallback]);
 
     // register to userManager events
     React.useEffect(() => {

src/utils.ts

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

test/AuthProvider.test.tsx

@@ -105,6 +105,37 @@ describe("AuthProvider", () => {
         await waitFor(() => expect(onSigninCallback).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);