Create react app served with nginx and oauth gives me refresh page issue

Question

I have an app that is handled on server by https and it uses Oauth2 with tokens.

In react I have PathRouter which redirects to different pages

        <Switch>
            {/*the default is devices*/}
            <Route exact path="/">
                <Redirect to="/devices"/>
            </Route>

and I have an nginx config

server {
    listen 443 http2 ssl;
    listen [::]:443 http2 ssl;
    root /home/path-to-static;
    index index.html;
    
    server_name *****.com;
    error_log /var/log/nginx/debug.log debug;
    ssl_certificate /etc/nginx/certs/*****.crt;
    ssl_certificate_key /etc/nginx/certs/*****.key;

    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;
    ssl_ciphers 'EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH';

    location / {
      try_files $uri $uri/ @backend;
      }
                          
    location @backend {
      proxy_pass http://localhost:8080;
     }
}

And it works!

The trouble starts when I want to refresh the page. Locally (on localhost) it works just fine, but when I refresh page on the server it won't let me and tells me that I am unauthorized. I have a login screen where I enter my credentials and receive tokens and every request to the server I make with those tokens BUT my routing (I assume that) is the cornerstone that leads to the error- the inner routing happens without tokens.

Once again: it works fine until I refresh the page. Locally it works fine always.

That is the error that is provided on server

PS Maybe this is important: when I logined via login page and then I proceed to devices there is no devices request - as when I refresh the page via F5.

PS 2 I found a config when I am on some tab in my app and I clear all the uri but root and hit enter and it leads me to https://myapp.com/devices ! And it does it correct.

deathfry · Answer 1 · 2021-02-18T09:14:41.250

Ok, after reading tons of answers on SO I finally got it to work.

Firstly, a great answer from user @Panther here react.js application showing 404 not found in nginx server

When your react.js app loads, the routes are handled on the frontend by the react-router. Say for example you are at http://a.com. Then on the page you navigate to http://a.com/b. This route change is handled in the browser itself. Now when you refresh or open the url http://a.com/b in the a new tab, the request goes to your nginx where the particular route does not exist and hence you get 404.

To avoid this, you need to load the root file(usually index.html) for all non matching routes so that nginx sends the file and the route is then handled by your react app on the browser.

So, as he recommended I've changed my config like

location / {
  try_files $uri $uri/ /index.html @backend;
  }
                      
location @backend {
  proxy_pass http://localhost:8080;
 }

But this gave me some weird errors.

So I have to write location for every path I have, like this:

location / {
  try_files $uri $uri/ @backend;
  }
  
location /devices {        // here my path is similar as in react 
                           // router 
  try_files $uri $uri/ /index.html;
}

Create react app served with nginx and oauth gives me refresh page issue

1 Answers1