Angular login showing blank white screen

I am trying to implement login function in angular application. When I login, I am storing current user information to local storage and using that value in another modules to get current user's id , name etc.

When I go to login first time in browser (no values in local storage) , after entering credentials, it is redirecting me to home page, this works well. but when I do any changes in angular ts file, which reloads app, then it starts from login page (this time, there is value in local storage). When I enter credentials and click login button, it is showing me blank white screen. No error in console or network tab.

but if I clear local storage and tried again, it works.

local storage stores current user as below

{"id":3,"userId":3,"name":"admin"}


Below is my auth.service.ts file's source code.

private currentUserSubject: BehaviorSubject<User>;
public currentUser: Observable<User>;

constructor(private http: HttpClient,
private router: Router // PROPERLY INJECT ROUTER HERE
) {

const storedUser = localStorage.getItem('currentUser');
this.currentUserSubject = new BehaviorSubject<User>(storedUser ? JSON.parse(storedUser) : null);
this.currentUser = this.currentUserSubject.asObservable();
}

public get currentUserValue(): User {
return this.currentUserSubject.value;
}


and below is my method for login

adminLogin(email: string, password: string) {

const endpoint = 'auth/admin-login';
return this.http.post<any>(`${this.apiUrl}/${endpoint}`
, {email, password} , {withCredentials: true}
).pipe(
tap(response=>{
this.setAccessToken(response.accessToken)
this.currentUserSubject.next(response.user);
localStorage.setItem('currentUser', JSON.stringify(response.user));
this.isAuthenticatedSubject.next(true)
}),
catchError(error => {
console.error('Error during adminLogin:', error);
return throwError(() => error);
})
);
}


I am also not sure if it is problem with local storage or what. any idea on how to fix this issue?

Continue reading...