How to call navigator.credentials.get/create from Yew

[Firstyear]

Hi there,

I was interested to call navigator.credentials.get/create from a yew applications. Generally I think this seems like the ability for yew to call out to a javascript function or object that already exists in the context, but I'm not 100% clear on how to achieve this. While there are a lot of examples and docs, none of them seem to show this behaviour.

Even as a simple example is it possible to say ... call console.log() from within yew (without ConsoleServices) for example? How would you call something in javascript from Yew?

Thanks!

[teymour-aldridge]

Hi!
Yew needs to sit on top of a set of bindings to in-browser Javascript APIs. Currently, there are two options – web-sys and stdweb (but support for stdweb is being deprecated because stdweb is no longer actively maintained).
To call Javascript functions you should use web-sys (a set of bindings to Javascript API's maintained by the rust-wasm working group). For navigator.credentials.get for example you would roughly want:

• Get an instance of Navigator from https://docs.rs/web-sys/0.3.46/web_sys/struct.Window.html#method.navigator
• Call the credentials method on this instance (https://docs.rs/web-sys/0.3.46/web_sys/struct.Navigator.html#method.credentials)
• Then you would want to call get. https://docs.rs/web-sys/0.3.46/web_sys/struct.CredentialsContainer.html#method.get
• Because this returns a Promise (analogous to a Rust Future) you should use the wasm_bindgen_futures crate's JsFuture to convert the Promise as a Future https://docs.rs/wasm-bindgen-futures/0.4.19/wasm_bindgen_futures/struct.JsFuture.html
• After that you can use spawn_local to run the Future on the current thread. Note that this function doesn't allow you to spawn future's returning a value, so you should use a callback and call callback.emit once the future is finished. https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/fn.spawn_local.html

Calling console.log is much simpler! You can just use one of the functions in https://docs.rs/web-sys/0.3.46/web_sys/console/index.html

[Firstyear]

Thanks so much! I'll give this a go, it's a great write up.

[teymour-aldridge]

You're most welcome!
Hopefully it works :D (it should do)

[Firstyear]

So far I've gotten to the creation of the promise (there are some ... quirks in webauthn that made the creation of the CredentialCreationOptions quite difficult). But I'm stuck on how to create the related callback. I'm not 100% clear on how to create a call back that will run once the future from .get/.create completes. Are there any examples of this behaviour you could point me to?

Once this is done, I'll link the code here because it could serve as a good example of a more complex(?) use of yew and other components :)

Thanks again!

[Firstyear]

Actually, I should have just used grep - I found https://github.com/yewstack/yew/tree/v0.17/examples/futures_wp which looks like it has the answers I need. If I get stuck from here I'll contact again. Thanks again very much!