Amplify Auth - Cannot read properties of undefined (reading 'handleAuthResponse')

[Marcussx]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React

Amplify APIs

Authentication

Amplify Categories

auth

Environment information

System:
OS: Windows 10
CPU: (8) x64 Intel(R) Core(TM) i7-8400H CPU @ 3.00GHz
Memory: 2.87 GB / 15.80 GB
Binaries:
Node: 10.16.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
Utilities:
Git: 2.22.0. - C:\Program Files\Git\cmd\git.EXE
IDEs:
VSCode: 1.67.0
Visual Studio: 17.0.32014.148 (Visual Studio Community 2022)
Databases:
SQLite: 3.31.1
Browsers:
Chrome: 101.0.4951.67
Edge: Spartan (44.19041.1266.0), Chromium (101.0.1210.39)
Internet Explorer: 11.0.19041.1566

Describe the bug

Hello everyone,

I'm working on a straight web application using react js, and I'm using Aws Amplify to upload files to S3 Bucket.
Everything works fine.

Now I would like to protect my S3 Bucket so I would not let unathorized access.

I've been following this post: #8632
becuse that solutions fits me too.

But I've faced an issue.

My code is below (The code is almost identical as mentioned in this post - that I left link to, but I will paste it here anyway), so this is my code of configureAmplify.js

import { Amplify, Auth } from 'aws-amplify';
import * as AmazonCognitoIdentity from 'amazon-cognito-identity-js';

export function configureAmplify(awsCognitoRresponseUrl) {

 Amplify.configure({
   Auth: {
     identityPoolId: IDENTITY_POOL_ID,
     region: REGION_ID,
     userPoolId: POOL_ID,
     userPoolWebClientId: CLIENT_ID,
   },
   Storage: {
     AWSS3: {
       bucket: BUCKET_NAME,
       region: REGION_ID,
     },
   },
 });

 try {
   Auth._oAuthHandler.handleAuthResponse(awsCognitoRresponseUrl).then(resp => {
   
     // using the id, access and refresh tokens provided by the AuthHandler:
     const AccessToken = new AmazonCognitoIdentity.CognitoAccessToken({
       AccessToken: resp.accessToken,
     });
     
     const IdToken = new AmazonCognitoIdentity.CognitoIdToken({
       IdToken: resp.idToken,
     });
     
     const RefreshToken = new AmazonCognitoIdentity.CognitoRefreshToken({
       RefreshToken: resp.refreshToken,
     });
     
     const sessionData = {
       IdToken: IdToken,
       AccessToken: AccessToken,
       RefreshToken: RefreshToken,
     };
     
     const poolData = {
       UserPoolId: POOL_ID,
       ClientId: CLIENT_ID,
     };
     
     // pass the poolData object to CognitoUserPool
     const userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);
     // create an object containing the username and user pool.  You can get the username from the accessToken
     // using the AmazonCognitoIdentity.CognitoAccessToken class (from previous post)
     
     const userData = {
       Username: AccessToken.payload.username,
       Pool: userPool,
     };

     // create a cognito user using the userData object
     const cognitoUser = new AmazonCognitoIdentity.CognitoUser(userData);
     console.log('cognito user data', cognitoUser);

     const session = new AmazonCognitoIdentity.CognitoUserSession(sessionData);

     // calling the AmazonCognitoIdentity.CognitoUserSession() class with the Cognito tokens
     cognitoUser.setSignInUserSession(session);
     
   });
 } catch (err) {
   console.log('configureAmplify err:', err);
 }
}

I've installed amazon-cognito-identity-js and aws-amplify libraries.

Current versions:

"amazon-cognito-identity-js": "^5.2.8",
"aws-amplify": "^3.4.3",
"aws-sdk": "^2.1138.0",

As I wrote in text above, I can't get this running since it looks like _oAuthHandler is undefined and I can't invoke methods of undefined as message says:

TypeError: Cannot read properties of undefined (reading 'handleAuthResponse').

How couId I possible solve this ?

Any kind of help would be really awesome! :)

Thanks,

Cheers

Expected behavior

I would expect Amplify to works as in post above. Not sure what has changed, that is why I am here.

Reproduction steps

Try to create a Cognito user session without urlListener, or using Auth._oAuthHandler.handleAuthResponse(). It doesn't appear to be possible.

Code Snippet

``

Log output

// Put your logs below this line

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[jamesaucode]

Hi @Marcussx, in order to better assist you, can you clarify why you need to manually set the credentials? For manually setting up your own S3 bucket with Amplify, you can follow the docs https://docs.amplify.aws/lib/storage/getting-started/q/platform/js/#manual-setup-import-storage-bucket .

Also, are you using Auth.signIn() or Auth.federatedSignIn() ? If you only need to sign in through Cognito Userpool, you can use Auth.signIn() instead.

[chrisbonifacio]

Hi 👋 Closing this as we have not heard back from you. If you are still experiencing this issue and in need of assistance, please feel free to comment and provide us with any information previously requested by our team members so we can re-open this issue and be better able to assist you.

Thank you!

[MarioStipetic]

Hi, this happened me when I was adding Amplify Google oauth and did not press the "Deploy" button on the online Amplify web interface.
The button is a bit "hidden", and you need to scroll down.

[tannerabread]

Hi @MarioStipetic
It sounds like you were able to unblock yourself and were just leaving what you missed originally for others that find this issue.

Is that correct? If so we appreciate the extra information to unblock others.

If not, please let me know and I can reopen this issue