Feat: authenticated calls in Candid UI

[Web3NL]

See #474 and demo link

Overview
Allow authenticated calls via Internet Identity (and possibly pem files)

Requirements
New deps: auth-client and identity packages from agent-js
Modifications and additions to tools/ui

Considered Solutions
Added II to Candid UI canister

Recommended Solution
Also recommend uploading pem files (with warning to developer about security)

Considerations
Should be easy to maintain, modifications of existing files are kept to a minimum
New deps version bumps

TODO
Remove dfx.json, canister_ids.json and target_test_canister from branch (left them for demo purpose)
Browser compatibility check
Testing preferably with Docker and Selenium (for local II alternative origins testing over https)
UI enhancements
Gather feedback

[rvanasa]

Looks good so far! Thanks for the contribution!

[Web3NL]

This is only tested manually in production.
See https://m4ul7-aqaaa-aaaal-qcewq-cai.raw.icp0.io/?id=mvxad-wyaaa-aaaal-qcexa-cai

Let me know if I can improve

Leaving this for now, until further review

[chenyan-dfinity]

Thanks for your contribution!

We don't need the target_test_canister here. I can merge once it's removed.

[Web3NL]

Thank you!

[Web3NL]

Here we go!

[Web3NL]

Many thnx!

Will this make it into dfx 0.15.2? I would be so proud 😄

[chenyan-dfinity]

Should be. I will make a PR to include this in dfx soon.

[chenyan-dfinity]

@Web3NL Actually, there is one more UI fix we need to do. We use Candid UI in the playground with small width. The II button looks big there. Is there an easy way to make it smaller with small window width? (cc @rvanasa if you have a quick fix)

[Web3NL]

Will have a look tomorrow i hope

[ggreif]

@Web3NL Does the merged version work with ic0.app-domain anchors too?

[chenyan-dfinity]

Yes, I think it supports both raw and icp0.io

[Web3NL]

@Web3NL Does the merged version work with ic0.app-domain anchors too?

yes, i added a form to choose between ic0.app / icp0.io. Same for raw / non-raw
Note, the obtained principal is independent of derivation origin domain, but does change if you include / exclude raw

[Web3NL]

@Web3NL Does the merged version work with ic0.app-domain anchors too?

Excuse me, I corrected my last response.

Does this answer your question, or were you refering to the default identity provider, which now is always identity.internetcomputer.org and never identity.ic0.app

The derivationOrigin (canister for which we want to obtain a Principal) may be icp0.io or ic0.app

[rvanasa]

Actually, there is one more UI fix we need to do. We use Candid UI in the playground with small width. The II button looks big there. Is there an easy way to make it smaller with small window width?

From a responsive UX standpoint, the following three improvements would help a lot on smaller screen sizes:

• Using @media CSS queries to change the login form / button layout for different screen widths
• Moving checkboxes inside of the <label> tag (which makes it possible to toggle the checkbox by clicking the label)
• Shortening "Login with Internet Identity" to just "Login" (maybe depending on screen width)

@Web3NL, here is a partial solution in case you want to borrow any of this code: #480

[Web3NL]

I will have a look, thnx for tagging.

And I think this feature deserves some documention on the portal on how a canister should serve the ii-alternative-origins file.

I will attend to that 🙂

[ggreif]

yes, i added a form to choose between ic0.app / icp0.io. Same for raw / non-raw
Note, the obtained principal is independent of derivation origin domain, but does change if you include / exclude raw

I am asking because my ic0.app-based anchor didn't work in the example canister.

I did:

and still got

@Web3NL

[Web3NL]

Ah, I see.

Is this because identityProvider is set to identity.internetcomputer.org?

If so, then there should also be an option to choose identity.ic0.app as the provider

[chenyan-dfinity]

Deployed to the main net!

Another possible improvement is to only show the Login button when alternativeOrigins is presented in the destination canister response.

[Web3NL]

Deployed to the main net!

Another possible improvement is to only show the Login button when alternativeOrigins is presented in the destination canister response.

Yes, or perhaps disable it and inform the user of the possibility with a link to how to set it up