I am building a full stack MERN (MongoDB Express React Nodejs) application. I am using the NPM package Google Maps React to display google maps on my website. I am having difficulty coming up with a strategy to secure my front end google maps API key.
In order to fully understand my problem it may be helpful to review the Google Maps React component code below
import {Map, GoogleApiWrapper} from 'google-maps-react';
export class MapContainer extends Component {
render() {
return (
<Map google={this.props.google} >
</Map>
);
}
}
export default GoogleApiWrapper({
apiKey: (YOUR_GOOGLE_API_KEY_GOES_HERE)
})(MapContainer)
Possible Solutions
Solution A
Store key in my Mongo database
make GET request to database to obtain the google Maps API key
put API key data string in google maps component
Solution B
note: I did some deep digging to the the Google Maps React Node module files. I found .env and .env.example files with in the google maps react node module files. The .env.example file says GAPI_KEY=FILL_IN_YOUR_KEY_HERE
store api key in google maps react node module files
Concerns with solution A
Possible solution is not secure
API key data can be accessed by user
Concerns with solution B
the node modules are part of my .gitignore file and therefore the google maps API key will not be available when the app is deployed
Thank you for your thoughts and time.
PS I used create-react-app
You have various options to securely store an api key. If you are using CircleCi for continuous builds, you can create an environment key. Check your build solution for something similar.
There are also alternatives for encrypting files such as git-secret. That way you could use an environment config file.
Bottom line do not store keys in code or in config files unless you have it encrypted.
Related
I'm using AWS Amplify to handle my ReactJS app. While it is convenient that AWS Amplify handles all backend functionality, I don't see any way I can write any of my own backend code to hide from the users. In particular, I'd like to hide my 3rd party API Key, and all the logic associated with the API results. Is there a way I can do this with Amplify or should I just try a different Amazon Compute service?
I am new to AWS but if you are asking how to hide the API key you can use the .env file.
Create a ".env" file on the root directory and then name it
" REACT_APP_apiKey= your API key here".
After this point, you can use it anywhere in your react application as in
" const myAPI = process.env.REACT_APP_apiKey; "
I am trying to build a static React App which displays api documentation. For backend I am using swagger (hosted separately in a lambda) which generates the JSON data model. With new endpoints created, I have a lambda which will give me the details of the endpoint, like headers, requests and response. The data comes in format of JSON which is dropped in a s3 bucket. Could my react app deployed in the same bucket, consume that json and render the newly added api documentation details? I need help on the same without a node backend?
Here is an example of what I am trying to build
A react app with cooking receipies is deployed statically hosted in s3.
The receipies for this app is in JSON model, which is common for any up comming receipies
This app is in AWS s3 bucket.
A new recepie needs to be added to my app. But my app is already built and hosted.
Can I build my app in such a way that if I drop any new JSON files, it would consume that file and render/refresh its frontend, without a server in S3?
Given that your app is statically hosted in S3, you will have to write client-side JS code to check for the new recipes.
You can call your Lambda from the client-side to get the endpoint and send a request to get all the recipes. If the folder path in S3 is known, you can do this check without needing the Lambda.
This way, your app will refresh the frontend without a server when you add a new JSON file.
After some through research I found that, you could drop all your JSON files in Public folder in React App. The files in this folder will not be altered. So you could access them in your react component with react useEffect Hook. Here is the reference article I took this implementation from.
How to add Static JSON files in React App post deployment
I have built this website using reactjs, firebase. I would like to know if someone wants to contribute to this project how should he/she get the data that is stored in my firebase account for the development of the website? https://www.codingspace.codes/
I know they need to create a new firebase project but how do they get the exact data that is on my website.
I don’t have any idea, anyone please help me with this.
This is a very open-ended question, typically though if it's for local development I'd just give them access to the firebase project as a collaborating member.
Alternatively, you could be looking into the import/export features of Firebase.
Use the firestore export command to export all the documents in your database, replacing [BUCKET_NAME] with the name of your Cloud Storage bucket. Add the --async flag to prevent the gcloud tool from waiting for the operation to complete.
gcloud firestore export gs://[BUCKET_NAME]
And importing it on their project in a similar manner:
Use the firestore import command to import documents from a previous export operation.
gcloud firestore import gs://[BUCKET_NAME]/[EXPORT_PREFIX]/
where [BUCKET_NAME] and [EXPORT_PREFIX] point to the location of your export files.
See the documentation for further details https://firebase.google.com/docs/firestore/manage-data/export-import
I've setup a React Amplify project. I have successfully got Auth working using Cognito User Pools but can't seem to figure out DataStore/API.
I currently use DataStore to save data locally but it doesn't seem to update in the backend. I do have the aws_appsync_graphqlEndpoint in the aws-exports.js.
Not sure how to enable the Sync Engine in this guide.
You must import Amplify from #aws-amplify/core and NOT from aws-amplify
The following code example worked well in App.js, at the BOTTOM of all your imports:
import Amplify from "#aws-amplify/core";
import { DataStore, Predicates } from "#aws-amplify/datastore";
import { Post, PostStatus } from "./models";
//Use next two lines only if syncing with the cloud
import awsconfig from "./aws-exports";
Amplify.configure(awsconfig);
Source: https://docs.amplify.aws/lib/datastore/examples/q/platform/js
You can use DataStore.query to query the data.
DataStore.save to save the record etc.
Below example should be good starting point.
https://github.com/dabit3/amplify-datastore-example
If I understand the question correctly everything is set up with DataStore and working locally. The problem is that it doesn't sync to the cloud. One of the answers suggested using Apollo. You don't need Apollo. By default, and the suggested development mode of using DataStore, is local only. When you are ready to deploy to the cloud you use the command
amplify push
which provisions all of your cloud resources for the app. For more details refer to DataStore docs.
I'm looking for a simple solution to deploy small React app with full React router support (no # urls). I've been using firebase so far, but I need to send an email from form, and used PHP for that.
Is there a service like firebase but with PHP support? Or can I somehow connect PHP file from other hosting (now I receive an error trying do so)?
You can use google cloud functions which allows to connect with the firebase.
For an example
-> ReactApp Form for UI
-> Firebase stores data based on users input through React App.
-> Google cloud function which gets called when there is an event in firebase database for an example (Create, update and delete). You can write logic in function which sends an email through send grid. You can write function in Nodejs and golang.
Example (https://cloud.google.com/functions/docs/tutorials/sendgrid)