Search code examples
angularamazon-web-servicesamazon-s3amazon-cognitoamazon-cloudfront

Cognito not working Cloudfront Distribution with S3 Static Hosting

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' 
        }
    }
});
Solution

  • 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/`;
    }