Why do I get {"message":"Authentication invalid"} from my heroku app?

Question

I am running a MERN app on Heroku. For a couple days I was getting a message: Authentication Invalid error. I finally thought I fixed it with the following code in my routes.js-

    app.use(express.static('client/build'));
    app.get('*', (req, res) => {
      res.sendFile(
        path.resolve(__dirname, '../client', 'build', 'index.html'),
        function (err) {
          if (err) {
            res.status(500).send(err);
          }
        }
      );
    });
  }

Last deployment was working perfectly last night.

This morning I get the same message- {"message":"Authentication invalid"}

In the console I receive the following error-

money-tracker-budget-app.herokuapp.com/:1 Failed to load resource: the server responded with a status of 401 (Unauthorized)

/favicon.ico:1 Failed to load resource: the server responded with a status of 401 (Unauthorized)

My Heroku Log upon start-

2020-10-02T12:11:38.291629+00:00 heroku[web.1]: Starting process with command `npm start`
2020-10-02T12:11:42.048013+00:00 app[web.1]:
2020-10-02T12:11:42.048046+00:00 app[web.1]: > [email protected] start /app
2020-10-02T12:11:42.048046+00:00 app[web.1]: > node index.js
2020-10-02T12:11:42.048047+00:00 app[web.1]:
2020-10-02T12:11:43.675256+00:00 heroku[web.1]: State changed from starting to up
2020-10-02T12:11:43.637392+00:00 app[web.1]: info: Connected to 57126
2020-10-02T12:11:44.124758+00:00 app[web.1]: Mongoose is connected
2020-10-02T12:11:44.149086+00:00 app[web.1]: info: Connected to the mongodb+srv://*********:*********@cluster-8n304djh.h5exs.mongodb.net/**********?retryWrites=true&w=majority
2020-10-02T12:12:39.430451+00:00 heroku[router]: at=info method=GET path="/" host=money-tracker-budget-app.herokuapp.com request_id=f0774668-7ec9-43c9-ba62-e7dbb7fe8638 fwd="142.120.254.11" dyno=web.1 connect=1ms service=23ms status=401 bytes=285 protocol=https
2020-10-02T12:12:39.896195+00:00 heroku[router]: at=info method=GET path="/favicon.ico" host=money-tracker-budget-app.herokuapp.com request_id=3758aa16-c737-4a16-a985-79e3aa46f347 fwd="142.120.254.11" dyno=web.1 connect=1ms service=8ms status=401 bytes=285 protocol=https

Below is my index.js-

const app = express();
const winston = require('winston');

require('./startup/logs');
require('./startup/db')();
require('./startup/routes')(app);

const port = process.env.PORT || 5000;

const server = app.listen(port, () => winston.info(`Connected to ${port}`));

module.exports = server;

Below is my routes

const accounts = require('../routes/accounts');
const auth = require('../routes/auth');
const settings = require('../routes/settings');
const transactions = require('../routes/transactions');
const users = require('../routes/users');
const budgets = require('../routes/budgets');
const budgetCategories = require('../routes/budgetCategories');
//middleware
const jwt = require('express-jwt');
const attachUser = require('../middleware/attachUser');
const cors = require('cors');
const cookieParser = require('cookie-parser');
const bodyParser = require('body-parser');
const csrf = require('csurf');
const express = require('express');
const csrfProtection = csrf({ cookie: true });
const path = require('path');

const verifyJwt = jwt({
  secret: process.env.JWT_SECRET,
  iss: 'api.money-tracker',
  aud: 'api.money-tracker',
  algorithms: ['HS256'],
  getToken: (req) => req.cookies.token,
});

module.exports = function (app) {
  app.use(cookieParser());
  app.use(cors());
  app.use(bodyParser.urlencoded({ extended: false }));
  app.use(bodyParser.json());
  app.use('/api/auth', auth);
  app.use(attachUser);
  app.use(verifyJwt);
  app.use(csrfProtection);
  app.use('/api/users', users);
  app.use('/api/accounts', accounts);
  app.use('/api/settings', settings);
  app.use('/api/transactions', transactions);
  app.use('/api/budgets', budgets);
  app.use('/api/budgetCategories', budgetCategories);
  if (process.env.NODE_ENV === 'production') {
    app.use(express.static('client/build'));
    app.get('*', (req, res) => {
      res.sendFile(
        path.resolve(__dirname, '../client', 'build', 'index.html'),
        function (err) {
          if (err) {
            res.status(500).send(err);
          }
        }
      );
    });
  }
};

Below is my server package.json

  "name": "moneytracker1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "@hapi/joi": "^17.1.1",
    "bcrypt": "^5.0.0",
    "bcryptjs": "^2.4.3",
    "cookie-parser": "^1.4.5",
    "cors": "^2.8.5",
    "csurf": "^1.11.0",
    "express": "^4.17.1",
    "express-async-errors": "^3.1.1",
    "express-jwt": "^6.0.0",
    "joi": "^17.1.1",
    "json-web-token": "^3.2.0",
    "jsonwebtoken": "^8.5.1",
    "jwt-decode": "^2.2.0",
    "moment": "^2.27.0",
    "mongoose": "^5.9.25",
    "react-cookie": "^4.0.3",
    "react-scrollspy": "^3.4.3",
    "react-toastify": "^6.0.8",
    "winston": "^2.4.5",
    "yup": "^0.29.3",
    "bl": ">=2.2.1"
  },
  "devDependencies": {
    "concurrently": "^5.2.0",
    "env-cmd": "^10.1.0",
    "nodemon": "^2.0.4"
  },
  "scripts": {
    "test": "jest --watchAll --verbose --coverage",
    "start": "node index.js",
    "server": "nodemon index.js",
    "client": "npm start --prefix client",
    "clientinstall": "npm install --prefix client",
    "dev": " env-cmd -f ./config/.env concurrently \"npm run server\" \"npm run client\"",
    "build": "cd client && npm run build",
    "install-client": "cd client && npm install",
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
  },
  "repository": {
    "type": "git",
    "url": "www.github.com/Jdowsett21/Repo"
  },
  "keywords": [
    "chatApp"
  ],
  "author": "James Dowsett-Cooper",
  "license": "ISC"
}

Below is my App.js on the React side

import React, { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

//redux
import { Provider } from 'react-redux';
import store from './store';

//pages
import Login from './pages/Login';
import AuthenticatedRoutes from './AuthenticatedRoutes';
// import AdminRoutes from './AdminRoutes';
import Signup from './pages/Signup';
import Home from './pages/Home';
import AppShell from './AppShell';
import AuthenticatedNavBar from './AuthenticatedNavBar';
import AddTransaction from './pages/AddTransaction';
const Overview = lazy(() => import('./pages/Overview'));
const Transactions = lazy(() => import('./pages/Transactions'));
const AddAccount = lazy(() => import('./pages/AddAccount'));
const Trends = lazy(() => import('./pages/Trends'));
const Goals = lazy(() => import('./pages/Goals'));
const WaysToSave = lazy(() => import('./pages/WaysToSave'));
const Budgets = lazy(() => import('./pages/Budgets.js'));
const Settings = lazy(() => import('./pages/Settings.js'));
const Profile = lazy(() => import('./pages/Profile.js'));

const LoadingFallback = () => (
  <AppShell>
    <div className='p-4'>Loading...</div>
  </AppShell>
);
const UnauthenticatedRoutes = () => (
  <Switch>
    <Route exact path='/login'>
      <Login />
    </Route>
    <Route exact path='/signup'>
      <Signup />
    </Route>
    <Route exact path='/'>
      <Home />
    </Route>
  </Switch>
);

const AppRoutes = () => (
  <React.Fragment>
    <AuthenticatedNavBar />
    <Suspense fallback={<LoadingFallback />}>
      <Switch>
        <AuthenticatedRoutes path='/overview'>
          <Overview />
        </AuthenticatedRoutes>
        <AuthenticatedRoutes path='/transactions'>
          <Transactions />
        </AuthenticatedRoutes>
        <AuthenticatedRoutes path='/goals'>
          <Goals />
        </AuthenticatedRoutes>
        <AuthenticatedRoutes path='/addTransactions'>
          <AddTransaction />
        </AuthenticatedRoutes>
        <AuthenticatedRoutes path='/budgets'>
          <Budgets />
        </AuthenticatedRoutes>
        <AuthenticatedRoutes path='/trends'>
          <Trends />
        </AuthenticatedRoutes>
        <AuthenticatedRoutes path='/waystosave'>
          <WaysToSave />
        </AuthenticatedRoutes>
        <AuthenticatedRoutes path='/accounts'>
          <AddAccount />
        </AuthenticatedRoutes>
        <AuthenticatedRoutes path='/settings'>
          <Settings />
        </AuthenticatedRoutes>
        <AuthenticatedRoutes path='/profile'>
          <Profile />
        </AuthenticatedRoutes>
        <AuthenticatedRoutes path='/tour'>
          <Profile />
        </AuthenticatedRoutes>

        <UnauthenticatedRoutes />
      </Switch>
    </Suspense>
  </React.Fragment>
);

function App() {
  return (
    <Router>
      <Provider store={store}>
        <AppRoutes />
      </Provider>
    </Router>
  );
}

export default App;

My app works perfectly fine locally.

Also last night when my app was working perfectly fine on my machine that has Heroku CLI installed, I tested it on a couple phones and another computer and I got this same authentication error.

Any help would be appreciated!