I have a React website that I'm hosting and deploying through Netlify. I have it currently set up so that I'm able to log in using their authentication service, which is useful. However, it only works on my Localhost. When I try to use it on the Netlify hosted site, I get the following error:
Uncaught (in promise) Error: Illegal url for new iframe - https://%22trail-app-7d2e3.firebaseapp.com%22/__/auth/iframe?apiKey=********&appName=%5BDEFAULT%5D&v=9.2.0&eid=p&usegapi=1&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en.ILxaxn5iF9E.O%2Fam%3DAQ%2Fd%3D1%2Frs%3DAGLTcCP4GH4pdEaIiZe1k-cWfBRo9KTiAQ%2Fm%3D__features__#id=I0_1635906033796&_gfid=I0_1635906033796&parent=https%3A%2F%2Ftrailapp.netlify.app&pfname=&rpctoken=37134086
at Object._.Zk (cb=gapi.loaded_0:154)
at Fl (cb=gapi.loaded_0:165)
at Object._.Gl (cb=gapi.loaded_0:166)
at Object._.Nl (cb=gapi.loaded_0:172)
at _.Ym.openChild (cb=gapi.loaded_0:310)
at _.Ym.open (cb=gapi.loaded_0:315)
at iframe.ts:81
at l (runtime.js:63)
at Generator._invoke (runtime.js:294)
at Generator.next (runtime.js:119)
It seems as though it's trying to use that URL to reference a script that presents the iframe with the Google login. I'm not sure what permissions would be causing it not to work. I've enabled everything I know to.
I am using a .env file to hide my API information from a repository and have the values set up under "Environment Variables" on Netlify. If anyone has any feedback it'd be greatly appreciated!
You need to add your hosted domain in firebase as I have added my own domain here.
Related
I am aware that this question has been asked multiple times. However, they were usually issues related to localhost.
I have a django site where I used react for the frontend.
Everything runs perfectly when I have my react at port 3000 and django at 8000. Even the google login
But when I run
npm run build
I pasted the build folder in the django root and make all the changes in settings.py
Now I directly went to localhost:8000
this error shows up on google login
Manifest: Line: 1, column: 1, Syntax error.
Google Login failed {error: 'popup_closed_by_user'}
sometimes its even a 403 error.
I tried it on both localhost and heroku and it won't work.
I've been stuck on this for days. Would appreciate some help
Your authorized javascript origin seems correct.
In the Authorized redirect URI you have also set the base url which is not correct. If you have used some package in django for google authentication; they have given you the endpoints. Like here is the example for the social-auth
http://127.0.0.1:8000/social-auth/complete/google-oauth2/
https://some-heroku-base-url/social-auth/complete/google-oauth2/
I wanted to deploy a react application which is a simple auth0 login page and on localhost:3000, eveything works fine, I can click the login button and everything works, it sends me to the auth0 login page.
Here is the part im stuck at:
When I push to Github and deploy to netlify and try to open it using the link netlify gave me, I click the login button and I get this in the URL bar: https://undefined/authorize?redirect_uri=
I have checked both the .env file in the app and on Netlify in the environments section and everything has the proper env variables. here is where I am testing it: https://reactjssample-324hz.netlify.app/
Here are the URIs I have setup:
Allowed Callback URLs:
http://localhost:3000,https://reactjssample-324hz.netlify.app
Allowed Logout URLs:
http://localhost:3000,https://reactjssample-324hz.netlify.app
Allowed Web Origins:
http://localhost:3000,https://reactjssample-324hz.netlify.app
Please tell me if I need to include anything such as code snippets.
EDIT: 06/01/2022
I have added the domain and clientID to the index.js file but now I am getting this when I click the login button:
Netlify 404 page not found although I have this in the URL bar now: https://tubular-klepon-a1d5fc.netlify.app/authorize?client_id= which I assume is better than what I had before.
EDIT: 06/02/2022
Here are the endpoint settings I have for my application
endpoint settings
Thanks
324hz
win1H2
he/him
Look like you have not configured the YOUR_DOMAIN in the application. Let try to configure it with value reactjssample-324hz.netlify.app
And do not forget to configure the customer domain reactjssample-324hz.netlify.app in Auth0 platform.
configure YOUR_DOMAIN
Hope it can help.
Can anyone help me with setting up rewrites/redirects?
I have a route that is /privacy_policy
With no rewrite, I get access denied only on the hosted app.
Then I found this solution for it: https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html#redirects-for-single-page-web-apps-spa
Added this to Amplify settings, and the page works fine. However, I have custom fonts in the directory that weren't loading in production.
I followed this: React images load locally but not on AWS Amplify
And changed the redirect from 200 to 404 rewrite. However, this then broke my fb login because fb curls my privacy policy and it returned a 404. How can I get both to work?
HTTP Error 404.3 - Not Found
The page you are requesting cannot be served because of the extension configuration. If the page is a script, add a handler. If the file should be downloaded, add a MIME map.
I got this error when accessing react frontend. the app is hosted on the azure app service. so anyone knows how to fix this? is it need to be done in react side?
I did basic movie database type app with React and then deployed it to Heroku. App contains input field and it returns results after pressing Enter, and this works just fine locally. My problem is when I deployed my app to Heroku nothing happens anymore when I hit Enter and trying to search something. I belive app works correctly but for some reason it doest't get data from API when app is deployed to Heroku. Any ideas what causing this problem and how to fix this?
Source code
Live demo
Mixed Content: The page at 'https://reactmoviedb.herokuapp.com/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://www.omdbapi.com/?apikey=bf410ecf&s=dfvdf'. This request has been blocked; the content must be served over HTTPS.
The error your are getting
ReactJS API Data Fetching CORS error