Auth0 Forms - Google Address widget - Google API Key Config

Help
,
1

Hey there,

we came across the new Auth0 Forms Google Address widget.

https://auth0.com/docs/customize/forms/nodes-and-components

The docs sadly only state that a “Google Maps API key” is required. Yet the docs lack any possible limitation scopes and does not state the actual required APIs.

Can anyone from Auth0 please clarify:

  • Which Google APIs are required to make the widget word?
  • What kind of IP OR Websites limitations can be set to limit the Keys usage?

We added several APIs to the Key and added the Auth0 Forms Domain to the whitelist. Still we failed to get the feature running at some point.

Allowing all APIs made it working until the last step of the flow. Then it seems that there is a Server Side call done by Auth0 Servers using the same API key which would then fail due to domain limitations we set. Above the submit button an error message appears “GmapsAddress: invalid API key”. All issues before are only logged by the Google Maps JS SDK.

Is there any recommended safe and sane Google API key config for this feature? Simply allowing all APIs from all sources feels … crazy and wrong … to me. Especially as the key is publicly used within the JS widget.

For reference: APIs we added to the key - without success:

  • Geocoding
  • Maps JavaScript
  • Maps Embed
  • Maps Static
  • Places
  • Places (New)

Access Limitation: Websites => “.eu.auth0.com/*”

Thanks and best regards,

Jan

2

Hi Jan,

To generate a public API to use the widget you can follow this guide: Автозаполнение мест  |  Maps JavaScript API  |  Google for Developers

When creating the public API key, you can define website restrictions depending if you’re using an Auth0 domain (eg. {{tenant}}.{{locality}}.auth0.com) or your own custom domain (eg. example.com).

If you have any questions or you still have errors, please provide screenshots of your browser Network tab so we can investigate it.

3

Hi Jacobo,

ok, I believe the API selection was a timing issue. I did not trust the “it might take 5 minutes” note from Google.

In any way the server side vs client side issue remains.
We have the following Websites set:

  • {{tenant}}.eu.auth0.com/*
  • {{tenant}}.eu.auth0.com

After submitting the last step this is the following error. As the error is server side we assumed that there is a server side call to the Google API which will fail du to the “websites” restrictions:

image
image885×335 17.9 KB

4

Sorry just to make sure I understand where the error happens.

When are you seeing this error?

  1. When loading the step with the widget?
  2. When submitting the form. If so, Does the widget work?
5

This error comes when submitting the form.

The widget itself now does work with the “Places API” enabled and the “Websites” restriction set to the above mentioned auth0 tenant domains.

6

Thanks for the clarification. Let me investigate this with the team.

7

After checking Google docs: Places Web Service Frequently Asked Questions  |  Places API  |  Google for Developers

If you are using a server-restricted API key, check that your allowed IP(s) are correct.

Can you also confirm you added all these IPs? Auth0 IP Addresses for Allow Lists

8

That’s the point. You can use one Google API key either with Browser Restrictions OR Server Restrictions. So either domains OR IPs.

You cannot use one restricted key for both worlds. And the widget seem to use the key for both which only works with unrestricted keys. And that’s obvious totally insecure :wink:

Reference: Orientación sobre seguridad en Google Maps Platform  |  Google for Developers

9

@jacobovidal Hey there, any update or feedback on this one?

Did you guys forget about restricting the Google API Keys when developing this widget? :wink: