Where to store api keys in Flutter web? - api

Im currently working with Flutter web with a Php backend that is protected with an api Key.
Where should I store the Api Key in Flutter Web? the package "flutter_secure_storage" is not available for web so it is not an option.

You can use the SharedPreferences plugin for storing and retrieving persistent simple data. They supported for the web from version 0.5.4+7

Related

Deploying Front End On Netlify And Backend On Heroku Without Exposing API Key

I have built a react application using The Movie DB Api, I am fairly new in deploying applications. I want to publish the app as a portfolio project. Currently the frontend calls the API directly using key stored in .env file. But deploying it directly will expose my API key, hence I want to use separate backend to call the API and send the data back to frontend. My question is that is there any possibility that uploading the backend on Heroku and accessing the backend server from a Netlify frontend can somehow expose my API key? Some explanation about how environment variables work in both of these platforms will also be helpful.
I haven't uploaded anything to Netlify or Heroku till now, as the API Key is sensitive information,

Xamarin iOS Native - Google Maps Api Security

I am building a Xamarin iOS Native project for a iPhone app and i am using Google Maps for creating Routes to several delivery points.
I registered for the Google Maps API but i have troubles with the security of the API key.
In my project i have installed the Nugget package for Xamarin.Google.iOS.Maps and set the App restrictions to my iOS Bundle name. When initializing the MAP all works fine.
BUT we also use the Direction API for setting up routes to different points of the map. But this call function method is a HttpClient call to a JsonAsync call. The Google API denies the call because it did not work with the Bundle name because its a HtppClient Call.
The project is installed on Mobile devices so restricting with a IP address is not a option for us. No restriction AT ALL is also bad for the security.
So my question is : How do I secure this?
Please note that web services cannot work with API keys that are Android/iOS restricted. Web services are server-side and can only work with API keys that are either unrestricted or restricted by IP address.
To resolve your issue, please create a second API key to use for web service requests only.
The public docs on best practices when using API keys has also some suggestions for when IP address restrictions are impractical as with the case with mobile applications.
When using Maps Web Service APIs in these scenarios, secure your apps using one or more of the following techniques:
-proxy server
-obfuscation
-pinning
References:
https://developers.google.com/maps/api-key-best-practices#api_key_table_sup_5
https://developers.google.com/maps/api-key-best-practices#proxy_server

How can I setup sign in as Google account on a react native + asp core web api and Identity server as middleware

How can I configure my mobile app project to sign in using external providers (Google). I am using react native + web api core. Most examples using google sign in is using ASP.Net Web application not web Api. I am using also Identity server as middleware
IDS4 still requires a serverside UI (although you could in theory use whatever client side framework you wish) so to keep things simple I'd wire the Google sign into your existing sign in UI flow.
For a native app it's strongly recommended that you use the authorization code flow with PKCE and use ASWebAuthenticationSession or custom tabs for iOS and Android respectively.

Create/spit out an API based from Ember App

We currently have an Ember app that's able to process GitHub repositories. Is it possible to create an API using Ember based from the current Ember app?
No. Ember is client side framework only, you can't create API using it

How to host a common back-end code of Firebase for React and React-native without compromising the real-time feature?

We (me and my team) are building a food delivery real-time Web and Mobile app (using react-native) which also includes payment integration and admin dashboard for a client.
The tech stack we've chosen for the app:
View
React (Web app)
React-native (Mobile app)
Back-end
Express
Firebase
We thought of sharing the app data using a common back-end for the web and mobile app. Basically, we would've created an API that provides the end-points using Express and then Express would Save/Retrieve data to/from Firebase. Express would be our middle-ware.
We created 2 project folders keeping first of all only web app in mind:
react-webapp
express-webapp
And then, we start the respective server for the packages.
Unfortunately, API's aren't real-time and we may have to implement our mechanism to make the flow real-time.
So, we switched to merging firebase with react. We decided that'll use express just for sending emails. So, the folder structure for the web app is something like:
react-webapp
node_modules
public
src
firebase
With this approach, we created a demo and we do get real-time updates and we can also use ReactFireMixin. Later we can use the same folder and add it to react-native as well for Saving/Retrieving data from the database.
My question is, as we don't have any prior experience of building a Web and Mobile app with a common database/back-end and React/React-native, is this approach apt? Is there anyway in which we can segregate the front-end code from the back-end and utilize the real-time feature of firebase?
The reason for segregating the backend from front-end is to keep a common real-time backend for react and react-native without having to keep 2 separate firebase folders for the web and mobile app.
Note: If you are wondering why real-time then the client has asked for a real-time order placement mechanism.
It may work to use socket.io with express to allow for realtime back end updates that come from firebase.