I've been tasked with creating a suite of web components to share with customers to consume into their websites. I've come across the idea of Angular Elements, and this looks interesting, but I'm not sure if this is the best solution for our needs, or if there is something better out there.
The main concern I have is around security. The component would have to be authenticated and it would use this authentication to connect with our API to retrieve the data specifically for their site.
Something a little like this: (https://i.stack.imgur.com/B8TIe.png)
So we give the client the bundled JS for the component and they use a custom tag to display it. That would then pass the authkey to our external api at https://api.ourserver.com, the authentication would be done, a clientid found, and then the client data would be returned to the component for display.
I just can't find any information on the most important part: the most secure and client-friendly method for authentication in this situation. I'm considering vague notions of having a check between the "someauthkey" and the domain on the backend... but any other ideas are most welcome.
Questions are being raised on the robustness of security when using web components which call our authenticated API.
