Improve the way tokens and logged in users are shown in Keycloak Dev UI

[sberyozkin]

At the moment Keycloak Dev Ui will show an encoded access or ID token in the tokens view which does not bring any extra info to the user - so this PR has the tokens decoded in the token view - showing headers, payload as JSON while keeping the signature encoded. It was also possible to get the user name as part of this refactoring.
It will look like this:

and we can improve it further

[phillip-kruger]

How about we still show the token (so one can copy it if needed) but add a button to decode ?

[sberyozkin]

Hi @phillip-kruger the original token goes to the clipboard as you have shown. I just did not capture it with the above image.
So the user will press a copy to clipboard option and then can use it elsewhere if needed - the idea is that they will use this Dev UI but yes, they can copy it.
The only possible source of confusion would be that the token is shown in the expanded/decoded view but when they will paste what they copied they'll see an encoded token - I'm not sure it is significant.
Note the encoded token is also logged and is seen in the console view below and can be copied from there as well.
I think the decoded view is immediately informative - if the user will have to press 1) View ID token 2) Decode then it seems it is a bit too long to get to the decoded view.

OidcDebugger shows both tokens at the same time in the encoded and decoded form, for example:

https://oidcdebugger.com/debug#access_token=dF7KeeF_4G5wDDf2zepPXkXYRvwWuN5R&scope=openid%20email&expires_in=7200&token_type=Bearer&id_token=eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6Ik1IYW1Kc3o0NE9SV25pd1dNYjROVyJ9.eyJlbWFpbCI6InNiZXJ5b3praW5AZ21haWwuY29tIiwiZW1haWxfdmVyaWZpZWQiOmZhbHNlLCJpc3MiOiJodHRwczovL2Rldi0zdmUwY2duNy51cy5hdXRoMC5jb20vIiwic3ViIjoiYXV0aDB8NjBlNWEzMDVlOGRhNWEwMDZhZWY1NDcxIiwiYXVkIjoiTEo0OFlJWjBBZ1FjWm1IaUpMZjdOWG1QdWNRQlZqWFAiLCJpYXQiOjE2MjU2NjMwMzgsImV4cCI6MTYyNTY5OTAzOCwiYXRfaGFzaCI6InVDaERiTV9leXBsMlBYczZnMDNOb0EiLCJub25jZSI6InE4dTkyaHp4ZjkifQ.4SnAqmnQaJJtns0he08r4FubrQbvgf3SFpdg_JNyt8gZlmryRF9G_HdHANSk2xfvdKSU0up78qx2dNTG-SSN4KV_qkagpdQmjJ4CtkY7OdL4dEpJ3wt27KpIHcphnMCTcK7nRAvsSKUKosf47O7WAqQH3JOOjJASmdb6KO1jPCi2FpXmEqURtF3WoKqPbK5NAZE4-0KCObq2_RW2gkb3RQbcjZgsK9N-aEE7eyLoclcvrQBk8qipTyB4_Zu_C3xlW71utnSHcDJ70w9NXVZtDyFKsGGWOMQiMH4U5u0SP_iimMtElYF31ivX1eR5plOglzdarm5iN9rupQUg4ciunw

where it stacks it all vertically so it looks like as if there is too much info.

https://jwt.io/ stacks it horizontally. May be it is the most optimal approach, for example, user presses View ID Token and sees the encoded token with an option to copy it to the clipboard on the left hand side and the decoded view on the right hand side ?

So I guess I'd either leave it as is or experiment with the jwt.io or oidcdebugger like approach, stack both encoded and decoded views at the same time either horizontally or vertically and see how it feels - but I'm not sure I can do the latter option neatly enough myself :-)

Thanks

[phillip-kruger]

OK cool. I can look into doing that side-by-side later. Let merge this :)

[sberyozkin]

Good morning, Phillip, yes, we can indeed continue improving the way it is presented :-)