What is the right setup for SPA + API + webtask?

First of all, I’m a new user of auth0 so excuse me if what I am asking is trivial. I have an angular2 website and a webtask that connects to the sendinblue API to send an email from a contact form in the SPA.

What I would like to know is how to correctly secure all of this because currently the webtask can be accessed with a simple url and even if my sendinblue credentials are secured with the webtask secrets functionality, every one can send an email via the webtask.

I have tried to define the webtask as an API on my profile and secure it with an access token. I have managed to test it by getting a token manually but cannot implement it in the SPA as it needs the CLIENT SECRET to get a token. All examples concerning angular2 reference to users logging in but I don’t need this as I want unregistered users to use the form. So I think that I overcomplicate everything.

What I would like is calling my webtask when I send the form via the SPA and be sure that only my SPA can call the webtask.

You want to:

  • allow a SPA to make a request to your own API; assuming that the SPA is available over the Internet then the API is also reachable from the Internet which makes any type of network-based restriction impossible.
  • allow unregistered (read not required to authenticate) users to perform the previous request through the SPA

But then you want to ensure that the source of the request is authorized (coming from your SPA). These are conflicting requirements; the SPA runs in the browser so is unable to use any authentication mechanism to prove that is indeed your SPA making the request. In addition, you want to allow unregistered users to indirectly call this endpoint so you’re not able to leverage end-user authentication as a means to establish some sort of trusted origin.

In summary, you want everyone to be able to use the endpoint (when using it from your SPA) and your SPA can’t really present any real proof that would allow to distinguish legit requests from your SPA from requests of a malicious party pretending to be your SPA.

You’ll need to likely rethink the approach and instead of requiring to know that requests come from a specific source implement something to prevent the public endpoint from being abused, for example, rate limiting.

So, what would be your approach for a serverless website to send a contact form via a specific 3rd party API ( with a secret api Key )?

I would consider rate limiting the public endpoint that gets called from the SPA, this would allow to hide the third-party API keys behind a server-side implementation so they could not be used directly while also preventing blatant automated abuse. In addition, you could also consider requiring a CAPTCHA to be solved in order to complete the contact form request.