Error in Cognito Federated Login Azure AD with redirectSignIn http://localhost:5173 but not with localhost:5173

[danteyc]

Before opening, please confirm:

• [X] I have searched for duplicate or closed issues and discussions.
• [X] I have read the guide for submitting bug reports.
• [X] 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

``` I have a federated login with Cognito and AZURE AD in **React+VITE**, in AWS within Allowed callback URLs: I have localhost:5173 and also http://localhost5173. ```

Describe the bug

I have a federated login with Cognito and AZURE AD in React+VITE, in AWS within Allowed callback URLs: I have localhost:5173 and also http://localhost5173.

In my Amplify configuration inside the front project when on redirectSignIn: I have the following value ['localhost:5173'], it redirects me to outlook and I can log in successfully

, but if I change the value to ['http://localhost:5173/ '] I get the following error: 403 Forbidden: You don't have permission to access this resource.

What could be the problem? if both urls are authorized

Expected behavior

I hope that with both urls it works fine and redirects me to outlook, but it only happens with localhost:5173 and not with http://localhost:5173

Reproduction steps

I follow these steps https://docs.amplify.aws/react/build-a-backend/auth/add-social-provider/

Code Snippet

// Put your code below this line.

Log output

``` // Put your logs below this line ```

aws-exports.js

No response

Manual configuration

Amplify.configure({
  Auth: {
    Cognito: {
      userPoolId: 'xxxxxx',
      userPoolClientId: 'xxxxxx',
      loginWith: {
        oauth: {
          domain: 'xxx.com',
          scopes: ['openid'],
          redirectSignIn: ['http://localhost:5173/'],
          redirectSignOut: ['localhost:5173'],
          responseType: 'code',
        },
      },
    },
  },
});

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

[nadetastic]

Hi @danteyc thank you for opening this issue. What you are experiencing sounds as what is expected by Cognito. As seen in the documentation here, Amazon Cognito requires the allowed call back URLs to have either HTTPS or HTTP for localhost ( but for testing purposes only). Thus any calllback (or signout url) that is not prepended with HTTP/HTTPS will fail.

[danteyc]

Hi @danteyc thank you for opening this issue. What you are experiencing sounds as what is expected by Cognito. As seen in the documentation here, Amazon Cognito requires the allowed call back URLs to have either HTTPS or HTTP for localhost ( but for testing purposes only). Thus any calllback (or signout url) that is not prepended with HTTP/HTTPS will fail.

Hi @nadetastic thanks for your answer. I have both callback urls authorized, localhost:5173 and http://localhost:5173/

but when I use localhost:5173 (without http) in redirect uri it works fine and redirects me to outlook to continue with the login. The only problem What I have is that I get the error in the following image after entering my credentials in Outlook and trying to redirect to localhost:5173 (I understand that this error may be because it does not include the http)

but when I use http://localhost:5173/ (with http://) in redirect uri that is when I get the error: 403 Forbidden: You do not have permission to access this resource. Therefore, it does not even redirect me to Outlook to be able to continue with the login, even though I have both callback urls authorized.

[nadetastic]

@danteyc thanks for clarifying, one tiny thing that I notice is that you may not have a trailing slash after your authorized calback/signout URLs. Can you confirm, and add this if you don't?

Full URL should be http://localhost:5173/

[danteyc]

@danteyc thanks for clarifying, one tiny thing that I notice is that you may not have a trailing slash after your authorized calback/signout URLs. Can you confirm, and add this if you don't?

Full URL should be http://localhost:5173/

Yes, it has trailing slash, but it only works and redirects to outlook with localhost:3000 (without http) and localhost:5173 (without http).

[nadetastic]

Hmm that is unexpected that the domain without the scheme (localhost:5173) would work, since one of the requirements from Cognito state that the callback URL must be an absolute URI (ex http://localhost:5173/).

Can you try removing the localhost without the scheme from both Cogntio and your Amplify.configure() and test again?

Also it appears that the 403 error is coming from Azure, wondering if there's a policy you have in place in your AZ Directory that restricts the origin of the request? For example only allow requests that originate from localhost:5173 but not http://localhost:5173

[nadetastic]

Hi @danteyc following up here - have you been able to get this issue resolved of provide an update on the above comment?

[nadetastic]

@danteyc going to close out this issue due to no activity - if you are still having issues or are able to verify the above comment please let me know and I can reopen this issue. Thanks!

[richardvanderdys]

@danteyc

Was this ever solved? I am seeing the same problem when trying authorize with Cognito from localhost.

[danteyc]

@danteyc

Was this ever solved? I am seeing the same problem when trying authorize with Cognito from localhost.

I couldn't solve it, I had to deploy it to a development environment with a domain with https and I was able to continue with it, but on localhost I couldn't solve it.

[richardvanderdys]

@nadetastic I am happy to debug and work through this issue. It is a blocker for my team.

[cwomack]

@richardvanderdys, can you share more details about what you're experiencing or open up a new issue within our repo to ensure we capture more details about your local environment?

[richardvanderdys]

@cwomack Sure, we have setup a Cognito app client to handle both Cognito user pool login and a Google SAML SSO login options. We have deployed our application configured to use this app client via the amplify aws-exports file.

The deployed version of the application allows us to login successfully and creates a Cognito user as expected for each identity provider.

Although, in our local development environment, we are receiving a 403 Forbidden page just as above when the application is redirected to the hosted Cognito UI.

We have tried adding localhost to the "Allowed callback URLS", this did not work.

We have even tried using ngrok to serve as a local https solution and added the forwarded URL to Cognito, this did not work either.

We are using version 4.3.42 of the aws-amplify library.

Would any other information be helpful?

[ThierDev]

Same issue here. It was because we had configured the WAF. Temporarily disabling the WAF and the HTTP:// works !

[florianbepunkt]

@ThierDev Thank you, you saved me hours. Disabling the WAF did the trick.