ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'token')

I'm developing an Angular application where I'm implementing single sign-on (SSO) using Facebook authentication. However, I'm encountering an error with the message

ERROR Error: Uncaught (in promise): 
TypeError: Cannot read properties of undefined (reading 'token')

when I attempt to call the Auth.federatedSignIn(provider) method.

signup.page.ts

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { Router } from '@angular/router';
import { Amplify, Auth, Hub } from 'aws-amplify';
import { CognitoHostedUIIdentityProvider } from '@aws-amplify/auth';
import awsConfig from '../../aws-exports';

Amplify.configure(awsConfig);

@Component({
  selector: 'app-signup',
  templateUrl: './signup.page.html',
  styleUrls: ['./signup.page.scss'],
  standalone: true,
  imports: [IonicModule, CommonModule, FormsModule],
})
export class SignupPage implements OnInit {
  constructor(private router: Router) {}
  user: any;
  customState: any;

  ngOnInit() {
    Hub.listen('auth', ({ payload: { event, data } }) => {
      switch (event) {
        case 'signIn':
          this.setUser(data);
          break;
        case 'signOut':
          this.setUser(null);
          break;
        case 'customOAuthState':
          this.setCustomState(data);
          break;
      }
      if (data.payload.event === 'signIn_failure') {
        console.log(data);
      }
    });
    Auth.currentAuthenticatedUser()
      .then((currentUser) => this.setUser(currentUser))
      .catch(() => console.log('Not signed in'));
  }

  openHostedUI(): void {
    Auth.federatedSignIn();
  }

  openFederatedSignIn(provider: any): void {
    Auth.federatedSignIn(provider);
  }

  setUser(user: any) {
    this.user = user;
  }

  setCustomState(customState: any) {
    this.customState = customState;
  }

  signup() {
    alert('Redirecting to Tabs page...');
    this.router.navigate(['/tabs/tab1']);
  }
}

signup.page.html

            <ion-button
              (click)="openFederatedSignIn('Facebook')"
              expand="block"
              fill="outline"
              color="dark"
            >

I already tried documentation, I've been working on this for days.

Could you guys point me on the right direction? I feel like I'm missing some tutorials/documentations.

In the docs, the federatedSignIn is supposed to be called in the following way

Auth.federatedSignIn({provider: CognitoHostedUIIdentityProvider.Facebook })

so add the import and modify your openFederatedSignIn function.

import { CognitoHostedUIIdentityProvider } from '@aws-amplify/auth';

openFederatedSignIn(provider: any): void {
   provider=='Facebook' && Auth.federatedSignIn({provider: CognitoHostedUIIdentityProvider.Facebook });
}