I have an app using react/express. I ran into a conflict with passport auth via facebook login. It appears the service worker is blocking the call "mysite.com/api/auth/facebook". I also tried to workaround this problem by adding double-dash to this url like "mysite.com/__api/auth/facebook" which succeeded in the first step, but the facebook callback (to mysite.com/api/callback/facebook) failed. If I also add a double-dash for facebook callback (mysite.com/__api/callback/facebook) I got this error:
URL Blocked: This redirect failed because the redirect URI is not whitelisted in the app’s Client OAuth Settings. Make sure Client and Web OAuth Login are on and add all your app domains as Valid OAuth Redirect URIs.
So, it appears that I have to use sw-precache as suggested in other posts. However, I tried this sw-precache config and it didn't help me.
// config/sw.js
module.exports = {
staticFileGlobs: [
'build/**/*.js',
'build/**/*.css',
'build/index.html'
],
navigateFallback: '/index.html',
navigateFallbackWhitelist: [/^\/api\/auth\/.*/],
cacheId: 'my-magical-cache-machine'
}
This is how I build it:
"build": "react-scripts build && sw-precache --config=sw-precache.js && copyfiles -u 1 build/**/*.* prod",
So, why the navigateFallbackWhitelist doesn't work for me?
UPDATE:
I figured out myself...First, sw-precache is deprecated, so I switched to sw-precache-cra, then, I just change the default navigateFallbackWhitelist to
navigateFallbackWhitelist: [ /^(?!\/api\/(auth|callback)\/).*/ ]
Actually, I misunderstood the "whitelist" initially.
Related
I have a PERN stack app using auth0 for login that is working fine on localhost but when deployed to heroku after I click to sign in I get a 404 on the callback.
The URL is exactly the same except for appname instead of localhost on all routes, i have also the env variables and callback and logout urls setup in auth0 correctly.
Is there anyone who has run into this and can help me solve this problem? Thanks.
check your port. I thought my port was 3000 (I'm using Next.js on Heroku with Auth0), but it actually isn't running on 3000, but whatever Heroku decides. I changed my auth0 Allowed Callback URLs and all is working!
here is my app link https://course-s.herokuapp.com/ and here is my Github repo https://github.com/shaikafroz016/Course-S . The app work perfectly in localhost whit express, MongoDB Atlas, and node server as a backend and react-redux as a frontend but when I am trying to run this on Heroku my says's failed to fetch whats the problem.
EDIT:
I have mentioned the base url as localhost:3000 in my client so should i have to add heroku app link to base url? can you please help me what to do. And also when i am trying the app with backend localhost (localhost:3000) it work just fine as i close my local server the heroku app says faild to fetch
This must be because of CORS (Access-Control-Allow-Origin), here's a workaround :
run npm install cors
and then add this to your app.js file :
var cors = require('cors')
app.use(cors())
Be sure to add this before all your requests definition (app.get, app.post, etc...)
Now CORS is enabled.
The Access-Control-Allow-Origin header determines which origins are allowed to access server resources over CORS.
Explanation : https://medium.com/#alexishevia/using-cors-in-express-cac7e29b005b
We currently have a Ionic v1 project that calls an API implemented as a Google App Engine application. This Ionic app runs with Ionic serve, PhoneGap, and when deployed to Android/iOS.
We are now trying to deploy to the web using Firebase hosting.
The initial HTML/JS code all runs correctly until we reach an $http.get call to the Google App Engine. What happens then is that the request reaches the GAE server and is processed correctly there with a response being sent back. But in the client code, the response.data property is the contents of the Firebase application’s index.html rather than the response that was supplied from GAE.
We don’t know why this is happening, or how to fix it, but here are some relevant facts:
When we run the app on a device using PhoneGap or via the Google Playstore, the URL by which we access GAE is the same URL if we were accessing GAE from a browser. But, when we run the app via “ionic serve” we must use a proxy to work around a CORS issue. What we do is to specify a simplified URL in the Ionic code, and then provide a mapping of that simplified URL to the GAE’s actual URL in a file called “ionic.project” which looks something like this:
{
"name": "proxy-example",
"app_id": "",
"proxies": [
{
"path": "/api",
"proxyUrl": "http://cors.api.com/api"
}
]
}
When we attempt to deploy the app via either “firebase deploy” or “firebase serve” we must use the proxy version of the URL in our $http.get call. Otherwise the call does not reach the GAE server at all. It is not clear how Firebase knows to use “ionic.project” for the proxy mapping.
We are not using “Angularfire”, only the standard AngularJS library that is packaged with Ionic 1.x
Thanks for any help you can offer.
I am developing app with react-redux. And I am using the quick development, which always build my client at localhost:3000
I have my api written in php, and its on localhost:80.
So its cross-origin, but on production its not. So I would like to develop it while being on the same domain+port. But I have no clue how to set it up.
I am using MAMP - Apache for the php and yarn (create-react-app) for react.
So it can't run at the same port.
Anyone any ideas how to solve this problem?
When I use "yarn start" I can edit my react code and its compiled upon save and I can see the edited code within seconds at the localhost:3000
Is it possible to "deploy" it in this "developer" mode into some folder, where I could possibly setup a server using actually MAMP ( apache ) ?
Thanks in advance
In case if for client side of your application you have use create-react-app, you can add a proxy configuration in package.json file.
"proxy": {
"/apiRoute": {
"target": "http://localhost:80"
},
},
So all your request will be redirected to port 80(PHP) from client side.
The /apiRoute is the name of the routes (GET, POST, PUT..) you had defined in PHP. So i would suggest to make a pattern in PHP for all routes like /api/**, so in package.json instead of adding all routes, you can something like below
"proxy": {
"/api/*": {
"target": "http://localhost:80"
},
},
I have configured create-react-app to use https in my local development environment. I would now like to convert my React application to a progressive web app and I plan to use Lighthouse to check my status. I am running Lighthouse as a Chrome plugin, but I am having trouble with the part when it is checking if my HTTP requests are redirected to HTTPS. They are not.
I have been crawling through my node_modules and I have taken a look at webpack-dev-server that is bundled with create-react-app. I have tried to make some changes, but the best I have managed so far is that I have gotten "Too many redirects".
TL;DR: How can I configure create-react-app to redirect all requests from http to https on my local dev environment?
Here's the code from my create-react-app if you are having trouble with just the redirect part. I'm doing it manually since Heroku doesn't automatically handle it. But this actually needs to be handled on the server because it makes the app visibly load twice if it has to redirect to http. But for now, I'm redirecting in the constructor of my App component.
constructor(props, context) {
const url = window.location.origin
if (!url.includes('localhost') && !url.includes('https')) {
window.location = `https:${url.split(':'))[1]}`
}
}
For your purposes, you'd just need to take out the localhost part and make the new url a little differently (because of the port).
I'm using ramda here, but lodash also has a tail function you can use.
import { tail } from 'ramda
...
constructor(props, context) {
const url = window.location.origin
if (!url.includes('https')) {
window.location = `https:${tail(url.split(':')).join(':')}`
}
}
#Fmacs, for redirection of HTTP traffic to HTTPS, instead of using local dev-server, deploy your app on any environment like Heroku or Firebase. Firebase is very simple. I see that you also have other issues running the create-react-app that you created. I have explained how to do this in simple steps in a blog post with sample code in GitHub. Please refer to: http://softwaredevelopercentral.blogspot.com/2019/10/react-pwa-tutorial.html