angular / angularfire

Angular + Firebase = ❤️
https://firebaseopensource.com/projects/angular/angularfire2
MIT License
7.64k stars 2.2k forks source link

signout function in ngrx effect with() #3251

Open AsimNet opened 1 year ago

AsimNet commented 1 year ago

Hello, I have an NGRX in my project, and when I sign user out I got the error explained below, please notice that I use NGRX with:

runtimeChecks: {
          strictStateImmutability: true,
          strictActionImmutability: true,
        },

Version info

Angular: ~13.3.0 Firebase: ^9.1.0 AngularFire: ^7.2.1

How to reproduce these conditions

auth.effects.ts:

  clearLocalstorageOnLogout$ = createEffect(
    () =>
      this.actions$.pipe(
        ofType(AuthActions.logout),
        tap(async () => {
          // @todo: there is a bug here
          await this.firebaseAuth.signOut();
        }),
      ),
    {dispatch: false}
  );

  constructor(
    private readonly actions$: Actions,
    private firebaseAuth: Auth,
    private router: Router,
  ) {
  }

Debug output

Errors in the JavaScript console

Unhandled Promise rejection: Cannot assign to read only property 'operations' of object '[object Object]' ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot assign to read only property 'operations' of object '[object Object]'

Unhandled Promise rejection: Cannot assign to read only property 'isRunning' of object '[object Object]' ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot assign to read only property 'isRunning' of object '[object Object]'

Screenshots

Screen Shot 1444-01-05 at 9 35 49 PM Screen Shot 1444-01-05 at 9 35 41 PM
google-oss-bot commented 1 year ago

This issue does not seem to follow the issue template. Make sure you provide all the required information.

lowebackstrom commented 1 year ago

Having the same issue, no new information?

lowebackstrom commented 1 year ago

This seems to be a pure NgRx-error, on my end cos I was sending the full firebase user through the action. Replacing the action payload (in my case in an effect listening to authState) with an object only containing user info (uid, displayName, etc) solved the issue.

Sloppy, my bad.

jasonc624 commented 1 year ago

I am facing a similar error with logout with NGXS (state management)

Sapython commented 6 months ago

Facing the same issue image

But in this case the signout is not getting called by any action of ngrx it's just a function calling inbuilt signout function.

zkristof97 commented 4 months ago

Version info Angular: 17.0.0 NgRx: 17.1.0 AngularFire: 17.0.1

It's crazy, I have noticed whenever you keep the original User object from '@angular/fire/auth' in memory while trying to logout, this error occurs. At first I just kept the authenticated User object in the ngrx store and was getting this error, but thanks to @lowebackstrom I mapped it to a much simpler object with just a few properties taken from the original object like: email, uid, and that solved the issue. Later I again got this error but only after successful signup and then signing out (with no page reload in-between, because that solved it). I had to perform a similar mapping as before and only keep uid in my case, in order to get rid of this error! Reason is that after signup I passed the original User object to an action, but did not intentionally keep it in the ngrx store it just probably ended up being stored somewhere in memory. I hope this will save someone valuable hours :) It would be really interesting to know why the behavior as is