Reactjs – Why does a 401 Unauthorized error occur when an authorization token with a valid signature is read and passed?

I feel like I've discovered fire, but here is the A-Z solution for a secure request from an Axios request in React to a Spring Boot API, using a JWT Token.

For context, this is done with Spring Boot 3, Java 17 and Spring Security 6.

This is the starting point with the Axios request:

//code

     getInfoForUser(username) {
    
    try {
        
        console.log("Username at Axios is, ", username)
        
        console.log("User token at getInfoForUser is: ", localStorage.getItem('userToken'))
        
        return axios.post("http://myserver:8080/myapp/login/get-info-for-user", {params: {
                username: username
            }}, {
            headers: {
              'Content-Type':'application/json; charset=UTF-8',
                  'Authorization': `${localStorage.getItem("userToken")}`,
              'Accept': 'application/json'
            }}
            )
        
        
    } catch (error) {
        
        console.log("Error is, ", error)
    }
}

The problem here was that the headers component was inside the params component. The concept is that the POST request has URL, PAYLOAD, HEADERS as the basic structure of the request. The issue here was one of a literal bracket to make the headers section its own.

The endpoint that the request hits. No changes here:

// code
    @PreAuthorize("hasRole('ROLE_USER')")
    @PostMapping("/get-info-for-user")
    public Object[] getInfoForUser(@Param("username") String username) {
        
        return userService.getInfoForUser(username);
    }

The API infrastructure that handles the request:

The JwtTokenProviderService:

// code

    package com.example.demo.service;
    import java.security.Key;
    import java.util.Date;
    import java.util.UUID;
    import java.util.function.Function;
    
    import javax.crypto.spec.SecretKeySpec;
    
    import org.springframework.beans.factory.annotation.Value;
    import org.springframework.security.core.GrantedAuthority;
    import org.springframework.security.core.authority.SimpleGrantedAuthority;
    import org.springframework.stereotype.Service;
    
    import io.jsonwebtoken.Claims;
    import io.jsonwebtoken.Jws;
    import io.jsonwebtoken.Jwts;
    import io.jsonwebtoken.SignatureAlgorithm;
    import jakarta.xml.bind.DatatypeConverter;
    
    @Service
    public class JwTTokenProviderService {
        
        @Value("${jwt.secret}")
        private String JWT_SECRET_KEY;
        
        Key signingKey;
        
        
        //@SuppressWarnings("deprecation")
        public String generateToken(String username, String role) {
            
            //The JWT signature algorithm we will be using to sign the token
            SignatureAlgorithm signatureAlgorithm = SignatureAlgorithm.HS256;
            
            //String jwtSecret = "8+OlDAXEcPWuhuW0QBzzpQegFZdzcs9Hw1bk8EUm9tL3CorUI4gxJlSVI8lexUtqyREhC3khQeOXsdOFSnNksg==";
            
            //SecretKey key =  Keys.secretKeyFor(SignatureAlgorithm.HS256);
            //String strKey = key.toString();
            
            //byte[] arrSecret = DatatypeConverter.parseBase64Binary(strKey);
            Key signingKey = new SecretKeySpec(DatatypeConverter.parseBase64Binary(JWT_SECRET_KEY), signatureAlgorithm.getJcaName());
            int jwtExpirationInMs = 3600000;
            
            
            System.out.println("Username at generating token is " + username);
            System.out.println("Role at generating token is " + role);
            
            return Jwts.builder()
                    .setId(UUID.randomUUID().toString())
                    .setSubject("Me")
                    .claim("hasRole", role)
                    .claim("username",  username)
                    .setIssuedAt(new Date())
                    .setExpiration(new Date(System.currentTimeMillis() + jwtExpirationInMs))
                    .signWith(signingKey, signatureAlgorithm)
                    .compact();
            
        }
        
        public Claims getAllClaimsFromToken(String token) {
            
            System.out.println("Token at getAllClaimsFromToken is " + token);
            
            
            //String jwtSecret = "8+OlDAXEcPWuhuW0QBzzpQegFZdzcs9Hw1bk8EUm9tL3CorUI4gxJlSVI8lexUtqyREhC3khQeOXsdOFSnNksg==";
            
            try {
                
                byte[] arrSecret = DatatypeConverter.parseBase64Binary(JWT_SECRET_KEY);
                signingKey = new SecretKeySpec(arrSecret, SignatureAlgorithm.HS256.getJcaName());
                 Jws<Claims> jwsClaims = Jwts.parser()
                         .setSigningKey(signingKey)
                         .parseClaimsJws(token);
    
                        Claims claims = jwsClaims.getBody();
                        
                        //String role = claims.get("hasRole", String.class);
                        //GrantedAuthority authority = new SimpleGrantedAuthority(role);
                        return  claims;
            
            } catch (Exception e) {
                System.out.println("Could not get all claims TOken from passed token");
                System.out.println("Exception is " + e);
                return null;
            }
            
            
        }
        
        public boolean validateToken(String token) {
            
            try {
                Jwts.parser().setSigningKey(signingKey).parseClaimsJws(token);
                return true;
            } catch (Exception e) {
                System.out.println("Errir is " + e);
                
            }
            return false;
        }
        
        public String getUsernameFromToken(String token) {
            return getClaimFromToken(token, claims -> claims.get("username", String.class));
        }
        
        public String getRoleFromToken(String token) {
            return getClaimFromToken(token, claims -> claims.get("hasRole", String.class));
        }
        
        private <T> T getClaimFromToken(String token, Function<Claims, T> claimsResolver) {
        final Claims claims = getAllClaimsFromToken(token);
            return claimsResolver.apply(claims);
        }
    
    }

In this file, the API generates a token and has methods to extract all information from it, validate it, or get the username and password separately. It is effectively the class to create and manipulate the token; you also have options on how to build it.

This is the JwtTokenFilter file, which will accept the incoming request from the endpoint and deconstruct the token to extract the relevant tokens and roles; note that it uses the methods specified in the above JwtTokenProviderService file:

// code

package com.example.demo;

import java.io.IOException;
import java.util.Collections;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
import org.springframework.security.core.Authentication;
import org.springframework.security.core.authority.SimpleGrantedAuthority;
import org.springframework.security.core.context.SecurityContextHolder;
import org.springframework.stereotype.Component;
import org.springframework.web.filter.OncePerRequestFilter;

import com.example.demo.service.JwTTokenProviderService;

import jakarta.servlet.Filter;
import jakarta.servlet.FilterChain;
import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

@Component
public class JwtTokenFilter extends OncePerRequestFilter implements Filter {

    private JwTTokenProviderService jwtTokenService;
    
    @Autowired
    public void JwtRequestFilter(JwTTokenProviderService jwtTokenService) {
        this.jwtTokenService = jwtTokenService;
    }

    @Override
    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain)
            throws ServletException, IOException {
        
        System.out.println("JwtFilter hit for request: " + request.getRequestURI());
        System.out.println("REquest.getHeader.getFilterName being received is " + request.getHeader("Authorization"));
        System.out.println("Request.BASIC_AUTH hit for request: " + request.BASIC_AUTH);
        System.out.println("Request.BASIC_AUTH hit for request: " + request.CLIENT_CERT_AUTH);
        System.out.println("Request.BASIC_AUTH hit for request: " + request.DIGEST_AUTH);
        System.out.println("Request.BASIC_AUTH hit for request: " + request.FORM_AUTH);
        System.out.println("Request.BASIC_AUTH hit for request: " + request.getAttributeNames());
        
        String token = resolveToken(request);
        
        if (token != null && jwtTokenService.validateToken(token)) {
            
            Authentication auth = getAuthentication(token);
            SecurityContextHolder.getContext().setAuthentication(auth);
        }
        
        filterChain.doFilter(request, response);
    }
    
    private Authentication getAuthentication(String token) {
        
        System.out.println("Token at authentication for secured endpoint is: " + token);
        
        String username = jwtTokenService.getUsernameFromToken(token);
        String role = jwtTokenService.getRoleFromToken(token);
        
        System.out.println("Retrieved data for token is: " + username + " " + role);
        SimpleGrantedAuthority authority = new SimpleGrantedAuthority(role);
        return new UsernamePasswordAuthenticationToken(username, "", Collections.singletonList(authority));
    }
    
    private String resolveToken(HttpServletRequest req) {
        String bearerToken = req.getHeader("Authorization");
        if (bearerToken != null && bearerToken.startsWith("Bearer " )) {
            return bearerToken.substring(7);
        }
        return null;
    }
    

}

Important to note here - have the @Component annotation on top of your code. The rest of the methods use boolean criteria to determine the validity of the token, based on the fact it's not blank and uses the "Bearer " prefix, before extracting the relevant content.

This is the JwtResponse model that build the JwtResponse object. It is what it used to create the value of the token, which can happen at the login process, for example and again, these attributes are filled in the token creation method in the JwtTokenProviderService file:

// code

package com.example.demo.model;

import java.util.List;

import io.jsonwebtoken.Claims;

public class JwtResponse {
    
    private String token;
    private String type = "Bearer ";

    private String username;
    private String role;
    
    public String getToken() {
        return token;
    }
    public void setToken(String token) {
        this.token = token;
    }
    public String getType() {
        return type;
    }
    public void setType(String type) {
        this.type = type;
    }
    public String getUsername() {
        return username;
    }
    public void setUsername(String username) {
        this.username = username;
    }
    public String getRole() {
        return role;
    }
    public void setRole(String role) {
        this.role = role;
    }
    

    public JwtResponse(String token, String username, String role, Claims role2) {
        super();
        this.token = token;
        this.username = username;
        this.role = role;
    }
    
    
    
    public JwtResponse(String token, String type, String username, String role) {
        super();
        this.token = token;
        this.type = type;
        this.username = username;
        this.role = role;
    }


    
}

This is just a standard getter and setter file for the JwtResponse using basic data types.

This is the WebSecurityConfig file:

// code

package com.example.demo;

import java.util.Arrays;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.Customizer;
import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
import org.springframework.security.config.annotation.method.configuration.EnableMethodSecurity;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configurers.AbstractHttpConfigurer;
import org.springframework.security.config.http.SessionCreationPolicy;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.security.crypto.password.PasswordEncoder;
import org.springframework.security.web.SecurityFilterChain;
import org.springframework.security.web.authentication.UsernamePasswordAuthenticationFilter;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.CorsConfigurationSource;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;

import com.example.demo.service.CustomUserDetailsService;

//@ComponentScan(basePackages = "come.example.demo")
@Configuration(proxyBeanMethods = false)
@EnableWebSecurity
@EnableMethodSecurity(prePostEnabled = true)
public class WebSecurityConfig {
    
  @Autowired
  private CustomUserDetailsService customUserDetailsService;
  
  @Autowired
  private JwtTokenFilter JwtTokenFilter;
  
  @Bean
  SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {

    //XorCsrfTokenRequestAttributeHandler xor = new XorCsrfTokenRequestAttributeHandler();
    //String hasIpAddress = "127.0.0.1";
      
      

    return http
      .cors(cors -> cors.disable())
      .csrf(AbstractHttpConfigurer::disable)
      .sessionManagement((session) ->
        session.sessionCreationPolicy(SessionCreationPolicy.STATELESS)
      )
      .authorizeHttpRequests(authorize -> {
          authorize
          .requestMatchers("/myapp/**").permitAll()
          .requestMatchers("/public/**").permitAll()
          .requestMatchers("/login/**").permitAll()
          .anyRequest().permitAll();
        }
      )
      .addFilterBefore(JwtTokenFilter, UsernamePasswordAuthenticationFilter.class)
      .httpBasic(Customizer.withDefaults())
      .build();

  }

Ensure that you've added this line to your configuration:

.addFilterBefore(JwtTokenFilter, UsernamePasswordAuthenticationFilter.class) 

This ensures that the request hits the jwtFilter when it is submitted.

You also don't necessarily need a @Bean configuration for the jwtFilter, but it is an option you also have in the configuration of the application.

In the main file of your Spring Boot Application:

// code

package com.example.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.autoconfigure.security.servlet.SecurityAutoConfiguration;
import org.springframework.boot.web.servlet.support.SpringBootServletInitializer;
import org.springframework.session.jdbc.config.annotation.web.http.EnableJdbcHttpSession;

@SpringBootApplication//(exclude = { SecurityAutoConfiguration.class })
@EnableJdbcHttpSession(maxInactiveIntervalInSeconds = 1800)
public class Backend3Application extends SpringBootServletInitializer {

    public static void main(String[] args) {
        SpringApplication.run(Backend3Application.class, args);
    }

}

Ensure that this line:

(exclude = { SecurityAutoConfiguration.class })

is commented out to not prevent Spring Security from working, or just not included at all.

Last but not least, the dependencies used have not changed:

// code
        <dependency>
            <groupId>io.jsonwebtoken</groupId>
            <artifactId>jjwt-api</artifactId>
            <version>0.11.5</version>
        </dependency>
        <dependency>
            <groupId>io.jsonwebtoken</groupId>
            <artifactId>jjwt-impl</artifactId>
            <version>0.11.5</version>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>io.jsonwebtoken</groupId>
            <artifactId>jjwt-jackson</artifactId>
            <version>0.11.5</version>
            <scope>runtime</scope>
        </dependency>

That's it. Hopefully it helps someone.