Authentication

This is the authentication page. Eventually it will include explanations of:

• configuring secrets using Wrangler
• passing API keys via request params
• passing API keys via headers
• security caveats and why implementing a custom element gives better security guarantees
• other authentication mechanisms when we have implemented them

Examples

example1 - Authenticate with secret API key passed in request params

We get our latitude and longitude from a geoip service and use it to request data from a weather service. The weather service requires authentication using an API key, which we have uploaded as a secret using Wrangler.

<script type="edgeside/request-data"
  data-edgeside-output="requestData">
</script>
<script type="edgeside/rest"
  data-edgeside-input="requestData"
  data-edgeside-output="location"
  data-edgeside-endpoint="https://freegeoip.app/json/$ip"
  data-edgeside-parameter-map="$ip:${headers['cf-connecting-ip']}" >
</script>
<script type="edgeside/rest"
  data-edgeside-input="location"
  data-edgeside-output="weather"
  data-edgeside-endpoint="https://api.openweathermap.org/data/2.5/weather?units=Metric"
  data-edgeside-parameter-map="appid:${OWM_API_KEY},lat:${latitude},lon:${longitude}">
</script>
<script type="edgeside/template"
        data-edgeside-input="weather">
<img src="http://openweathermap.org/img/wn/{{weather.0.icon}}@4x.png" alt="weather icon">
  <div>
    <p>{{name}}</p>
    <p>{{weather.0.description}}</p>
    <p>{{main.temp}}&deg;C</p>
  </div>
</script>

Live Results:

Live Results (Source):

---

example2 - Authenticate with secret API key passed in request headers

This time we get some pictures of cats in sunglasses, passing an API key to the cat service via a request header

<script type="edgeside/rest"
  data-edgeside-output="cats"
  data-edgeside-endpoint="https://api.thecatapi.com/v1/favourites"
  data-edgeside-parameter-map="#x-api-key:${CAT_API_KEY}">
</script>
<script type="edgeside/template"
        data-edgeside-input="cats">
{{#.}}
<img src="{{image.url}}">
{{/.}}
</script>

Live Results:

Live Results (Source):

---