gapi google login state not retained after refresh in Angular

I am implementing the Google Login using gapi. However, whenever I refresh the page, it will not retain the login state even though I have already signed in. I am new to Angular so I am not sure is it the problem where the observable is not subscribed.

Code below is sign in service:

export class GoogleSigninService {
  private auth2!: gapi.auth2.GoogleAuth
  private subject = new ReplaySubject<gapi.auth2.GoogleUser>(1)

  constructor() { 
    gapi.load('auth2', ()=>{
      this.auth2 = gapi.auth2.init({
        client_id: "924860986285-i826b6deginu1okhhpuu2fsu4gm1e1af.apps.googleusercontent.com"
      })
    })
  }

  public signin(){
    this.auth2.signIn({
    }).then( user => {
      this.subject.next(user)
    }).catch(()=>{
      this.subject.next(undefined)
    })
  }

  public signout(){
    this.auth2.signOut().then(()=>{
      this.subject.next(undefined)
    })
  }

  public observable() : Observable<gapi.auth2.GoogleUser>{
    return this.subject.asObservable()
  }

Code below is component:

 constructor(private signInService: GoogleSigninService, private ref: ChangeDetectorRef){ }
 ngOnInit(): void {
      this.signInService.observable().subscribe( user => {
        this.user = user
        this.ref.detectChanges()
      })
  }
 signIn(){
    this.signInService.signin()
  }
 signOut(){
    this.signInService.signout()
  }