0

I use a third party authentication service which returns an access_token in URL upon successful authentication.

Interesting thing is that everything is working perfectly fine on my dev machine but when published to production, it doesn't handle the path and I end up with the generic 404.html page on the server which tells me that React Router simply is not handling this route.

The callback looks like this in the URL: https://myapp.com/login#access_token=somereallylongstring&scope=openid%20profile%20email&expires_in=7200&token_type=Bearer&state=anotherreallylongstring

The route I defined in my app for login looks like below:

<Route path="/login">
   <Login />
<Route>

Again, this works fine locally. What am I missing here?

P.S. My version of React Router in package.json is "react-router-dom": "^5.1.2"

UPDATE: I figured out why this is happening but not sure what the solution is.

I'm doing static website hosting through my Azure Blob Storage which understands that index.html is the web page it is supposed to serve. It also understands the concept of serving web pages based on URL in the request. So, when the callback comes back as https://myapp.com/login#..., it looks for the login.html page but doesn't find it so it displays the generic 404.html page.

Right now, I'm not sure what the solution is so I'd appreciate any suggestions.

Sam
  • 26,817
  • 58
  • 206
  • 383
  • Is there any error or warning in the console? Since it is changing the route, run the app with preserving logs in the console and check error if there is any.. – harish kumar Feb 21 '20 at 19:14
  • No. I simply end up on the generic `404.html` with the long `access_token` in the URL but I don't see any errors. – Sam Feb 21 '20 at 19:15
  • Are you serving `index.html` file in the configuration at the backend when visiting those URLs directly in the browser? – harish kumar Feb 21 '20 at 19:20
  • I figured out what's causing the issue but not sure about the solution yet. Please read the `UPDATE` section in original post. – Sam Feb 21 '20 at 19:23
  • I got an article about the same, https://medium.com/@antbutcher89/hosting-a-react-js-app-on-azure-blob-storage-azure-cdn-for-ssl-and-routing-8fdf4a48feeb. Hope it helps. – harish kumar Feb 21 '20 at 19:25
  • Yes, the article definitely describes the same exact problem that I'm facing. It's talking about upgrading to `Verizon Premium` for `Azure CDN`. Not crazy about paying extra for this but let me explore a bit. Thank you very much for your help! – Sam Feb 21 '20 at 19:31
  • There is an issue thread on github as well https://github.com/MicrosoftDocs/azure-docs/issues/16003. Since react app is not a static web app. It's a single page application. As per the comments, currently, there is no solution of it yet, and the issue is closed with same [Link](https://medium.com/@antbutcher89/hosting-a-react-js-app-on-azure-blob-storage-azure-cdn-for-ssl-and-routing-8fdf4a48feeb) – harish kumar Feb 21 '20 at 19:35
  • It points back to the article that you sent me earlier as the real solution! I really appreciate your spending your time to help me out on this issue. Thanks again! – Sam Feb 21 '20 at 19:39
  • 1
    Please check this as well https://stackoverflow.com/questions/59072306/hosting-spa-with-static-website-option-on-azure-blob-storage-clean-urls-and-dee – harish kumar Feb 21 '20 at 19:43
  • Basically, the same concept and also using `Azure CDN` with `Verizon Premium`. Looks like there's no way out of this. I'll have to use `Verizon Premium`! – Sam Feb 21 '20 at 19:46
  • For SPAs you need to redirect all links to your root as `/* /` and client side routing handles the rest – Rikin Feb 21 '20 at 19:49
  • @Rikin I'm not quite clear about your solution. Do you mean I need to handle all redirects in my `React Router`? – Sam Feb 21 '20 at 19:53
  • You need to send all traffic `/*` in your webserver to your root `/` and React Router when it encounters the URL example `/login` it will render appropriate component. This will be the same issue when you will do refresh, say it as you some how figure out how to go to `/myapp` and when you refresh the page, it goes to server and tried to find for `/myapp/index.html` and will render 404. I think this is what you need https://stackoverflow.com/questions/59072306/hosting-spa-with-static-website-option-on-azure-blob-storage-clean-urls-and-dee what @HarishSharma pointed out – Rikin Feb 21 '20 at 19:57
  • The problem is that I'm not using a web server. As I indicated in the `UPDATE` section of the original post, I'm serving my `React` app from my `Azure Blob Storage` so I don't have any control on redirecting to a particular page. However, as suggested in the article @HarishSharma provided, I can use `Azure CDN` to use a `URL Rewrite` approach to handle this situation. – Sam Feb 21 '20 at 19:59

0 Answers0