React-native-google-places-autocomplete: How to use a restricted API key?

[oskarth]

I'm trying to set a restricted API key. According to Google, there are the following ways to do it:

• HTTP referrers (web sites)
• IP addresses (web servers, cron jobs, etc.)
• Android apps
• iOS apps

When I set iOS apps to my bundle identifier (same for debug and production) I'm unable to use the API. Doing some research it seems like the Web API should use HTTP referrers or IP addresses. Since the IP address will change with the app user, that leaves us with using a HTTP referrer.

Assuming my reasoning above is correct, how would I go about setting the HTTP referrer for this library?

Thanks,
Oskar

[mayask]

Hi @oskarth

I see your concern.

I saw some people have used X-Ios-Bundle-Identifier header when accessing Google Cloud Vision API, but after testing it out in sample app, this trick didn't work.

After an hour of research it looks like there's no way of restricting Google API request in React Native at all.

[mayask]

We can keep this issue open, maybe some Google expert comes over and suggests something.

[atlanteh]

I opened a SO question. Hopefully someone can shed some light in there.

[mayask]

Thanks @atlanteh

[guilhermepontes]

Solved by #170

[lbrdar]

Hi,

I'm using the version 1.3.5 and I'm using the query.origin to pass Referer request header as prop (as allowed by the #170 ). However this results in warning "Browser API keys cannot have referer restrictions when used with this API." and doesn't work.
Did you guys succeed in having restrictions on Google API key? Could someone help me with this, please?

Thank you,
Leo

[guilhermepontes]

@lbrdar, sorry hearing that it didn't work for you. I'll try looking for more info about it.
But anyway, you still can simply solve this by creating another key or following this tutorial.

[lbrdar]

Hi @guilhermepontes,

thank you for responding so quickly.
From the link that you've provided:

You can change your restriction from a browser restriction to a server restriction by using IP addresses to restrict access, instead of browser referrers.

But what IP address should I use since this is an mobile app and every client have different IP address? I'm not running this on my server, I'm just using this npm package in my mobile app.

[tnortman]

@lbrdar Did you ever figure this out?
@guilhermepontes Any update on this?

From Google:

How do I resolve the error: "API keys with referer restrictions cannot be used with this API."?
You are using any of the web service APIs with an API key restricted to an HTTP referer. For security reasons, web service APIs need to use API keys restricted to IP addresses.

So it seems the HTTP refer would not be a valid solution for the Auto Complete feature of this package.

[aemdy]

So, how to restrict access to an API key using this library?

[conorstrejcek]

This still seems to be an issue -- I can't see a way to use any type of restricted API key with this package.

It might make sense to allow developers to implement the Places API on their own server, and just use this package for displaying results. Would this be a possible solution?

[willbattel]

This is still an issue affecting anyone trying to use any Google Maps APIs from React Native. The native SDKs have this ability but it seems no up-to-date public React Native version exists. RN apps have to use HTTP requests from the client which are nearly impossible to restrict.

[roycedot]

Why is this closed?

[janakact]

This needs to be solved one way or another. :cry:

The only solution I see now is to proxy the google API using an our own server and use some authentication mechanism to restrict usage.

[heyman333]

I'm sorry to have to say this here.
Maybe we can use https://github.com/tolu360/react-native-google-places
That library imlplements native SDKs

[KIbanyu]

How do i use the Android apps restricted API in my application?
Error - his IP, site or mobile application is not authorized to use this API key. Request received from IP address 197.XXX.XX.XXX, with empty referer

[abhimanyuPatil]

I dont get any solution for places.
My api keys are restricted with package name of my app 'com.myApp'

I tried adding following lines in AndroidManifest.xml
<meta-data android:name="com.google.android.geo.API_KEY" android:value="<My_API_KEY"/> and still not working.
any one has any solution or is there an issue with react-native with restricted keys
Or is it that android restricted keys dont work for places api that uses web API's

[atlanteh]

Unfortunately web apis cannot be restricted by package name. The only solution is to use a module that uses the android/ios sdk and with that you'll be able to restrict your api

[bell-steven]

You can now set a 'refer' prop in v1.4.2

[DranoelMit]

@bell-steven
The 'refer' prop has been removed as of 2 days ago (1.7.0)
Is this package just unusable in any production app since there is no way to restrict the key?

[bell-steven]

@DranoelMit Yes, indeed it was removed (it actually never worked).
In terms of the package being usable in production, that is something that every user of this package has to decide for themselves. For some it is a deal breaker, and many others have no need for a restricted key.

Just to be clear, you can "restrict" the key, but "application restrictions" cannot be used.
It isn't very hard to find someone else's Google API key online, without having to resort to inspecting an app's network traffic. Couple that with the fact that there is nothing inherently "secret" about a Google Places API key, and they can always be switched out, it is a tradeoff that many people are willing to make.

This package does not include the Google SDKs, by design. This benefit comes at the expense certain features, such as restricted api key.

You can try using react-native-google-places, I am assuming it supports restricted keys, as it includes the native Google SDKs.