Web3 Auth Challenges
As this is embeddabe widget, the source code of the widget should be as lightweight as possible. Also to avoid any possible conficts with other scripts used on the website, we’re pretty limited in 3rd-party libraries we can use. However we need to use several web3auth package (for example:
Also, having 3rd-party libraries in embeddable script increases chances to some unexpected behaviour, as show on the example below:
After minification, one function name has been renamed to
$() which caused conflicts with jQuery and other scripts.
To solve this issue, we can split our widget into 2 separate parts: embedded widget itself and authentication modal window which will be opened in the iframe.
Having authentication window in the iframe will also solve another issue with web3 social login via oauth2 protocol. OAuth protocol requires us to set us a callback url, to which the authentication code will be sent during authentication process, for example: https://example.com/?widget_auth=success. And as we would like to allow our widget to be embeddable to unlimited number of websites, we can’t set callback urls for all these websites in bulk. As our authentication window will be opened in an iframe - it always has a fixed callback url. And then we just need to pass authentication information back to the parent window (where our embeddable widget is embedded).
To send the information from the iframe back to our main widget, we can use
window.parent.postMessage function in the authentication window and listen for the message event in our main widget.
If the user is on mobile, we need to call
window.open function to open the same authentication window in a new tab and pass the id of the choosen social login, and on window load we need to manually call
web3auth.init() function. This way the authentication window will be opened in a new tab, then we can pass the auth code back to the iframe in opened in previous tab using
window.opener.postMessage function, and then - send the data from the iframe back to our main widget.
And that’s it! As a result, we have super lightweight embeddable main widget, written on vanilla js without any 3rd-party libraries and we have highly customizable authentication script, which is running in iframe, where we can use any 3rd-party libraries we need, without having to worry about potentical conflicts on the websites which embedded our widget.