This project relies on a few external APIs. This section walksthrough how to set up projects and get the API keys for:
- Firebase
- reCAPTCHA
- Agora (OPTIONAL)
- ipqs (OPTIONAL)
Use the same values for both the backend and frontend. Required API keys:
# backend
FIREBASE_API_KEY=
FIREBASE_AUTH_DOMAIN=
FIREBASE_PROJECT_ID=
FIREBASE_MESSAGING_SENDER_ID=
FIREBASE_APP_ID=
FIREBASE_MEASUREMENT_ID=
FIREBASE_JSON_FILE=firebase.json
# frontend
REACT_APP_FIREBASE_API_KEY=
REACT_APP_FIREBASE_AUTH_DOMAIN=
REACT_APP_FIREBASE_PROJECT_ID=
REACT_APP_FIREBASE_STORAGE_BUCKET=
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=
REACT_APP_FIREBASE_APP_ID=
REACT_APP_FIREBASE_MEASUREMENT_ID=
-
Go to firebase and create a project. Enable google analytics.
-
Go to the project settings to get the project ID.
- Scroll down to Project Settings > Apps and create a new web app.
- Get the values from the demo code.
- Go to Service Account to get the private key.
-
Copy the contents of the downloaded file into
ultimafia/firebase.json
. You can drag and drop the file in VSCode, then rename it. -
Enable email authentication in Firebase. Console > Authentication > Get Started > Native providers/Email/Password > Enable Email/Password.
Required API keys:
# frontend
REACT_APP_RECAPTCHA_KEY=
- Go to reCAPTCHA and register an application with reCAPTCHA v3.
- Use the client-side key (upper one).
The server side key can also be used in the backend under the env RECAPTCHA_KEY
, but it's only required for production mode.
Setting up Agora is not required to get the site running locally.
Use the same values for both the backend and frontend. Required API keys:
# backend
AGORA_ID=
AGORA_CERT=
# frontend
REACT_APP_AGORA_ID=
-
Go to agora and create a project.
-
Go to the Dashboard > Config.
- Get the App ID and certificate.
Setting up ipqs is not required to get the site running locally.
Required API keys:
# backend
IP_API_KEY=
-
Go to ip quality score and "Get a Free API Key".
-
Go to "View API Docs".
- Go to "Proxy & VPN Detection" > "Getting Started". The API key can be seen in the code sample on the right panel, or if you scroll further down to "Private Key".