Have a SPA react application and backend api springboot

I have a React app application on authO and an API having a permission of read:message.
Now I had successfully configured the SPA and backend spring boot application. Springboot is configured as backend api app with the audience key from the SPA application. Now i can access the endpoints that does not need any permission but when i hit the endpoint that needs the permission it says 403 forbidden error

frontend code

const {
    user,
    isAuthenticated,
    loginWithRedirect,
    logout,
    getIdTokenClaims,
    getAccessTokenSilently,
  } = useAuth0();

const getToken = async () => {
    if (isAuthenticated) {
      try {
        // Get the ID token claims, which include the access token
        const idTokenClaims = await getIdTokenClaims();
        const accessToken = idTokenClaims.__raw; // The access token

        console.log(accessToken);
       

        const response = await fetch(
          "http://localhost:3010/api/private-scoped",
          {
            headers: {
              Authorization: `Bearer ${token}`,
            },
          }
        );
        console.log(response);
        const data = await response.json();
        console.log(data);
        // Handle the API response
      } catch (error) {
        console.log(error);
        // Handle errors
      }
    }
  };

backend scurity code:

 @Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        http.authorizeRequests()
                .mvcMatchers("/api/public").permitAll()
                .mvcMatchers("/api/private").authenticated()
                .mvcMatchers("/api/private-scoped").hasAuthority("SCOPE_read:messages")
                .and().cors()
                .and().oauth2ResourceServer().jwt();
        return http.build();
    }

remember the endpoint /api/private is giving 200 so no configuration error.

Hi @TalhaRizwan093,

Welcome to the Auth0 Community!

This line could be the problem:

const accessToken = idTokenClaims.__raw;

The Access token and ID token are different. This quickstart shows how to get the access token and use it to call your API: Auth0 React SDK Quickstarts: Call an API

2 Likes

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.