State is changing but transitions are not triggered in Xstate

Question

I am working with xstate with Nextjs. Now I am stuck somewhere.

import { assign, createMachine, interpret } from "xstate";

export interface toggleAuth {
  isAuthenticated: boolean;
  user: {
    name: string | undefined;
  };
}

// console.log(getCachedData());

export const authMachine = createMachine<toggleAuth>({
  id: "auth",
  initial: "unauthenticated",
  context: {
    isAuthenticated: false,
    user: {
      name: undefined,
    },
  },
  states: {
    authenticated: {
      on: {
        toggle: {
          target: "unauthenticated",
        },
      },
      entry: assign({
        user: (ctx) => (ctx.user = { name: "Pranta" }),
        isAuthenticated: (ctx) => (ctx.isAuthenticated = true),
      }),
    },
    unauthenticated: {
      on: {
        toggle: {
          target: "authenticated",
        },
      },
      entry: assign({
        user: (ctx) => (ctx.user = { name: undefined }),
        isAuthenticated: (ctx) => (ctx.isAuthenticated = false),
      }),
    },
  },
});

const service = interpret(authMachine);
service.onTransition((state) => console.log(state));

So I was watching the docs. According to them, whenever I transition from unauthenticated to authenticated and authenticated to unauthenticated, it should console log it for me. But it doesn't. It does only one time. What's happening here. Also, is it okay to define my machine like this? Thanks in advance.

Answer 1

It's not logging because you're not changing state; no event is ever being sent.

Please re-read the documentation on assigning to context - you are mutating context instead of assigning new values; the assigners should always be pure.

If you want to see the state change, you need to send a toggle event in this case:

service.send('toggle');

Also, there is no need for isAuthenticated; this is redundant, since that state is represented by the finite state (state.value) of your machine.