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.
Related
I'm working on a full-stack app with React, express, node, PostgreSQL, and Auth0.
I followed all of the steps for creating a simple login button in react, but when I clicked enter, instead of the Auth0 universal login page, I got https://undefined/authorize?redirect uri=http URL.
The .env file was in the./src directory, which generated this error for me.
I moved it to the app's root, beside the src directory.
What else could be causing this error:
There are three fields in your auth0 application settings: Allowed Callback URLs, Allowed Logout URLs, and Allowed Web Origins.
They must all be set to http://localhost:3000/.
Your variable in the.env file must begin with REACT_APP (docs)Example:
REACT_APP_AUTH0_DOMAIN=xxxxx
REACT_APP_AUTH0_CLIENT_ID=yyyyy
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!
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?
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.
I am trying to implement Instagram Login in my React App. I am setting the Client OAuth Redirect URL to http://localhost:3000 but the Developer account is not accepting the URL saying it has to be https.
Any suggestions on whats the best way to implement Instagram Login in React App
Have you tried this solution? https://create-react-app.dev/docs/using-https-in-development/
Checkout these threads which discuss using localhost Redirect URI may be helpful
https://developers.facebook.com/community/threads/1035796896617512/
https://developers.facebook.com/community/threads/2324374700917110/
Also from https://developers.facebook.com/blog/post/2018/06/08/enforce-https-facebook-login/
You will still be able to use HTTP with localhost addresses, but
only while your app is still in development mode.
Add
HTTPS=true
in your .env
run app again npm run start