I have setup Firebase AppCheck for my Web App and everything seemed to work fine. Now I would like to enable the debug mode when developing my app.
I followed the instructions in the official documentation but I keep getting random errors from the AppCheck module, and these prevent my app from accessing Firebase Storage:
...at Backend FirebaseError: AppCheck: Fetch server returned an HTTP
error status. HTTP status: 429. (appCheck/fetch-status-error).
Following the doc, this is the way I set AppCheck in debug mode - this is ran before everything else:
if(window.location.hostname == "localhost")
self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
Again, when my app is not in debug mode it works just fine.
Note 1: that I am not enforcing AppCheck via the console, and that 100% of the requests are displayed as "Verified"
Note 2: googling for "Firebase error 429" shows many results referring to some quota being exceeded, something hardly possible for my dev environment (we are 2 devs and definitely not putting in any sort of load on the app)
Its a bug with the js library
https://github.com/firebase/firebase-js-sdk/issues/5052
You should be using environment variables to detect debugging mode or not.
Depending on your framework and setup, this could be a command that you set up in your serve/build commands or a local env file that contains a specific debug key.
There is another issue if your reCaptcha is set to use localhost as the documentation states:
Warning: Do not try to enable localhost debugging by adding localhost to reCAPTCHA’s allowed domains. Doing so would allow anyone to run your app from their local machines!
Related
How do I get Firebase Auth to work on Heroku Deployment?
Auth works in MERN app's local development without any issues. All private information is stored in an .env file and then called in my react app with process.env.VARIABLE_NAME.
However, when I deploy to Heroku production and add the env files as shown here, I get the error: "Your API key is invalid, please check you have copied it correctly"
This is my deployed Heroku app: https://evening-fortress-01391.herokuapp.com/login
REACT_APP_FIREBASE_API_KEY=XXXXXXXX
REACT_APP_FIREBASE_AUTH_DOMAIN=XXXXXXXX
REACT_APP_FIREBASE_PROJECT_ID=XXXXXXXX
REACT_APP_FIREBASE_STORAGE_BUCKET=XXXXXXXX
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=XXXXXXXX
REACT_APP_FIREBASE_APP_ID=XXXXXXXX
Also, running the command heroku config displays the inputted env variables in the terminal.
Any idea why Auth works locally but not in deployment? Thank you!
Answer because too long for a comment.
Sounds super hard to debug - also your app just shows a login and not the API key error =) To me it sounds like either just like it says, an incorrect API key or a formatting issue.
I would make a test config variable using the same characters as your API key like REACT_APP_FIREBASE_POTATO=p07470-test-example-foooobar and then in your frontend app just console.log("TEST" + process.env.REACT_APP_FIREBASE_POTATO);. Then publish that and check it in production.
This tests are the environment variables working at all and are there some character encoding issues (do you see the exact characters in the console as you should)
When I checked the Heroku build logs, it showed this:
The requested API endpoint was not found. Are you using the right HTTP verb (i.e. GET vs. POST), and did you specify your intended version with the Accept header?
My app runs on React framework for front end, and I use the Firebase realtime database for my backend. The app runs fine on my local server but when I try to deploy on to Heroku I run into this error.
My guess is that you didn't set the environment variables, thus the base url for your request might be invalid. You can set them in Settings tab of your heroku application, under the Config Vars section.
I just started building my second Vue project, and for the first time I wanted to use the Vue CLI and NPM rather than just loading Vue via CDN.
Installing the CLI and setting up the project worked without problems, but when I ran "npm run serve" and navigated to localhost:8080 in my browser (latest Firefox) to see if it worked, I got the following error message in my browser console multiple times:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://10.126.86.51:8080/sockjs-node/info?t=1584021154635. (Reason: CORS request did not succeed).
I also get this error message once right after loading the page:
[WDS] Disconnected!
Does anyone know what these errors mean, why I get them and how I can get rid of them?
The first one seems to be related to some kind of cross-origin call that the app is making using the host's actual IP rather than localhost, but I can't think of any reason why it would, given that I literally just installed and served the example project and did not change anything after running "vue create"
Edit: I am on Ubuntu 19.10 Desktop
First of all, what kind of OS you are working on? If you are working on unix based systems, a service (like nginx) could produce this error. If so, try stopping it.
Afterwards I would try to run your application from vue ui.
Type in your terminal:
vue ui
This starts the web based graphical user interface of vue cli. You can handle your app development from there by starting your service and run your build command.
ATTENTION: you must add (import, NOT create) your project (root folder) to the UI.
If you get the same error inside your browser console, set up a vagrant box. First steps are explained here:
https://www.vagrantup.com/intro/getting-started/
Follow instructions for project setup.
Simplest way would be running
vagrant init
inside your project folder. Therefore you don't have to setup a new project.
After running the init command, try running
npm run serve
or use vue UI instead (as explained above), if you prefer it.
If the problem still exists, more infos about your OS would be helpful.
When following an article entitled, "Debugging React apps created with Create React App in WebStorm", the Debugger says it's connected to the JetBrains IDE Chrome Extension, but I can't get breakpoints to execute when using port 3000 and when I try to use the default debug port 63342 a 404 error is shown.
Here is a recording of my settings in Chrome and Webstorm 2016.2 IDE when trying to debug: http://recordit.co/MQ3LICuUIc
Steps Taken:
I've created a new JS debug configuration with the name 'ERS React Debug', the browser set to Chrome, and I've tried using the following URLs in the configuration:
http://localhost:3000/
http://localhost:3000/ers_react/public/index.html
http://localhost:63342/ers_react/public/index.html
(YT video I watched used the debug port, which is what is in my recording)
I also setup the mapping to webpack:///src as recommend in the article.
Default ReactJS app created with create-react-app is designed to be hosted on webpack server started with react-scripts start, that builds the application and starts the server. You won't be able to open this application on the simple built-in webserver (localhost:63342).
To be able to debug modern React app, you need upgrading Webstorm to the most recent version - debugging will work out of the box. Fot Webstorm 2016.2, you can try specifying URL mappings... For "react-scripts": "1.0.17", it should be http://localhost:3000/static/js/full/path to project, like http://localhost:3000/static/js/C:/WebstormProjects/untitled if the project path is C:/WebstormProjects/untitled should work:
Note that you would need to refresh the browser page to get breakpoints in code executed on pagfe loading hit
I have a problem with Firebase, React and Electron. When I use my app in dev, I use the localhost to load with react-scripts start , so it's loading in http://localhost:3000. I use this url to load my app with Electron.
BUT when I am trying to go in production, I use the electron-builder. I build my app with react-script build, it's create the build folder, and for the electron app, I change the loading url for file://${path.join(__dirname, "../build/index.html" I use build -c.extraMetadata.main=build/electron.js. It's now loading perfectly. BUT When I try to authenticate nothing happen and in the console, it says :
code : auth/operation-is-not-supported-in-this-environnement
message : This operation is not supported in the environnement this is running on. "location.protocol" must be http, https or chrome extension and web storage must be enable
How I can resolve this ?
My hypothesis it's because I don't write the url of my app in Authorized domains in Firebase Sign in method, but there is no url for my app, it's local. Does I need to load a server to employ Firebase ?
I see a similar post but without answer
I think it's because the SDK thinks it's running from a Node.js server environment. Currently, OAuth sign in with popup or redirect is not supported in Electronjs. You would need to get an OAuth credential from an electron compatible library and use the signInWithCredential API.
Firebase is looking into supporting signInWithPopup/Redirect in this environment.