Unauthorized error when connecting to backend server

[gaaaku]

What happened?

Assumption, I am running spa_react_javascript_hello-world and api_spring_java_hello-world in a local environment.

The situation is as follows.

• Login succeeds. (Authentication by redirecting to Auth0)
• After login, user information is displayed correctly in the profile tab.
• After login, user information is not displayed in the Admin tab.
• When I look at the developer tools, error 401 is returned from the A app (I have configured Auth0 with reference to 00). Also, if you check the request header to A app, the authentication token is not set.

What did you expect to happen?

I expect the message will display correctly (Correct message is "This is an admin message.") in the Admin tab.

Anything else we need to know?

When I successfully authenticated Auth0 with another of my own apps, I stored the token information in the header.

export const getHero = (token: string): Promise<AxiosResponse<Hero>> => {
    return axios.get('/api/private/hero', {
        headers: {
            Authorization: `Bearer ${token}`
        }
    });
};

I guess it may be necessary to retrieve the token and store it in the header in a React app like this.

[gaaaku]

The following fixes solved the problem. Would you like to include these fixes in this repository?

• Specify audience as the argument of Auth0Provider in file auth0-provider-with-navigate.js
• Add an Authorization header to the request in file message.service.js. The header contains the access token obtained from Auth0.