Node/React app with Auth0 runs fine locally but not on Heroku - node.js

I have a react app that I created with create-react-app. It runs fine locally and Heroku. I added Auth0. It ran locally fine. But on heroku, it run fine at home page, then I click on "sign in/sign up" button. It give me this DNS_PROBE_FINISHED_NXDOMAIN....
And I noticed in address bar.. the url they tried to use is...
https://undefined/authorize?redirect_uri=https%3A%2F%2Fsecret-taiga-61180.herokuapp.com&scope=openid%20profile%20e........(rest of text is deleted for brevity)
It seems Auth0 used https://undefined to start the authentication process. I know the undefined is an error. Suppose to be something else.
The sign on button worked fine locally. But on Heroku, it errorously go to https://undefined/....
Any idea?
I followed the tutorial from Auth0.com for React Login (using auth0-spa-js 1.0.0) exactly. It worked fine locally. I did input Auth0 config setting in Heroku Setting's config var. And everything else.
Still don't know where the 'https://undefined/' comes from.
Any ideas? anyone encountered this before?
My code is at: https://github.com/zenkbaries/react-heroku (it's in 'install-auth0' branch).
Let me know if you need more info.
thanks
John

Related

Refreshing Angular app breaks one component, but only on version hosted on Heroku

I am working on a personal project for my portfolio and I'm completely stuck.
I have an Angular 14 app I've been working on. The stack is PEAN. I currently have a live version of it hosted on Heroku. The issue I'm running into is that in my local development version of the app, everything works as intended, however on the live version on Heroku, If I refresh the page using f5 while on the main backlog page, it does not refresh, and instead shows a blank page with "[ ]" at the top of the page. Every other part of the app functions fine, and it does not fully crash when I run into this issue. If I type a different URL in and go to that page, it works again. If after doing so, I click a link that loads the crashed component, it will reload just fine. It appears that the component only breaks if I refresh the component with f5 (or clicking the refresh button on chrome).
I've been working on this for a long time and I think I've narrowed it down a bit. So far I've:
confirmed that my express server is serving my static HTML files from their folder correctly
added a catch all code block at the bottom of my express file to redirect to index.html
made sure that Heroku was actually executing my server.js file
removed potential offending portions of code, like auth/error interceptors and newly added Google Sign-in
I've also:
checked with various browsers/mobile browsers
checked for console errors (there are none)
checked network tab on refresh. (just shows a 304-OK response)
checked Heroku logs. No errors there either.
The issue can not be recreated locally, and it only happens on refresh of one component, the Backlog component.
If there is any more info I can add please let me know, I'm hoping this is a regularly encountered issue. I can't seem to find anything that specifically deals with my exact issue by searching. Any help is greatly appreciated.
update
The blank page with "[ ]" appears to be my database's response when hit without a user ID to check against, and return data. I've narrowed this down to an HTTP-INTERCEPTOR that injects the user ID into the headers, which the route that would use that info for the DB wouldn't have. This makes my DB return "[]".
The only thing I don't understand is that this happens only when hosted on heroku, and not locally.

Why is Netlify changing my api link in the fetch request? Netlify: frontend Heroku: Backend

I launched my first fullstack application with Netlify and Heroku. When I test locally everything works fine but when I try the netlify I get this error in the terminal.
It should connect to Heroku, the fetch request is set up that way and I been looking online and can't seem to find any answer.
[Netlify][2]
[Front-end][3]
[Back-end][4]
P.s sorry for any odd formatting, stackoverflow insisted I format my code despite not writing any code

Why on refreshing my deployed app I get error as "Cannot GET /posts"?

I am making a web application using node and react. I have deployed this app using Heroku.
At the time of development suppose I am at URL http://localhost:3000/posts. Now when I refresh the page I am redirected to the same URL.
But after I have deployed my application when I am at URL https://xyz.herokuapp.com/posts and try to refresh this page I get a window showing the following message Cannot GET /posts.
I am unable to understand this problem of my code or I missed something while deploying it. Please guide me on this problem, also let me know if more information is required.

Randomly getting a login prompt

I am randomly getting a login prompt asking me to log in to localhost:3000 while working on my project (in localhost). Sometimes it does not show up the whole day and next morning I get 10 prompts in a row (canceling through pressing escape), and then it starts working properly again.
These are the errors I get in the console when it has been canceled:
I suspect one of the following, but really I have no idea:
Webpack is not configured correctly
There is some resource that requires authentication (but I can't figure out which), I am running everything on localhost
There is something wrong with the node.js server thingy...
Any tips on what might be going on are very welcome.
Edit: My backend is mocked in localhost.
Edit 2: I found this: Receiving login prompt using integrated windows authentication and it is possible that the thing that is causing the error is some faulty configuration in my IIS. But it is difficult to verify since it only shows up randomly.
Webpack has nothing to do with your API calls.
401 errors are due to auth credentials failing.
It means that your backend ask you to update your token(s) used for auth in API calls.

Netlify deploy react application breaks on parameters

I am having trouble putting an app in production with Netlify. The app works smoothly locally, but when deploying to Netlify I am having trouble with this endpoint:
mywebsite.com/confirm?token=aaf21b43849e45d5576c6e8a3278d1c4&email=test#test.com
The page is directly not found.
If I enter
mywebsite.com/confirm?token=aaf21b43849e45d5576c6e8a3278d1c4&email=test#test
(without the .com) it works fine.
It seems like a Netflify bug/limitation, but I would like to confirm with a more experienced audience (you).
Thank you very much
My current workaround has been to encrypt the email and decrypt it again so no dots are in the URL. Not the best solution but it works.

Resources