Integrate AWS Cognito with STAC Browser

[ngachung]

Work with UCS and UI/UX Requires a fork of STAC Browser in unity-sds github

[wphyojpl]

https://lucid.app/lucidchart/5c28dc13-528d-4a23-892a-c340a79370b5/edit?invitationId=inv_4a9608d3-d5ea-4cfb-8833-3bbe6ca63f8c&page=A9hsimywP9.2#

May not have the cognito bit.

[wphyojpl]

From Slack: https://jpl.slack.com/archives/D03GKP2E3B2/p1717528258121209 ok, then first you have to write vue app code to read request headers it receives. Then you have to read the request header called oidc_access_token and consider it as Cognito access token

If you want to simply protect the app without thinking about any page level/ button level authorization, you can just remove auth code from vue. Then simply use Cognito authentication provided by mod_auth_openidc module in httpd server.

The above screenshot has the headers it should receive

but webapp should know, how to read correct header (edited)

[wphyojpl]

From @ramesh-maddegoda

for httpd server, we need to access a HTTPS url directly

Not via API Gateway. More info:

So, API Gateway and httpd has 2 purposes: RESTfful API Gateway : To proxy/interface RESTful APIs RESTful API Gateway is not meant to handle website traffic

[wphyojpl]

Tracing...

index.js has Vuex.Store where the states are stored. 
    It has mutations which will update the state. 
    mutations has setAuthData() which will store the token in the state named "authData".

    It has actions which will be triggered by the UI components.
    actions has setAuth method which will call setAuthData with the value which is the token (or whater is put in the pop up password box)

    It also has "doAuth" state. It is initially set as empty array.
    But "mutations" method "requestAuth" can set it with a callback function. which will lead to popping up password dialog box. 

Authentication.vue is a UI component.
    It has methods for submit and cancel button.
    When submit method is called, it will call index.js #setAuth with the value from the textbox. 

StacBrowser.vue is a UI component.
    It loads "Authentication" component from Authentication.vue
        with condition "doAuth" array is larger than 0.

"doAuth" is updated in index.js requestAuth method by adding a "callback"
"callback" is usually a function. There are 3 places where it is called. 

Whenever there is an authentication error like this // (cx.state.authConfig && isAuthenticationError(error)) 
It is called to load the pop up
        cx.commit('requestAuth', () => cx.dispatch('load', args));
        cx.commit('requestAuth', () => cx.dispatch('loadNextApiCollections', args));
        cx.commit('requestAuth', () => cx.dispatch('loadApiItems', args));

Adding the token to state.authData is not applied directly. 
That's because state.requestHeaders is NULL
It is set in mutations # setRequestHeader

Conclusion:
    Just need to add this method in StacBrowser.vue before created()

        beforeCreate() {
            const sampleToken = ''
            this.$store.dispatch('setAuth', sampleToken);
        }

Now needs to findout how to get sampleToken from Browser.