0

I'm trying to get my S3 website that is behind a cloudfront distribution working with cloudfront. If I test my Angular app locally and I have my Callback URL and Sign out URL set to localhost:4200 with slash at the end

enter image description here

then in my app when I click login, it goes to Cognito Hosted UI and redirects after login to my app and I can authenticate successfully. If I update it to my cloudfront distribution

enter image description here

and deploy my angular app with cloudfront url then I get

https://<cognito_url>.us-east-1.amazoncognito.com/error?error=redirect_mismatch&client_id=<client_id> with a 400 in the network tab.

So as a recap it works locally with localhost:4200, but not with cloudfront url. What am I doing wrong? I appreciate any help!

login button in angular

login() {
        window.location.href = `https://<cognito_url>.auth.us-east-1.amazoncognito.com/login?client_id=<client_id>&response_type=code&scope=email+openid+profile&redirect_uri=<cloudfront_url>.cloudfront.net/`;
    }

auth.service.ts

    Auth: {
        region: 'us-east-1',
        userPoolId: environment.cognitoUserPoolId,
        userPoolWebClientId: environment.cognitoAppClientId,
        mandatorySignIn: false,

        oauth: {
            domain: '<cognito_url>.auth.us-east-1.amazoncognito.com',
            scope: ['email', 'profile', 'openid'],
            redirectSignIn: 'https://<cloudfront_url>.cloudfront.net/',
            redirectSignOut: 'https://<cloudfront_url>.cloudfront.net/',
            responseType: 'code' 
        }
    }
});
user6680
  • 79
  • 6
  • 34
  • 78
  • Take a look at https://stackoverflow.com/questions/58477877/aws-cloudfront-misinterprets-routing-rule-and-redirects-resource-back-to-s3-buck - I am suspicious of S3 redirect rules missing the HostName of the CloudFront distribution: https://docs.aws.amazon.com/AmazonS3/latest/userguide/how-to-page-redirect.html – Kevin Hakanson Feb 14 '23 at 03:32
  • @KevinHakanson I updated my post and removed the bit about redirect to s3 bucket because the next day I tried recreating the cloudfront distribution, applied new bucket policy to point to new distribution, updated custom error pages, and the 2nd time around it didn't show s3 bucket in redirect when clicking login from cloudfront (not local). It's still having the exact same redirect mismatch error though, but s3 bucket showing isn't a thing anymore. So same issue is still going on. – user6680 Feb 14 '23 at 23:06
  • In your local environment, you are being sent to your redirect correctly and getting an authorization code or an equivalent of that. However, the code is not redirecting you the correct when your website is access via cloud front? – Albert Marrero Feb 15 '23 at 16:02

1 Answers1

1

You need to pass the full redirect URI (scheme + domain + path) when navigating to the hosted UI.

    login() {
        window.location.href = `https://<cognito_url>.auth.us-east-1.amazoncognito.com/login?client_id=<client_id>&response_type=code&scope=email+openid+profile&redirect_uri=https://<cloudfront_url>.cloudfront.net/`;
    }
Andrew Gillis
  • 3,250
  • 2
  • 13
  • 15
  • Apparently I was using an old cloudfront distribution url in my login link. It's weird because I know I tried it same setup with previous distributions I made and it wasn't working. Since changing cloudfront distribution url, I've updated some custom error pages to redirect site so maybe that's the difference, but I got it working now. I was super confused when you put the same login link as what I had, but it made me look at it really closely and I noticed the wrong cloudfront url currently. I updated it and it's now working. So thanks! – user6680 Feb 16 '23 at 00:01