CODEWITHSUNDEEP
reactjsamazon-web-servicesamazon-cognitoaws-amplifyaws-amplify-sdk-js
Kevin Glick
Kevin Glick

Reputation: 157

AWS Amplify federatedSignIn Error: Cannot read property '_config' of undefined

I have a react app built with AWS Amplify. I followed the getting started guide and initialized the project in App.js like so:

import Amplify, { Auth } from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);

In my NavbarComponent, I import Auth from 'aws-amplify' and I have an onClick handler on my Register/Login button that simply calls Auth.federatedSignIn:

<Menu.Item>
  <Link to="/" onClick={ Auth.federatedSignIn }>Login/Register</Link>
</Menu.Item>

When I click this button, I get the following error:

Unhandled Rejection (TypeError): Cannot read property '_config' of undefined

along with the following snippet of code:

(anonymous function)
src/Auth.ts:1713
  1710 | dispatchAuthEvent('cognitoHostedUI', currentUser, "A user " + currentUser.getUsername() + " has been signed in via Cognito Hosted UI");
  1711 | if (isCustomStateIncluded) {
  1712 |     customState = state
> 1713 |         .split('-')
       | ^  1714 |         .splice(1)
  1715 |         .join('-');
  1716 |     dispatchAuthEvent('customOAuthState', customState, "State for user " + currentUser.getUsername());

When I use the Hosted UI Test link which is provided after running 'amplify status', the login works perfectly. I sign in with one of the identity providers and I'm redirected to the homepage just fine. I only have this issue when trying to sign in or register using the Auth.federatedSignIn function from my code.

I've tried pulling down the amplify state again to be sure the aws-exports.js file is updated, but that hasn't worked. I also tried using Amplify.configure() and passing in the imported aws-exports.js directly in my NavbarComponent where I'm making the call to Auth.federatedSignIn, but that did not change anything.

Any help in figuring this out is much appreciated!

Also, for good measure, here is a sanitized version of my aws-exports.js file:

// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.

const awsmobile = {
    "aws_project_region": "<region>",
    "aws_content_delivery_bucket": "<app-name>",
    "aws_content_delivery_bucket_region": "<region>",
    "aws_content_delivery_url": "http://<base-url>.amazonaws.com",
    "aws_appsync_graphqlEndpoint": "https://<base-url>.amazonaws.com/graphql",
    "aws_appsync_region": "<region>",
    "aws_appsync_authenticationType": "AMAZON_COGNITO_USER_POOLS",
    "aws_cognito_identity_pool_id": "<cognito-identity-pool-id>",
    "aws_cognito_region": "<region>",
    "aws_user_pools_id": "<aws-user-pool-id>",
    "aws_user_pools_web_client_id": "<aws-user-pools-web-client-id>",
    "oauth": {
        "domain": "<my-app-name>.auth.<region>.amazoncognito.com",
        "scope": [
            "phone",
            "email",
            "openid",
            "profile",
            "aws.cognito.signin.user.admin"
        ],
        "redirectSignIn": "http://localhost:3000/",
        "redirectSignOut": "http://localhost:3000/",
        "responseType": "code"
    },
    "federationTarget": "COGNITO_USER_AND_IDENTITY_POOLS"
};


export default awsmobile;

Upvotes: 2

Views: 9275

Answers (2)

maaloul bilel
maaloul bilel

Reputation: 11

Importing it like this worked for me:

import {Amplify, Auth } from 'aws-amplify';

Upvotes: 1

Sigex
Sigex

Reputation: 2949

The federatedSignIn function takes in an object.

import { CognitoHostedUIIdentityProvider } from "@aws-amplify/auth/lib/types";

...

const user = await Auth.federatedSignIn({
  provider: CognitoHostedUIIdentityProvider.Google
});

Upvotes: 1

Related Questions