[Exact Line Found] Amplify Auth doesn't work for non-trailing slash redirect

Adding up here for visibility:

Found the bug: https://github.com/aws-amplify/amplify-js/blob/286c9e8fbec3ccdc5bf24edf3cbfb2bae370d751/packages/auth/src/OAuth/OAuth.ts#L128-L130

Please update this to not care about a trailing slash.

example.com/dashboard/?code=xxxxxxxx&state=xxxxxx == example.com/dashboard?code=xxxxxxxx&state=xxxxxx

Amplify shouldn’t care about trailing slash, this line needs to be updated to disregard trailing slash from redirect url.

Describe the bug I’m able to sign in with Auth.federatedSignIn({provider: 'Facebook'}); in js, but I can’t use that in typescript. Auth.federatedSignIn({provider: CognitoHostedUIIdentityProvider.Facebook}) fails because it calls cognito-identity instead of cognito-idp. My local storage isn’t updated with the cognito tokens and I get a 400 from cognito-identity.us-east-1.amazonaws.com. js does not call this endpoint ever, not sure why the ts SDK is calling it, or why there is no user-pool support for this. my export file is the same for both js and ts. The only difference is the federated sign in call above.

To Reproduce Steps to reproduce the behavior:

1. setup amplify with user pools and facebook identity provider
2. create a new next ts project
3. import amplify newest version: import { Auth } from 'aws-amplify';
4. import { CognitoHostedUIIdentityProvider } from "@aws-amplify/auth/lib/types";
5. Call Auth.federatedSignIn({provider: CognitoHostedUIIdentityProvider.Facebook});
6. Open your network tab in chrome and see that cognito-identity is being called. even though the aws-export file should have "federationTarget": "COGNITO_USER_POOLS"

eg:

import React from "react";
import { Button, Heading } from "@chakra-ui/react";

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

interface loginProps {}

export const Login: React.FC<loginProps> = ({}) => {

  function continueWithFacebook() {
    return Auth.federatedSignIn({provider: CognitoHostedUIIdentityProvider.Facebook});
  }

  return (
    <div>
      <Button onClick={() => continueWithFacebook()}>Continue with Facebook</Button>
    </div>
  );
};

export default Login;

This is the call from the typescript sdk. Notice its missing the login:

{"IdentityId":"us-east-1:xxx","Logins":{"cognito-idp.us-east-1.amazonaws.com/us-east-1_xxxx":"<THIS IS BLANK AND SHOULDN'T BE>"}}

Expected behavior The vanilla js version of this works. Auth.federatedSignIn({provider: 'Facebook'}); works as expected. You can go to the application tab in chrome and see local storage updated. CognitoIdentityServiceProvider object will be under the local storage tab.

cognito-identity.us-east-1.amazonaws.com is called with a valid login.

{"IdentityId":"us-east-1:xxx","Logins":{"cognito-idp.us-east-1.amazonaws.com/us-east-1_xxxx":"eyJraWQiOiJWTzYrsasfasdf"}}

Code Snippet Please provide a code snippet or a link to sample code of the issue you are experiencing to help us reproduce the issue. (Be sure to remove any sensitive data)

Working: Auth.federatedSignIn({provider: 'Facebook'}); in js Not working: Auth.federatedSignIn({provider: CognitoHostedUIIdentityProvider.Facebook}) in tsx

What is Configured? If applicable, please provide what is configured for Amplify CLI:

• Which steps did you follow via Amplify CLI when configuring your resources.
• Which resources do you have configured?
  • If applicable, please provide your aws-exports file:

const awsmobile = { “aws_project_region”: “us-east-1”, “aws_cognito_identity_pool_id”: “us-east-1:xxx”, “aws_cognito_region”: “us-east-1”, “aws_user_pools_id”: “us-east-1_xxx”, “aws_user_pools_web_client_id”: “xxx”, “oauth”: { “domain”: “homulator-auth-dev.auth.us-east-1.amazoncognito.com”, “scope”: [ “phone”, “email”, “openid”, “profile”, “aws.cognito.signin.user.admin” ], “redirectSignIn”: “http://localhost:3000/dashboard/”, “redirectSignOut”: “http://localhost:3000/”, “responseType”: “code” }, “federationTarget”: “COGNITO_USER_POOLS” };

• If applicable, provide more configuration data, for example for Amazon Cognito, run aws cognito-idp describe-user-pool --user-pool-id us-west-2_xxxxxx (Be sure to remove any sensitive data)

Environment

npx envinfo --system --binaries --browsers --npmPackages --npmGlobalPackages

Smartphone (please complete the following information):

• Browser Chrome

Additional context Add any other context about the problem here.

You can turn on the debug mode to provide more info for us by setting window.LOG_LEVEL = ‘DEBUG’; in your app.

[jarrodwatts]

Anyone finding this thread, an easy hack solution if you are using Next JS, is to include: trailingSlash: true, in your next.config.js file. Sucks this has to be done, but easy work around for the time being.

[jgiunta1]

Found the bug: https://github.com/aws-amplify/amplify-js/blob/286c9e8fbec3ccdc5bf24edf3cbfb2bae370d751/packages/auth/src/OAuth/OAuth.ts#L128-L130

Please update this to not care about a trailing slash. Or at the very least do not fail silently, makes no sense why this is a blank return. The auth flow half succeeds then just fails randomly.

example.com/dashboard/?code=xxxxxxxx&state=xxxxxx == example.com/dashboard?code=xxxxxxxx&state=xxxxxx