Forem: Miguel Barbosa

Authentication and authorization with Spring-Boot

Miguel Barbosa — Fri, 24 Nov 2023 20:41:12 +0000

In the vast world of web development, authentication is the guardian of every digital realm. In this tutorial we'll see how to protect, authenticate and authorize the users of a Spring-Boot application in a native way and following the good practices of the framework.

We'll be using the following technologies:

Java 17
Spring-boot 3.1.5
jwt
hibernate/jpa
postgresql
lombok

Source code used in this tutorial

Summary

First steps
User entity and repository
Token provider
Security filter
Auth configuration
Auth DTOs
Auth service
Auth controller
Testing the authentication

First steps

To protect our application we'll need two dependencies in our pom.xml, the first is the native spring security package, the other one will help us to create and validate our jwt tokens.

//pom.xml
<dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-security</artifactId>
</dependency>

<dependency>
   <groupId>com.auth0</groupId>
   <artifactId>java-jwt</artifactId>
   <version>4.4.0</version>
</dependency>

User entity and repository

First we'll need a enum to represent the user roles, this will help us to define the permissions of each user in our application.

// enums/UserRole.java
public enum UserRole {
  ADMIN("admin"),
  USER("user");

  private String role;

  UserRole(String role) {
    this.role = role;
  }

  public String getValue() {
    return role;
  }
}

In the enum we have two representative roles: ADMIN and USER, the ADMIN role will have access to all the endpoints of our application, while the USER role will only have access to specific endpoints.

The user entity will be the core of our authentication system, it will hold the user's credentials and the roles that the user has. We'll be implementing the UserDetails interface to represent our user entity, this interface is provided by the spring security package and it's the recommended way to represent the user entity in a spring-boot application.

// entities/UserEntity.java
@Table()
@Entity(name = "users")
@Getter
@NoArgsConstructor
@AllArgsConstructor
@EqualsAndHashCode(of = "id")
public class User implements UserDetails {

  @Id
  @GeneratedValue(strategy = GenerationType.IDENTITY)
  private Long id;

  private String login;

  private String password;

  @Enumerated(EnumType.STRING)
  private UserRole role;

  public User(String login, String password, UserRole role) {
    this.login = login;
    this.password = password;
    this.role = role;
  }

  @Override
  public Collection<? extends GrantedAuthority> getAuthorities() {
    if (this.role == UserRole.ADMIN) {
      return List.of(new SimpleGrantedAuthority("ROLE_ADMIN"), new SimpleGrantedAuthority("ROLE_USER"));
    }
    return List.of(new SimpleGrantedAuthority("ROLE_USER"));
  }

  @Override
  public String getUsername() {
    return login;
  }

  @Override
  public boolean isAccountNonExpired() {
    return true;
  }

  @Override
  public boolean isAccountNonLocked() {
    return true;
  }

  @Override
  public boolean isCredentialsNonExpired() {
    return true;
  }

  @Override
  public boolean isEnabled() {
    return true;
  }
}

It has a lot of methods that we can override to customize the authentication process, you can implement those properties in the database too but for now we'll only use the required to make our authentication system work: id, username, password and role.

For the user repository we have the following code:

// repositories/UserRepository.java
public interface UserRepository extends JpaRepository<User, Long> {
  UserDetails findByLogin(String login);
}

Extending the JpaRepository we'll have access to a lot of methods to manipulate our users in the database. In addition, the findByLogin method will be used by the spring security to find the user in the database and validate the credentials.

Token provider

We need to define a secret key to sign our tokens, this key will be used to validate and to generate the token signature. We'll be using the @Value annotation to get the secret key from the application.yml file. And in the application.yml file we'll define the secret key as an environment variable, this will help us to keep the secret key safe and out of the source code.

//.env
JWT_SECRET="yoursecret"

In our application.yml:

// resources/application.yml
security:
  jwt:
    token:
      secret-key: ${JWT_SECRET}

To the spring-boot application read the environment variables we need declare the PropertySource annotation in our main class indicating where is the .env file located. In our case it's located in the root of the project, so we'll use the user.dir variable to get the project root path. The main class will look like this:

@SpringBootApplication
@PropertySource("file:${user.dir}/.env")
public class SpringAuthApplication {
    public static void main(String[] args) {
        SpringApplication.run(SpringAuthApplication.class, args);
    }
}

Finally we can define our token provider class, this class will be responsible to generate and validate our tokens.

// config/auth/TokenProvider.java
@Service
public class TokenProvider {
  @Value("${security.jwt.token.secret-key}")
  private String JWT_SECRET;

  public String generateAccessToken(User user) {
    try {
      Algorithm algorithm = Algorithm.HMAC256(JWT_SECRET);
      return JWT.create()
          .withSubject(user.getUsername())
          .withClaim("username", user.getUsername())
          .withExpiresAt(genAccessExpirationDate())
          .sign(algorithm);
    } catch (JWTCreationException exception) {
      throw new JWTCreationException("Error while generating token", exception);
    }
  }

  public String validateToken(String token) {
    try {
      Algorithm algorithm = Algorithm.HMAC256(JWT_SECRET);
      return JWT.require(algorithm)
          .build()
          .verify(token)
          .getSubject();
    } catch (JWTVerificationException exception) {
      throw new JWTVerificationException("Error while validating token", exception);
    }
  }

  private Instant genAccessExpirationDate() {
    return LocalDateTime.now().plusHours(2).toInstant(ZoneOffset.of("-03:00"));
  }
}

In the generateAccessToken we define an algorithm to sign our token, the subject of the token and the expiration date and return a new token. In the validateToken method we validate the token signature and return the subject of the token.

Security filter

Then we need to define a filter to intercept the requests and validate the token. We'll be extending the OncePerRequestFilter spring security class to intercept the requests and validate the token.

// config/auth/SecurityFilter.java
@Component
public class SecurityFilter extends OncePerRequestFilter {
  @Autowired
  TokenProvider tokenService;
  @Autowired
  UserRepository userRepository;

  @Override
  protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain)
      throws ServletException, IOException {
    var token = this.recoverToken(request);
    if (token != null) {
      var login = tokenService.validateToken(token);
      var user = userRepository.findByLogin(login);
      var authentication = new UsernamePasswordAuthenticationToken(user, null, user.getAuthorities());
      SecurityContextHolder.getContext().setAuthentication(authentication);
    }
    filterChain.doFilter(request, response);
  }

  private String recoverToken(HttpServletRequest request) {
    var authHeader = request.getHeader("Authorization");
    if (authHeader == null)
      return null;
    return authHeader.replace("Bearer ", "");
  }
}

In the doFilterInternal method we recover the token from the request, remove the "Bearer" from the string using the recoverToken helper method, validate the token and set the authentication in the SecurityContextHolder. The SecurityContextHolder is a spring security class that holds the authentication of the current request, so we can access the user information in the controllers.

Auth configuration

Here we need to define some more necessary methods to make our authentication system work. At the top we have the Configuration and @EnableWebSecurity annotation to enable the web security in our application. Then we define the SecurityFilterChain bean to define the endpoints that will be protected by our authentication system.

// config/AuthConfig.java
@Configuration
@EnableWebSecurity
public class AuthConfig {
  @Autowired
  SecurityFilter securityFilter;

  @Bean
  SecurityFilterChain securityFilterChain(HttpSecurity httpSecurity) throws Exception {
    return httpSecurity
        .csrf(csrf -> csrf.disable())
        .sessionManagement(session -> session.sessionCreationPolicy(SessionCreationPolicy.STATELESS))
        .authorizeHttpRequests(authorize -> authorize
            .requestMatchers(HttpMethod.POST, "/api/v1/auth/*").permitAll()
            .requestMatchers(HttpMethod.POST, "/api/v1/books").hasRole("ADMIN")
            .anyRequest().authenticated())
        .addFilterBefore(securityFilter, UsernamePasswordAuthenticationFilter.class)
        .build();
  }

  @Bean
  AuthenticationManager authenticationManager(AuthenticationConfiguration authenticationConfiguration)
      throws Exception {
    return authenticationConfiguration.getAuthenticationManager();
  }

  @Bean
  PasswordEncoder passwordEncoder() {
    return new BCryptPasswordEncoder();
  }
}

In the authorizeHttpRequests method we define the endpoints that will be protected and the roles that will have access to each endpoint. In our case the /api/v1/auth/* endpoints will be public, the /api/v1/books endpoint will be protected and only the users with the ADMIN role will have access to it. The others endpoints will be protected and only the authenticated users will have access to it.

In the addFilterBefore method we define the filter that we created before. And finally we define the AuthenticationManager and the PasswordEncoder beans that is necessary to make the authentication system work.

Auth DTOs

We'll need two DTOs to receive the user credentials, and another DTO to return the token when the user sign in.

// dtos/SignUpDto.java
public record SignUpDto(
    String login,
    String password,
    UserRole role) {
}

// dtos/SignInDto.java
public record SignInDto(
    String login,
    String password) {
}

// dtos/JwtDto.java
public record JwtDto(
    String accessToken) {
}

Auth service

Here we define the service implementing UserDetailsService that will be responsible to create the users and save them in the database or load the user information by the username.

// services/AuthService.java
@Service
public class AuthService implements UserDetailsService {

  @Autowired
  UserRepository repository;

  @Override
  public UserDetails loadUserByUsername(String username) {
    var user = repository.findByLogin(username);
    return user;
  }

  public UserDetails signUp(SignUpDto data) throws InvalidJwtException {
    if (repository.findByLogin(data.login()) != null) {
      throw new InvalidJwtException("Username already exists");
    }
    String encryptedPassword = new BCryptPasswordEncoder().encode(data.password());
    User newUser = new User(data.login(), encryptedPassword, data.role());
    return repository.save(newUser);
  }
}

In the signUp method we check if the username is already registered then encrypt the password using the BCryptPasswordEncoder and save the user information.

Auth controller

And finally we define the auth controller. It will be responsible to receive the request, authenticate the users and generate the tokens.

// controllers/AuthController.java
@RestController
@RequestMapping("/api/v1/auth")
public class AuthController {
  @Autowired
  private AuthenticationManager authenticationManager;
  @Autowired
  private AuthService service;
  @Autowired
  private TokenProvider tokenService;

  @PostMapping("/signup")
  public ResponseEntity<?> signUp(@RequestBody @Valid SignUpDto data) {
    service.signUp(data);
    return ResponseEntity.status(HttpStatus.CREATED).build();
  }

  @PostMapping("/signin")
  public ResponseEntity<JwtDto> signIn(@RequestBody @Valid SignInDto data) {
    var usernamePassword = new UsernamePasswordAuthenticationToken(data.login(), data.password());
    var authUser = authenticationManager.authenticate(usernamePassword);
    var accessToken = tokenService.generateAccessToken((User) authUser.getPrincipal());
    return ResponseEntity.ok(new JwtDto(accessToken));
  }
}

In the signUp method we receive the user data, create a new user and save it in the database. In the signIn method we receive the user credentials, authenticate the user using the AuthenticationManager, and generate the token.

Testing the authentication

To create a new user we send a POST request to the /api/v1/auth/signup endpoint with a body containing the login, password and one of the roles available (USER or ADMIN):

{
  "login": "myusername",
  "password": "123456",
  "role": "USER"
}

To retrieve an authentication token we send a POST request with this user login and password to the /api/v1/auth/signin endpoint.

To test our authentication system we'll create a simple book controller with two endpoints, one to create a new book and another one to list all the books.

@RestController
@RequestMapping("/api/v1/books")
public class BookController {

  @GetMapping
  public ResponseEntity<List<String>> findAll() {
    return ResponseEntity.ok(List.of("Book1", "Book2", "Book3"));
  }

  @PostMapping
  public ResponseEntity<String> create(@RequestBody String data) {
    return ResponseEntity.ok(data);
  }
}

In the /api/v1/books endpoint the GET method will be available for the users with USER role, and the POST method will be protected and only the users with the ADMIN role will be able to create a book.

Phew! That was a lot of information and coding, but I hope you enjoyed it and learned something new! If you have any questions or suggestions, feel free to send me a message on Twitter/X.

Thanks for reading!

Como tratar erros http no Spring Boot

Miguel Barbosa — Mon, 30 Oct 2023 21:20:59 +0000

Tratamento de erros, independente da linguagem, é sempre uma questão complicada. Mas quando se trata de Spring, existe um padrão recomendado e nativo para lidar com exceções sem muita dor de cabeça.

Este tutorial utiliza Java 17 e Spring boot 3.1.5.
Código completo usado como exemplo.

Sumário

A situação
O problema
Filtro global de exceções
Receptando e tratando erros de validação
Tratando outros tipos de erro

A situação

Temos uma aplicação onde estamos usando a biblioteca de validação padrão do Spring:

<dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-validation</artifactId>
</dependency>

E validamos os campos do DTO da entidade Person:

@Data
public class PersonDto {
  @NotBlank(message = "name: Is required")
  @Length(min = 3, max = 100, message = "title: Must be of 3 - 100 characters")
  String name;

  @NotBlank(message = "email: Is required")
  @Email(message = "email: Invalid format")
  String email;

  @NotNull(message = "age: Is required")
  @Min(value = 1, message = "age: Must be greater than 0")
  @Max(value = 100, message = "age: Must be less than 100")
  Integer age;
}

Após definir nosso DTO, devemos utiliza-lo para representar o body do nosso controller e sempre nos atentarmos na utilização da annotation @Valid para considerar as checagens definidas acima:

@PostMapping
public ResponseEntity<Person> create(@RequestBody @Valid @NotNull PersonDto dto) {
  return ResponseEntity.status(HttpStatus.CREATED).body(personService.create(dto));
}

O problema

Quando enviamos uma requisição para criação de um person com valores inválidos, recebemos algo parecido com isso:

{
  "timestamp": "2023-10-27T00:03:21.577+00:00",
  "status": 400,
  "error": "Bad Request",
  "trace": "org.springframework.web.bind.MethodArgumentNotValidException: Validation failed for argument [0] in public org.springframework.http.ResponseEntity<com.m1guelsb.springexceptions.entities.Person> com.m1guelsb.springexceptions.controllers.PersonController.create(com.m1guelsb.springexceptions.dtos.PersonDto) with 3 errors: [Field error in object 'personDto' on field 'email': rejected value [example]; codes [Email.personDto.email,Email.email,Email.java.lang.String,Email]; arguments [org.springframework.context.support.DefaultMessageSourceResolvable: codes [...]"
}

A única informação legível é que o erro foi um 400 Bad request, além disso temos trace e message com valores nem um pouco descritivos. Não sabemos quais foram os campos incorretos, nem quais valores devem ser enviados.

Esse tipo de resposta, além de confundir os usuários de nossa API, também expõem as tecnologias que nosso back-end está usando. Podemos considerar isso como uma brecha de segurança já que toda tecnologia contém falhas.

É importante destacar a parte MethodArgumentNotValidException que indica qual o tipo de erro que estamos recebendo. Precisaremos desta informação adiante.

Filtro global de exceções

O Spring nos provê um jeito nativo para tratar exceções de modo global, o Controller Advice. Podemos usá-lo através da annotation @RestControllerAdvice.

Para isso é ideal criarmos uma classe onde centralizaremos nossos métodos de tratamento de erro e dentro dela teremos um método que irá nos ajudar a padronizar as nossas respostas de erro:

@RestControllerAdvice
public class GlobalExceptionHandler {

  private Map<String, List<String>> errorsMap(List<String> errors) {
    Map<String, List<String>> errorResponse = new HashMap<>();
    errorResponse.put("errors", errors);
    return errorResponse;
  }

}

O método errorsMap vai receber uma lista de String e retornar um Map que terá uma única chave contendo os valores da lista errors. A representação em JSON seria a seguinte:

{
  "errors": [
    //lista de erros
  ]
}

Receptando e tratando erros de validação

Agora finalmente escrevemos o método que irá de fato interceptar os erros e retornar os valores do jeito que queremos:

@RestControllerAdvice
public class GlobalExceptionHandler {

  @ExceptionHandler(MethodArgumentNotValidException.class)
  public ResponseEntity<Map<String, List<String>>> handleValidationErrors(MethodArgumentNotValidException ex) {

    List<String> errors = ex.getBindingResult()
        .getFieldErrors()
        .stream()
        .map(error -> error.getDefaultMessage())
        .toList();

    return ResponseEntity.status(HttpStatus.BAD_REQUEST).body(errorsMap(errors));
  }

  private Map<String, List<String>> errorsMap(List<String> errors) {
    Map<String, List<String>> errorResponse = new HashMap<>();
    errorResponse.put("errors", errors);
    return errorResponse;
  }
}

Usando a annotation @ExceptionHandler(), interceptamos as exceções do tipo MethodArgumentNotValidException que é exatamente o mesmo que vimos no trace da resposta anteriormente.

Entendendo o método `handleValidationErrors(MethodArgumentNotValidException ex)`:

Recebemos ex como parâmetro do tipo do nosso erro, iteramos em getFieldErrors() e em seguida, coletamos as mensagens de erro usando getDefaultMessage() para retornar uma lista com elas:

List<String> errors = ex.getBindingResult()
    .getFieldErrors()
    .stream()
    .map(error -> error.getDefaultMessage())
    .toList();

Então passamos nossa lista de erros para o errorsMap retornando dentro do body do ResponseEntity com o status de BAD_REQUEST:

return ResponseEntity.status(HttpStatus.BAD_REQUEST).body(errorsMap(errors));

Com isso, quando nosso client enviar dados incorretos:

{
  "name": "Mi",
  "email": "Invalid email",
  "age": 0
}

Terá a linda e cheirosa resposta:

{
  "errors": [
    "title: Must be of 3 - 100 characters",
    "age: Must be greater than 0",
    "email: Invalid format"
  ]
}

Meus caros leitores, isso aqui é o sonho de todo dev front-end! 🥰

Tratando outros tipos de erro

Seguindo o mesmo modelo, podemos criar outros métodos que lidarão com outros tipos de erro.

Outro erro muito comum de acontecer é o famoso 404 NOT_FOUND, para trata-lo podemos criar um método estendendo RuntimeException que irá nos ajudar a enviar uma mensagem personalizada para cada caso de NOT_FOUND que tivermos:

public class NotFoundException extends RuntimeException {
  public NotFoundException(String ex) {
    super(ex);
  }
}

E então, no nosso GlobalExceptionHandler adicionamos o seguinte método:

@ExceptionHandler(NotFoundException.class)
public ResponseEntity<Map<String, List<String>>> handleNotFoundException(NotFoundException ex) {
  List<String> errors = List.of(ex.getMessage());

  return ResponseEntity.status(HttpStatus.NOT_FOUND).body(errorsMap(errors));
}

As únicas diferenças para o método anterior são:

Trocamos o parâmetro classe do ExceptionHandler para agora lidar com a nossa classe NotFoundException
Agora coletamos a mensagem de erro criando uma lista contendo o seu valor: List.of(ex.getMessage()).

Não podemos esquecer de instanciar e retornar nossa classe sempre que um erro 404 pode ser disparado, como por exemplo o método findById do nosso PersonService:

public Person findById(Long id) throws NotFoundException {
  return personRepository.findById(id)
      .orElseThrow(() -> new NotFoundException("Person with id " + id + " not found"));
}

Dessa forma, quando nosso client tentar acessar um Person que não existe, ele receberá a mensagem que inserimos ao instanciar a classe:

{
  "errors": [
    "Person with id 999 not found"
  ]
}

E por último mas não menos importante, filtramos também os erros gerais dos tipos Exception e RuntimeException:

@ExceptionHandler(Exception.class)
public final ResponseEntity<Map<String, List<String>>> handleGeneralExceptions(Exception ex) {
  List<String> errors = List.of(ex.getMessage());

  return ResponseEntity
      .status(HttpStatus.INTERNAL_SERVER_ERROR)
      .body(errorsMap(errors));
}

@ExceptionHandler(RuntimeException.class)
public final ResponseEntity<Map<String, List<String>>> handleRuntimeExceptions(RuntimeException ex) {
  List<String> errors = List.of(ex.getMessage());

  return ResponseEntity
      .status(HttpStatus.INTERNAL_SERVER_ERROR)
      .body(errorsMap(errors));
}

Seguindo este padrão, podemos tratar qualquer tipo de erro e retornar sempre o mesmo padrão de mensagens. 🥳🎉

Por hoje é isso! Acha que faltou alguma informação importante ou descobriu algum bug? Sinta-se livre para me mandar uma mensagem no Twitter/X.

Obrigado pela leitura! 💝

Erros comuns de iniciantes em ReactJS

Miguel Barbosa — Wed, 18 Oct 2023 20:03:18 +0000

Ao longo de nosso tempo de estudo, percebemos que o React possui uma série de detalhes que nos pegam desprevenidos e ocasionam comportamentos inesperados ou erros não tão detalhados que acabam nos confundindo.

Dedico este artigo aos iniciantes em React que, assim como o meu eu do passado, perdeu um tempinho tentando resolver tais problemas. 😅

Sumário

A propriedade style no JSX
Acessar um valor que ainda não existe
Esquecer a propriedade key quando exibindo uma lista
Verificando se uma lista está vazia

A propriedade style no JSX

JSX foi construído para ser bem similar ao clássico HTML. Mas há algumas diferenças que, mesmo bem documentadas, acabamos esquecendo. Dentre essas, há o uso de className no lugar de class e a forma com que atribuímos o valor da propriedade style.

No HTML atribuímos os valores em uma string e escrevemos parecido com o CSS padrão:

<button style="height: 3rem; background-color: blue;">
  A really cool button
</button>

Já dentro do JSX, precisamos atribuir em formato de objeto javascript e usando camelCase para propriedades que contém nomes compostos.

Mas há uma pegadinha! 🧐

Em outras propriedades do JSX, geralmente atribuímos o valor entre um par de chaves:

return (
  <input placeholder={"My beautiful input"} />
)

Porém, quando se trata da propriedade style precisamos inserir mais um par de chaves para que consigamos atribuir os valores de nossos estilos:

return (
  <button style={{ height: "3rem", backgroundColor: "blue" }}>
    A really cool button
  </button>
)

Isso acontece porque o primeiro par de chaves serve para criar um expression slot, onde podemos atribuir qualquer expressão javascript como por exemplo um condicional ternário. O segundo par de chaves é um objeto javascript contendo os nossos estilos.

Acessar um valor que ainda não existe

Digamos que você possui um estado que guardará dados que serão providos por uma api, então tentará exibir valores da seguinte forma:

import React from 'react';

export const PokemonsList = () => {
  const [pokemons, setPokemons] = React.useState();

  React.useEffect(() => {
    fetch("https://pokeapi.co/api/v2/pokemon")
      .then((response) => response.json())
      .then((data) => setPokemons(data.results));
  }, [])

  return (
    <div>
      {pokemons.map((pokemon) => (
        <h2>{pokemon.name}</h2>
      ))}
    </div>
  );
}

E então, vemos o seguinte erro ao tentar iterar pokemons.map():

  Cannot read properties of undefined (reading 'map')

A requisição acontece de forma assíncrona, então em primeiro momento, a variável pokemons irá conter o valor que atribuímos ao iniciar o estado (que nesse caso deixamos vazio), ou seja: undefined.

Temos duas formas de resolver isso:

Iniciando o estado como um array vazio:

- const [pokemons, setPokemons] = React.useState();
+ const [pokemons, setPokemons] = React.useState([]);

Usando o optional chaining:

- {pokemons.map((pokemon) => ( 
+ {pokemons?.map((pokemon) => (

Inserir ?. antes de acessar um método ou uma propriedade de um objeto que ainda não existe, faz com que o javascript retorne undefined em vez de um erro.

Lembre-se de usar o optional chaining sempre que uma propriedade de um objeto pode ser null ou undefined! ☝🤓

Esquecer a propriedade key quando exibindo uma lista

Muitas vezes ao renderizar uma lista de itens usando .map, acabamos esquecendo um detalhe essencial para o React: a propriedade key.

  Warning: Each child in a list should have a unique "key" prop.

Quando renderizamos uma lista, precisamos dar um pouco mais de contexto para que o React consiga identificar cada item. E o valor da propriedade key deve ser único.
É comum vemos em alguns lugares o index da iteração sendo usado:

return (
  <div>
    {pokemons.map((pokemon, index) => (
      //usando index
      <h2 key={index}>{pokemon.name}</h2>
    ))}
  </div>
);

⚠️ Mas em alguns casos, isso é uma má ideia. ⚠️

O valor índex não está ligado a cada item específico da lista, mas sim a suas posições.

Em uma situação onde a ordem da lista mudará, o React perde a referência de cada um dos itens resultando em problemas de performance, renderização e até acessibilidade.

Para evitar tais problemas devemos atribuir um valor realmente único de cada item. Em nosso caso, onde estamos usando dados de uma api externa, é esperado que todo item tenha um id único:

return (
  <div>
    {pokemons.map((pokemon) => (
      //usando id
      <h2 key={pokemon.id}>{pokemon.name}</h2>
    ))}
  </div>
);

Mas em casos onde tal valor não existe, podemos criar o nosso próprio id único da seguinte maneira:

const pokemonsWithoutIds = fetch("/pokemons/without-ids")
  .then((response) => response.json())
  .then((data) => return data.results);

//criando uma nova lista
const pokemonsWithIds = pokemonsWithoutIds.map(item => {
  return {
    ...item,
    //atribuindo um id único para cada item
    id: crypto.randomUUID(),
  };
});

O método crypto.randomUUID é totalmente seguro de usar, já que possui suporte em todos navegadores atuais.

Este método retornará um valor parecido com 0bf9b4a4-6bb4-11ee-b962-0242ac120002, que é um universally unique identifier.

Verificando se uma lista está vazia

Digamos que nosso objetivo é mostrar condicionalmente uma lista somente quando ela não estiver vazia. É comum pensarmos da seguinte forma:

const [pokemons, setPokemons] = React.useState([]);

return (
  <div>
    {pokemons.length && <PokemonList pokemonsData={pokemons} />}
  </div>
);

Em nosso HTML veremos um simples 0. Isso ocorre porque diferente de outros valores falsy ("", false, null), o número 0 é válido dentro do JSX. Afinal, em algumas ocasiões queremos de fato exibi-lo.

Para termos o comportamento esperado podemos fazer uma verificação realmente válida checando se length é maior que 0: pokemons.length > 0 &&.
Ou usar um verificador ternário:

return (
  <div>
    {pokemons.length ? (
      <PokemonList pokemonsData={pokemons} />
    ) : null}
  </div>
);

Por hoje é só! 🫡
Acha que faltou algo que não citei?
Ficou com alguma dúvida?
Deixa nos comentários ou me manda uma mensagem no Twitter/X.

Obrigado pela leitura! <3

Forem: Miguel Barbosa

Authentication and authorization with Spring-Boot

Summary

First steps

User entity and repository

Token provider

Security filter

Auth configuration

Auth DTOs

Auth service

Auth controller

Testing the authentication

Como tratar erros http no Spring Boot

Sumário

A situação

O problema

Filtro global de exceções

Receptando e tratando erros de validação

Entendendo o método handleValidationErrors(MethodArgumentNotValidException ex):

Tratando outros tipos de erro

Erros comuns de iniciantes em ReactJS

Sumário

A propriedade style no JSX

Acessar um valor que ainda não existe

Esquecer a propriedade key quando exibindo uma lista

Verificando se uma lista está vazia

Entendendo o método `handleValidationErrors(MethodArgumentNotValidException ex)`: