Auth0 is redirecting to localhost after successful login on react app deployed on netlify - reactjs

I have deployed my react app using netlify and using auth0 authentication, on the local host, everything was working fine but after deployment and successfully login, the app is getting redirected to localhost:3000/collection, instead, I want it to redirect to https://tubemate/collection.netlify.app after successful login.
Application login URL
https://tubemate.netlify.app
Allowed callback URLs
https://tubemate/collection.netlify.app
Allowed logout URLs
https://tubemate.netlify.app
Allowed web origins
https://tubemate.netlify.app

Related

Attempting to login using Auth0 and Netlify w/ React although I get "undefined" in the URL when trying to login

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.

404 on auth0 callback when trying to login on app deployed on heroku

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!

Rewrites/Redirects for AWS Amplify

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?

Implicit Callback not found on this server - react and node express - deploy on Azure

I've an issue with the deployment of my react app on Azure web app service.
I've followed this guide: https://developer.okta.com/blog/2018/07/10/build-a-basic-crud-app-with-node-and-react in local environment it works, but when I've tried to deploy on Azure app service the login with okta doesn't work.
So let me explain. I've uploaded node express server on Azure node app service. The react frontend i've uploaded the "npm run build" result in an other Azure app service.
I've added the Login redirect URI and trusted origins (cors) on okta admin panel.
But during the login the online version of my app replay this issue: "Not Found The requested URL /implicit/callback was not found on this server." and the URL is " https://supportexor.azurewebsites.net/implicit/callback*id_token=qwerqwerqwerqwerqwerqwer" .
In App.js
<Route path="/implicit/callback" component={ImplicitCallback} />
In index.js
const oktaConfig = {
issuer: ...,
redirect_uri: .../implicit/callback,
client_id: ...,
};
I would like to see the "SecureRoute" after the login into my app.

Login page with express and create-react-app

I'm working on a project using express.js and create-react-app.
The basic structure of the project is:
/.
|-- express-backend(:3001)
|---|---react-frontend:(:3000)
The express backend is serving on the port 3001 while the frontend is serving on the 3000. I don't have any problem in making this work, since I'm redirecting backend requests using proxy in the package.json
"proxy": "http://localhost:3001"
The only problem comes when I'm trying to redirect the user on a login page using app.use("/login", login).
I'd like to redirect users to a login.ejs page when he is on the url localhost:3000/login.
I'm only able to visualize the page when I visit localhost:3001/login.
How can I redirect the user to the static page login.ejs when he is on localhost:3000/login?
(I'm new on express, if you can give me an explanation with the answer I'd be very grateful)
app.use("/login", function(req,res){
res.redirect("login");
});
Now this login.ejs page should be available public folder which is accessible to user.

Resources