0

I managed to run the backend following the steps described in this link: NestJS Code Sample: API Role-Based Access Control

I managed as well to run the frontend following the steps described in this other link: React Router 6/TypeScript Code Sample: Basic Authentication

However whenever I try to retrieve content from both pages protected or admin I get Unauthorized, even though I am getting a JWT token with getAccessTokenSilently right before sending the request. When I check the API call in the bakend I cannot see any signal from Bearer tokens.

Here goes a piece of the react code that I use to access the protected endpoint:

  useEffect(() => {
    let isMounted = true;
    let token: string
    (async () => {
      token = await getAccessTokenSilently()
      console.log(token)
      const getMessage = async () => {
        const { data, error } = await getAdminResource(token);

        if (!isMounted) {
          return;
        }

        if (data) {
          setMessage(JSON.stringify(data, null, 2));
        }

        if (error) {
          setMessage(JSON.stringify(error, null, 2));
        }
      };
      getMessage();

    })()
    return () => {
      isMounted = false;
    };
  }, []);

What am I doing wrong?

Edit

export const getAdminResource = async (token: string): Promise<ApiResponse> => {
  const config: AxiosRequestConfig = {
    url: 'http://localhost:3030/api/messages/admin',
    method: "GET",
    headers: {
      "content-type": "application/json",
      "Authorization": `Bearer ${token}`
    },
  };
2
  • can you share your getAdminResource function? Commented Nov 3, 2024 at 0:55
  • @unhackit, I edit my question to share that function as well Commented Nov 3, 2024 at 0:59

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.