Issue with serializable-state-invariant-middleware and firebase auth state

I’m using @reduxjs/toolkit which is pretty awesome. However, one of the cool middleware loaded in development, serializable-state-invariant-middleware complains about a couple of keys not being serializable:

A non-serializable value was detected in an action, in the path: `auth`...
A non-serializable value was detected in an action, in the path: `profile.token`...
A non-serializable value was detected in an action, in the path: `firebase.profile.token`...

This happens once authenticated, with auth loaded in state. I suppose there’s not a lot to do here, since we actually want auth to be in state, however the errors in console are quite annoying. The middleware can be actually configured to pass an array of dot-separated path strings to ignore when checking for serializability, but I was able to ignore only the third path successfully.

const configureAppStore = (preloadedState = initialState) => {
  return configureStore({
    middleware: [
      ...getDefaultMiddleware({
        thunk: {
          extraArgument: {getFirebase, getFirestore},
        },
        serializableCheck: {
          ignoredPaths: ['auth', 'profile.token', 'firebase.profile.token'],
        },
      }),
    ],
    reducer: rootReducer,
    preloadedState,
  })
}

Is the configuration wrong? Is there a better way to achieve full compatibility with firebase while still keeping the benefit of the middleware?

Here’s reproduction.

[markerikson]

Closing as I think we resolved the issue.

[matchatype]

They come out of the react-redux-firebase bindings library, which pretty much takes care of doing the “hard work” 😅 Not that firebase auth is “difficult”, but I guess this library is to firebase pretty much like redux-toolkit is to redux.

Here: https://github.com/prescottprue/react-redux-firebase/blob/ce475bd8a9158620c0fa5069fa15f0065007ede2/src/actions/auth.js