Ionic NGRX Signal Store auth not triggered after relogin

I have an issue with my Angular 18 and Ionic 7 application, which uses NGRX Signal Store. During logout, I'm able to clear the localStorage and set the isAuthenticated and token states to false and undefined, with a redirection to the login page. However, when I try to log back in, although the authentication works correctly and the token is received, the withHooks in the store, which I instantiate in the HomeComponent, no longer triggers. I believe Ionic is keeping the previous page in the DOM. How can I destroy components upon logout?

Ngrx Auth Signal Store :

export const AuthenticationStore = signalStore(
{ providedIn: 'root' },
withState(initialValue),
withComputed((store) => ({
isLogged: computed(() => store.isAuthenticated()),
isNotLogged: computed(() => !store.token() || !store.isAuthenticated()),
})),
withMethods(
(
store,
infra = inject(AuthenticationInfrastructure),
localInfra = inject(LocalStorageAuthenticationInfrastructure),
router = inject(Router)
) => ({
localLogin(token: WithToken): void {
if (token.access_token) {
patchState(store, {
isAuthenticated: true,
token: {
access_token: token.access_token,
expires_in: 0,
refresh_expires_in: 0,
refresh_token: '',
},
});
}
},
logIn: rxMethod<AuthenticateType>(
pipe(
tap(() => patchState(store, { isLoading: true })),
concatMap((input) => {
return infra.login(input.login, input.password).pipe(
map((tokenResponse) => {
return {
access_token: tokenResponse.access_token,
expires_in: tokenResponse.expires_in,
refresh_expires_in: tokenResponse.refresh_expires_in,
refresh_token: tokenResponse.refresh_token,
} as AuthenticationToken;
}),
tap((token) =>
localInfra.startSession({
access_token: token.access_token,
refresh_token: token.refresh_token,
})
),
tapResponse({
next: (token) => {
patchState(store, {
isLoading: false,
isAuthenticated: true,
token: token,
});
const state = getState(store);
console.log('Login State', state);
},
error: () => {
console.log('erreur login');

patchState(store, { isLoading: false });
},
})
);
})
)
),
logout: () => {
patchState(store, {
token: undefined,
isLoading: false,
isAuthenticated: false,
});
const state = getState(store);

localInfra.endSession();
router.navigate(['login'],{ replaceUrl: true });
},
})
),
withHooks({
async onInit(
store,
localInfra = inject(LocalStorageAuthenticationInfrastructure),
router = inject(Router)
) {

const session = await localInfra.getSession();
if (session.access_token) {
store.localLogin(session);
}
// localInfra.getSession().then((token : WithToken ) => {
// if (token) {
// console.log(token)
// store.localLogin(token);
// }
// });
},
})
);



HomeComponent :

export class HomeComponent {
constructor() {
addIcons({ personCircle });
}


// call to my UserhStore not AuthStore
private readonly userApplication = inject(UserApplication);

customer$$ = this.userApplication.user;

segmentFilter = new FormControl('abilities');

}


redirectToLoginEffect when im authenticate :

export class AuthenticationApplication {
private readonly store = inject(AuthenticationStore);
private readonly router = inject(Router);

private redirectToLoginEffect = effect(() => {
if (this.store.isLogged()) {
this.router.navigate(['tabs']);
}
});


I tried adding replace: true in the navigate method in my logout, but it doesn't work.

Continue reading...