AWS Cognito UI uses a hash to include parameters when it calls the callback page

Question

I am having an issue with AWS Cognito provided UI.

When I am trying to use the provided UI, I call the endpoint with populated URL:

https://mydomain.auth.ap-northeast-1.amazoncognito.com/login?response_type=token&client_id=123456789&redirect_uri=http://localhost:3000/callback/

Now the problem is that, after authentication, Cognito uses a # to send back the required parameters. The result would look like this:

http://localhost:3000/callback/#id_token=eyJragIsm2PqVpw&access_token=eyJraWQiOiJ&expires_in=3600&token_type=Bearer

I have a hard time reading id_token and access_token in my callback page (which is a vue app).

How can I configure Cognito to use the usual question mark (?) to pass query string, Or, How can I read the passed parameters after hash (#).

I appreciate your advise on this.

Answer 1

If you are using Vue.js router, it is actually pretty easy to process the hash part. Just put this snippet somewhere in your component. reference: https://router.vuejs.org/api/#the-route-object

let cognitoData = {}
if (this.$route.hash !== "") {
    let elementsString = decodeURIComponent(
        this.$route.hash.substr(1, this.$route.hash.length)
    );
    let params = elementsString.split("&");
    for (let param of params) {
        let values = param.split("=");
        cognitoData[values[0]] = values[1];
    }
}

// do your business with cognitoData