Deploy React page with Auth0 to Heroku not working-CodePudding

this is my first ever post to StackOverflow. Thank you for the amazing community. I want to ask about how to deploy Auth0 to Heroku.

The normal behavior on my "HTTP://localhost:3000" it would redirect to the Auth0 login page and when users succeed in logging in, it would redirect back to the page. My React App with Auth0 works very normally in localhost, however, when it is on Heroku, it said: "No Authentication Token found". It shows as followed:

[heroku message][1] [1]: https://i.stack.imgur.com/CDO3O.png

I have tried the Auth0 tutorial using this link: https://auth0.com/docs/quickstart/spa/react/01-login, however, it only works on localhost only even though I added the Auth0 addons in Heroku and SSO integration of Heroku in Auth0.

Code in my React app:

import React from "react";
import { useHistory } from "react-router-dom";
import { Auth0Provider } from "@auth0/auth0-react";
require('dotenv').config()

const Auth0ProviderWithHistory = ({ children }) => {
  const domain = process.env.REACT_APP_AUTH0_DOMAIN
  const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID

  const history = useHistory()

  const onRedirectCallback = (appState) => {
    history.push(appState?.returnTo || window.location.pathname)
  }

  return (
    <Auth0Provider
      domain={domain}
      clientId={clientId}
      redirectUri={window.location.origin}
      onRedirectCallback={onRedirectCallback}
      audience={process.env.REACT_APP_AUTH0_AUDIENCE}
      scope={process.env.REACT_APP_AUTH0_SCOPE}
      useRefreshTokens={true}
    >
      {children}
    </Auth0Provider>
  )
}

export default Auth0ProviderWithHistory

In my Express server:

const jwt = require('express-jwt')
const jwks = require('jwks-rsa')

var jwtCheck = jwt({
    secret: jwks.expressJwtSecret({
        cache: true,
        rateLimit: true,
        jwksRequestsPerMinute: 5,
        jwksUri: process.env.JWKS_URI
  }),
  audience: process.env.JWT_AUDIENCE,
  issuer: process.env.JWT_ISSUER,
  algorithms: ['RS256']
})

app.use(jwtCheck)

for production mode hosted to Heroku:

// Production mode: Heroku
if (process.env.NODE_ENV === "production"){
    app.use(express.static(path.join(__dirname,"client", "build")))

    app.get("*", (req, res) => {
        res.sendFile(path.join(__dirname,"client", "build", "index.html"));
    })
}

A normal API using JWTcheck would be:

router.route('/delete/:id').delete(jwtCheck,async (req, res) => {
    await Queue.findByIdAndDelete(req.params.id).exec((err, inventory) => {
        if (err) return (err)
        const response = {
            message: "Successfully deleted",
            id: req.params.id
        }
        return res.status(200).send(response)
    })
})

Can someone please help :(

Thank you very much.

CodePudding user response：

The solution is to remove this from server.js as jwtCheck function is to protect API with user session key, therefore, include this in server.js for GET request without the session key would display the error as above. Only use jwtCheck above for API protection only. Don't make my stupid mistake.