Sunday 27 September 2020

Federation requires either a User Pool or Identity Pool in config error - Amplify + Angular

I'm having trouble finding information on how to associate my existing user pool with amplify using Angular. Currently when I click on my Login with Google button, I get this error:

enter image description here

The amplify configure CMD doesn't give an option about a .config file. So I'm not sure how to establish this relationship to make that error go away. I already did amplify init and it went through successfully.

How do I make the connection to the User Pool?

I appreciate any help!

The error happens when I click on the Google login button in login component:

login.component.ts

async signInWithGoogle(): Promise < void > {
    const socialResult =
        await this.authService.socialSignIn(AuthService.GOOGLE);
    console.log('google Result:', socialResult);
}

auth.service.ts

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { Subject } from 'rxjs';
import { Amplify } from 'aws-amplify';
import { Observable } from 'rxjs';
import { BehaviorSubject } from 'rxjs';
import {
  CognitoUserPool,
  CognitoUserAttribute,
  CognitoUser,
  AuthenticationDetails,
  CognitoUserSession
} from 'amazon-cognito-identity-js';
import Auth, { CognitoHostedUIIdentityProvider } from '@aws-amplify/auth'
import { Hub, ICredentials } from '@aws-amplify/core'
import { User } from './user.model';
import awsconfig from '../aws-exports';
Amplify.configure(awsconfig);
const POOL_DATA = {
  UserPoolId: 'us-east-1_fSgUd7X4m',
  ClientId: '<my id was here>'
};

const userPool = new CognitoUserPool(POOL_DATA);

@Injectable({ providedIn: "root" })
export class AuthService {
  authIsLoading = new BehaviorSubject<boolean>(false);
  authDidFail = new BehaviorSubject<boolean>(false);
  authStatusChanged = new Subject<boolean>();
  public loggedIn: boolean;

  private _authState: Subject<CognitoUser | any> = new Subject<CognitoUser | any>();
  authState: Observable<CognitoUser | any> = this._authState.asObservable();

  public static SIGN_IN = 'signIn';
  public static SIGN_OUT = 'signOut';
  public static GOOGLE = CognitoHostedUIIdentityProvider.Google;
  registeredUser: CognitoUser;
  constructor(private router: Router) {
  }

  signUp(username: string, email: string, password: string): void {

    this.authIsLoading.next(true);
    const user: User = {
      username: username,
      email: email,
      password: password
    };
    const attrList: CognitoUserAttribute[] = [];
    const emailAttribute = {
      Name: 'email',
      Value: user.email
    };
    attrList.push(new CognitoUserAttribute(emailAttribute));
    userPool.signUp(user.username, user.password, attrList, null, (err, result) => {
      if (err) {
        console.log(err)
        this.authDidFail.next(true);
        this.authIsLoading.next(false);
        return;
      }
      this.authDidFail.next(false);
      this.authIsLoading.next(false);
      this.registeredUser = result.user;
    });
    return;
  }

  confirmUser(username: string, code: string) {
    this.authIsLoading.next(true);
    const userData = {
      Username: username,
      Pool: userPool
    };
    const cognitUser = new CognitoUser(userData);
    cognitUser.confirmRegistration(code, true, (err, result) => {
      if (err) {
        this.authDidFail.next(true);
        this.authIsLoading.next(false);
        return;
      }
      this.authDidFail.next(false);
      this.authIsLoading.next(false);
      this.router.navigate(['/']);
    });
  }
  socialSignIn(provider: CognitoHostedUIIdentityProvider): Promise<ICredentials> {

    return Auth.federatedSignIn({ provider: provider });
  }
  signIn(username: string, password: string): void {
    this.authIsLoading.next(true);
    const authData = {
      Username: username,
      Password: password
    };
    const authDetails = new AuthenticationDetails(authData);
    const userData = {
      Username: username,
      Pool: userPool
    };
    const cognitoUser = new CognitoUser(userData);
    const that = this;
    cognitoUser.authenticateUser(authDetails, {
      onSuccess(result: CognitoUserSession): void {
        that.authStatusChanged.next(true);
        that.authDidFail.next(false);
        that.authIsLoading.next(false);
        console.log(result);
      },
      onFailure(err): void {
        that.authDidFail.next(true);
        that.authIsLoading.next(false);
        console.log(err);
      }
    });
    this.authStatusChanged.next(true); // create user with cognito data

    return;
  }

  getAuthenticatedUser() {
    return userPool.getCurrentUser();
  }

  logout() {
    this.getAuthenticatedUser().signOut();
    this.authStatusChanged.next(false);
  }

  isAuthenticated(): Observable<boolean> {
    const user = this.getAuthenticatedUser();
    const obs = Observable.create((observer) => {
      if (!user) {
        observer.next(false);
      } else {
        user.getSession((err, session) => {
          if (err) {
            observer.next(false);
          } else {
            if (session.isValid()) {
              observer.next(true);
            } else {
              observer.next(false);
            }
          }
        });
      }
      observer.complete();
    });
    return obs;
  }

  initAuth() {
    this.isAuthenticated().subscribe(
      (auth) => this.authStatusChanged.next(auth)
    );
  }
}


from Federation requires either a User Pool or Identity Pool in config error - Amplify + Angular

No comments:

Post a Comment