DEV Community: Anbumani

Secure Your Spring Boot and Angular Application with JWT Authentication: A Comprehensive Guide

Anbumani — Mon, 08 Jan 2024 03:04:20 +0000

In the world of web development, security is a critical aspect that cannot be overlooked. This blog post will guide you through the process of securing your Spring Boot backend and Angular frontend using JSON Web Tokens (JWT) for authentication. We'll cover the generation and validation of JWT on the server side, as well as implement the necessary features on the Angular side to handle authentication, error interception, and token storage.

Understanding JWT and Its Significance

JSON Web Tokens (JWT) have emerged as a key element in securing modern web applications, offering a compact and efficient way to transmit information between parties. Below is a brief overview of JWT and its pivotal role in contemporary web development:

What is JWT?

JWT is an open standard that defines a self-contained method for securely transmitting information as a JSON object. JWTs are commonly used for authentication, authorization, and secure communication by comprising a header, payload, and signature.

Components of a JWT:

Header: Specifies the token type and signing algorithm.
Payload: Contains claims and additional data.
Signature: Ensures the token's integrity and is created by combining the encoded header, payload, and a secret key.

Role of JWT in Modern Web Applications:

Stateless Authentication: JWTs eliminate the need for server-side session storage, allowing stateless authentication in scalable systems.

Authorization: JWTs carry user claims, aiding servers in making access control decisions.

Inter-Service Communication: JWTs facilitate secure communication between microservices, ensuring authenticity and authorization.

Compact and Efficient: The concise format of JWTs makes them ideal for transmitting information efficiently.

Advantages of JWT:

Security: JWTs can be signed and encrypted for integrity and confidentiality.

Decentralized: JWTs are self-contained, reducing the need for constant communication with a central authority.

Cross-Domain Compatibility: JWTs can be easily transmitted across different domains and are widely supported.

Considerations:

Token Expiry: JWTs can have an expiration time for enhanced security.

Sensitive Information: Avoid including highly sensitive information in the payload to minimize security risks.

thus, JWTs serve as a versatile and secure solution for authentication, authorization, and information exchange in modern web applications, contributing to the evolving landscape of web development.

Setting Up Spring Boot for JWT Authentication

Create an application setup with spring security. You can refer to my previous post to set up one.

Implementing JWT Service.

After successful authentication, the application will generate and sign the JWT with claims, expiration, and other parameters. Below is the flow that explains the JWT token generation.

Let's configure the dependencies below for JWT support. This will help us in JWT generation and validation.

<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>

As a next step, we will create a service that will generate and validate JWT.

io.jsonwebtoken.Jwts provides a handy builder method to build the JWT.

Let's create a secret key using the HMACSHA256 algorithm. This key will be used to ensure the integrity of JWT.

JWT Generate method

With the builder method let's set the issuer of JWT, Subject, Custom claim "username", and the expiration. Finally, sign the JWT with the secret key.

JWT Validate Method

We will use the JWT parser using the secret key to parse the claims from the JWT.

The code below shows the complete JWT service implementation

@Service
public class JWTServiceImpl implements JWTService {

    private final String key = "jxgEQeXHuPq8VdbyYFNkANdudQ53YUn4";
    private final SecretKey secretKey = Keys.hmacShaKeyFor(key.getBytes(StandardCharsets.UTF_8));

    @Override
    public String generateJwt(String username) throws ParseException {
        Date date= new Date();
        return  Jwts.builder()
                .setIssuer("MFA Server")
                .setSubject("JWT Auth Token")
                .claim("username", username)
                .setIssuedAt(date)
                .setExpiration(new Date(date.getTime() + 60000))
                .signWith(secretKey)
                .compact();
    }

    @Override
    public Authentication validateJwt(String jwt) {
        JwtParser jwtParser = Jwts.parserBuilder()
                .setSigningKey(secretKey)
                .build();
        Claims claims = jwtParser.parseClaimsJws(jwt).getBody();
        String username = (String)claims.getOrDefault("username",null);
        if(Objects.nonNull(username)){
            return new UsernamePasswordAuthenticationToken(username, null, new ArrayList<>());
        }
        return null;
    }
}

Configuring Spring Security for JWT validation.

To validate JWT we will create a custom filter that retrieves the token from incoming requests and sets the authorization token to the security context. Also, We will create an Exception handler that responds with 401 went the user is not authenticated.

JWT Validation Filter

This filter will be configured to execute before the "UsernameAndPasswordAuthenticvationFilter". This filter extends the OncePerRequestFiolter and provides the implantation to doFilter.

We will validate the JWt from the request by extracting the authorization header and using our JWT service to validate and set the authentication token to the security context. Please see the implementation below.

public JwtValidationFilter(JWTService jwtService) {
        this.jwtService = jwtService;
    }


    @Override
    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {
        try {
            //retrieve token
            String jwt = getJWT(request);
            if (Objects.nonNull(jwt)) {
                // Validate the JWT from the Request
                UsernamePasswordAuthenticationToken auth = (UsernamePasswordAuthenticationToken) jwtService.validateJwt(jwt);
                auth.setDetails(new WebAuthenticationDetailsSource().buildDetails(request));
                SecurityContextHolder.getContext().setAuthentication(auth);
            }
        }catch (Exception e){
            log.error("Exception while processing the JWT"+e.getMessage());
        }
        filterChain.doFilter(request, response);
    }

    private String getJWT(HttpServletRequest request){
        String jwt = request.getHeader("authorization");
        if(Objects.nonNull(jwt) && jwt.startsWith("Bearer") &&
        jwt.length()>7){
            return jwt.substring(7);
        }
        return null;
    }

Exception Handler

When there is any exception in the process of authentication we will respond with 401 - Unauthorized error. This is achieved using the Authentication Entry point. Where we will configure the exception handler. Look at the simple implementation below.

@Component
@Slf4j
public class AuthExceptionHandler implements AuthenticationEntryPoint {
    @Override
    public void commence(HttpServletRequest request, HttpServletResponse response, AuthenticationException authException) throws IOException, ServletException {
        log.error("Unauthorized {}", authException.getMessage());
        response.sendError(HttpServletResponse.SC_UNAUTHORIZED, "User is not Authenticated");
    }
}

Managing Cross-Origin Resource Sharing (CORS) to ensure secure communication.

Our angular application is running on a different port than the back end. it is considered a different domain. So we need to advise Spring Security to share data to the Cross Origins.

Let's use the CORS configuration to set allowed Origins, Methods, and headers. As we are expecting authorization and content-type header let's add them. For any URL in the application add this configuration using UrlBasedCorsConfigurationSource object.

 @Bean
    CorsConfigurationSource corsConfigurationSource(){
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.setAllowedOrigins(Arrays.asList("http://localhost:4200"));
        configuration.setAllowedMethods(Arrays.asList("GET","POST"));
        configuration.setAllowedHeaders(Arrays.asList("authorization","content-type"));
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**",configuration);
        return source;
    }

Finally, we add this to the security configuration.

@Bean
    public SecurityFilterChain defaultFilterChain(HttpSecurity httpSecurity) throws Exception {
        return httpSecurity
                .cors(cors-> cors.configurationSource(corsConfigurationSource()))
                .csrf(csrf-> csrf.disable())
                .exceptionHandling(handle -> handle.authenticationEntryPoint(authExceptionHandler))
                .addFilterBefore(jwtValidationFilter, UsernamePasswordAuthenticationFilter.class)
                .sessionManagement(session-> session.sessionCreationPolicy(SessionCreationPolicy.STATELESS))
                .authorizeHttpRequests(auth-> auth
                        .requestMatchers("/error**","confirm-email","/register**","/login**","/verifyTotp**").permitAll()
                        .anyRequest().authenticated()
                )
               .build();
    }

Angular Setup for JWT Authentication

Storing JWT in Local Storage

On successful authentication, we will add the JWT to local storage and further, it will be used by the application for backend API calls.

public login(payload: MfaVerificationResponse): void {
    if(payload.tokenValid && !payload.mfaRequired){
      localStorage.clear();
      localStorage.setItem(this.tokenKey, payload.jwt);
    }
  }

Adding JWT to outgoing requests for secure communication with the backend.

HTTP Interceptors from angular allow us to intercept all the requests and responses. We will create two interceptors one to add the authorization token to the request header and another to redirect user to login page if the user is unauthorized.

Jwt Token Interceptor Implementation

@Injectable({
  providedIn: 'root'
})
export class TokenInterceptor implements HttpInterceptor {

  constructor(private authenticationService: AuthService) { }


  intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    if (this.authenticationService.isLoggedIn()) {
      let newRequest = request.clone({
        setHeaders: {
          Authorization: `Bearer ${this.authenticationService.getToken()}`,
        },
      });
      return next.handle(newRequest);
    }
    return next.handle(request);
  }
}

Setting up an error interceptor for better error handling.

Error handler will skip the login page from 401 validation. If the backend responds with 401 for any API call then it is assumed the user should log in again to get access. We can customize this when we have role-level access.

@Injectable({
  providedIn: 'root'
})
export class ErrorInterceptor implements HttpInterceptor {

  constructor(private authenticationService: AuthService) { }


  intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {

    return next.handle(request).pipe(catchError(error=>{
      if(error.status == 401 && !this.isLoginPage(request)){
        this.authenticationService.logout();
      }
      const errMsg = error.error.message || error.statusText;
      return throwError(()=> errMsg);
    }));
  }

  private isLoginPage(request: HttpRequest<any>){
    return request.url.includes("/login") || request.url.includes("/verifyTotp");
  }
}

Along the logout, we will clear the token from local storage and navigate the user to login page.

  public logout() {
    localStorage.removeItem(this.tokenKey);
    this.router.navigate(['/login']);
  }

Now let's call a protected URL on the Home page load.

export class HomeComponent implements OnInit {
  message: string="";
  constructor(private homeService: HomeService) { }

  ngOnInit(): void {
    this.homeService.getProtectedString().subscribe(s=> this.message =s);
  }

}

Home HTML

<div class="container-fluid">
<div class="card">
    <div class="card-header">
        <h1>Welcome!!</h1>
    </div>
    <div class="card-body">
        <h2>{{message}}</h2>
    </div>
</div>
</div>

Let's execute the code and check it out.

After successful login, you can see the bearer token is added to the header and we have received the response.

We have successfully secured the Spring boot and Angular application using JWT. Great for reading till the end. Check out the GitHub repository & do comment if have any questions, I am happy to answer all.

Backend code

amaialth / mfaserver

Spring boot backend for MFA

MFA Server

Application for 2FA demo.

APIs Involved

login
register
verifyTotp
confrim-email

Dependencies

Spring Security
Spring Web
dev.samstevens.totp

View on GitHub

Angular UI

amaialth / MFAApplication

Mfaapplication

Application developed using Angular 14 and Bootstrap.

Components involved.

Login
Register
TOTP
Home Module

View on GitHub

Connecting Kafka to Spring Boot: A Step-by-Step Guide Using KafkaTemplate

Anbumani — Thu, 04 Jan 2024 02:54:41 +0000

Hello, Tech enthusiasts! Today, we're going to learn how to connect to one of the most widely used distributed streaming platforms, Kafka, from Spring Boot. This will be a brief write-up as we'll be utilizing KafkaTemplate, which makes our lives easier. Let's dive in.

If you like to learn in action, below is the video version that goes over the implementation.

Overview

We will create a Rest endpoint that will be responsible for posting the message into the Kafka topic and the consumer who is also part of the same project listening to the topic will print the received message on the console.

Project Set-up

Let's create a spring boot application with the following dependencies.
Add "spring-boot-starter-web" for the rest endpoint creation.

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

Here comes the Kafka dependency will do the magic of producing & consuming from Kafka via KafkaTemplate.

<dependency>
        <groupId>org.springframework.kafka</groupId>
    <artifactId>spring-kafka</artifactId>
</dependency>

As the next step will add below configuration to establish the connection with Kafka broker. Spring boot will auto-configure the KafkaTemplate with these properties.

Make sure to update the server and group-id below.

spring:
  kafka:
    consumer:
      bootstrap-servers:
        - localhost:9092
      group-id: ytube-group
#      auto-offset-reset: earliest
#      key-deserializer:
#      value-deserializer:
    producer:
      bootstrap-servers:
        - localhost:9092

Consumer Configuration:

bootstrap-servers: Specifies the Kafka server(s) that the consumer will connect to. In this case, it's set to a single server at localhost:9092.
group-id: Identifies the consumer group to which this consumer belongs. It helps Kafka keep track of the progress of different consumer groups.
auto-offset-reset: (Commented out) This property determines what happens when there is no initial offset or the current offset does not exist. The earliest option means it will start reading from the beginning of the topic.
key-deserializer and value-deserializer: (Commented out) These properties define the deserializer classes for the key and value of the messages. Depending on your use case, you might need to specify appropriate deserializer classes.

Producer Configuration:

bootstrap-servers: Similar to the consumer, this property specifies the Kafka server(s) that the producer will connect to. In this case, it's also set to a single server at localhost:9092.

KafkaMessageProducer

With KafkaTemplate, it's as simple as writing a letter. Create a KafkaProducer service, autowire KafkaTemplate, and start sending messages.

@Component
public class KafkaMessageProducer {

    @Autowired
    KafkaTemplate<String, String> kafkaTemplate;

    public void sendMessage(String topic, String message){
        kafkaTemplate.send(topic, message);
    }
}

KafkaMessageConsumer

Of course, every good story has two sides. Create a KafkaConsumer service to catch the messages on the other end. KafkaTemplate sends, and KafkaConsumer receives – it's the yin and yang of our messaging world.

We configure the consumer with the help of KafkaListener.

@Component
public class MessageConsumer {

    @KafkaListener(topics = "ytube-topic1", groupId = "ytube-group")
    public void consumerMessage(String message){
        System.out.println("Received Message "+ message);
    }
}

Let's make the rest endpoint to post the message into the Kafka topic.

We have autowired the kafka message producer and passed the topic name and message.

    @Autowired
    KafkaMessageProducer messageProducer;

    @PostMapping("/sendMessage")
    public String sendMessage(@RequestParam("message") String message){
        messageProducer.sendMessage("ytube-topic1", message);
        return "Message has been sent successfully "+message;
    }

Let's execute the application and see the message posted to Kafka topic and received by the consumer. In real world, the consumer can be another microservice that consumes the message to process it further.

Kudos, you made it to the end! Thanks for hanging out with us. If you have more questions or just enjoyed the ride, come back soon. Happy exploring!

Checkout the completed code here

amaialth / kafkademo

Demo/Starter project to connect Spring boot with Kafka

Simple Kafka Demo

The application demonstrates the use of KafkaTemplate. We will use Kafka template to produce and consume the message.

View on GitHub

Streamlining Email Verification: A Step-by-Step Guide with Spring Boot and Angular

Anbumani — Tue, 02 Jan 2024 00:13:26 +0000

Hello readers, In this article you will learn a complete email verification process. We will implement this using Java, Spring Boot, and Mongo DB. You find the completed code at the end. Also, the video version is below.

Let us split this process into two parts.

Generating email verification link with the token.
Rest endpoint to verify the token from the link.

Workflow

As the first process, we will generate the token, Store it in DB, and send an email with the confirmation link. This will be included after we persist the user details in the registration.

Additionally you can also create an endpoint that can be utilized when there is an email update.

An endpoint that verifies the token by querying the DB and updating the user record that the email has been verified.

Code Implementation

Let's create an entity that stores the token. This can be leveraged for future use when there is a business requirement for token expiration and many more.

@Data
@Document
public class EmailConfirmationToken {
    @Id
    private String id;
    @Indexed
    private String token;
    @CreatedDate
    @ReadOnlyProperty
    private LocalDateTime timeStamp;
    @DBRef
    private User user;
}

Below is the repository that will interact with DB.

@Repository
public interface EmailConfirmationTokenRepository extends MongoRepository<EmailConfirmationToken, String> {
    EmailConfirmationToken findByToken(String token);
}

Now repository is ready, Let's create a service that generates the token,

We will make use of "KeyGenerators" from spring security to generate a random 15-byte token.

private static final BytesKeyGenerator DEFAULT_TOKEN_GENERATOR = KeyGenerators.secureRandom(15);
    private static final Charset US_ASCII = Charset.forName("US-ASCII");

Now use the DEFAULT_TOKEN_GENERATOR to generate the token and add it to the entity to store it using the repository we created above.

String tokenValue = new String(Base64.encodeBase64URLSafe(DEFAULT_TOKEN_GENERATOR.generateKey()), US_ASCII);
        EmailConfirmationToken emailConfirmationToken = new EmailConfirmationToken();
        emailConfirmationToken.setToken(tokenValue);
        emailConfirmationToken.setTimeStamp(LocalDateTime.now());
        emailConfirmationToken.setUser(user);
        emailConfirmationTokenRepository.save(emailConfirmationToken);

At this point, the token has been generated and stored in DB. Now let's send out a registration email.

To Configure the email server we are going to use Gmail. Let's move to Gmail-> Manage Accounts -> Security -> click on 2 Step Verification -> Scroll to the end and click on App Passwords -> Enter the application name and get the password.

After you get the password add it to the configuration below,

spring:
  mail:
    host: smtp.gmail.com
    port: 587
    username: YOUR_EMAIL
    password: "YOUR APPPLICATION PASSWORD"
    properties:
      mail:
        smtp:
          auth: true
          starttls:
            required: true
            enable: true

Now the email server configuration is ready let's implement the email service as below,

Email service makes use of JavaMailSender API. As we are planning to use HTML messages, I am using the MIME message type and its helper to set the email properties.

We can also isolate the HTML message to a separate file and include it as a stream instead of an inline string.

@Service
public class EmailServiceImpl implements EmailService {

    private final JavaMailSender sender;

    public EmailServiceImpl(JavaMailSender sender) {
        this.sender = sender;
    }

    @Override
    public void sendConfirmationEmail(EmailConfirmationToken emailConfirmationToken) throws MessagingException {
        //MIME - HTML message
        MimeMessage message = sender.createMimeMessage();
        MimeMessageHelper helper = new MimeMessageHelper(message, true);
        helper.setTo(emailConfirmationToken.getUser().getUsername());
        helper.setSubject("Confirm you E-Mail - MFA Application Registration");
        helper.setText("<html>" +
                        "<body>" +
                        "<h2>Dear "+ emailConfirmationToken.getUser().getFirstName() + ",</h2>"
                        + "<br/> We're excited to have you get started. " +
                        "Please click on below link to confirm your account."
                        + "<br/> "  + generateConfirmationLink(emailConfirmationToken.getToken())+"" +
                        "<br/> Regards,<br/>" +
                        "MFA Registration team" +
                        "</body>" +
                        "</html>"
                , true);

        sender.send(message);
    }

    private String generateConfirmationLink(String token){
        return "<a href=http://localhost:8080/confirm-email?token="+token+">Confirm Email</a>";
    }
}

Let's add the token generation and send an email after saving user details in your application.

Let's see how it works in action.

Open the UI and register a User with a valid email address,

Upon registration, let's look at the DB.

Here is the email we received.

The first part is completed.

Let's implement the rest endpoint that validates the token,

If there is a security config that limits the authenticated endpoints then add this endpoint to whitelists.

@GetMapping("/confirm-email")
    public ResponseEntity<?> confirmEmail(@RequestParam("token") String token) throws InvalidTokenException {
        try{
            if(userService.verifyUser(token)){
                return ResponseEntity.ok("Your email has been successfully verified.");
            } else {
                return ResponseEntity.ok("User details not found. Please login and regenerate the confirmation link.");
            }
        } catch (InvalidTokenException e){
            return ResponseEntity.ok("Link expired or token already verified.");
        }
    }

Below is the service implementation that will validate the token and update the user record.

Code retries the token from DB with the token received from the endpoint. if there is a token then validate update the user record and delete the token from DB.

@Override
    public boolean verifyUser(String token) throws InvalidTokenException {
        EmailConfirmationToken emailConfirmationToken = emailConfirmationTokenRepository.findByToken(token);
        if(Objects.isNull(emailConfirmationToken) || !token.equals(emailConfirmationToken.getToken())){
            throw new InvalidTokenException("Token is not valid");
        }
        User user = emailConfirmationToken.getUser();
        if (Objects.isNull(user)){
            return false;
        }
        user.setAccountVerified(true);
        userRepository.save(user);
        emailConfirmationTokenRepository.delete(emailConfirmationToken);
        return true;
    }

Let's check the endpoint by clicking on the email link.

This endpoint also updated the record and deleted the token,

We have successfully implemented the registration workflow. Great for reading till the end. Check out the GitHub repository & do comment if have any questions, I am happy to answer all.

Backend code

amaialth / mfaserver

Spring boot backend for MFA

MFA Server

Application for 2FA demo.

APIs Involved

login
register
verifyTotp
confrim-email

Dependencies

Spring Security
Spring Web
dev.samstevens.totp

View on GitHub

Angular UI

amaialth / MFAApplication

Mfaapplication

Application developed using Angular 14 and Bootstrap.

Components involved.

Login
Register
TOTP
Home Module

View on GitHub

Securing Your App: TOTP Authentication with Spring Boot and Angular — Part Two— Implementation & Demo

Anbumani — Sun, 31 Dec 2023 23:14:00 +0000

This is a continuation of Part 1 — Overview and Project Setup. Please go through it if you have not.

Register Endpoint Implementation

As the first step let’s implement the register endpoint. Below operations involved in this process,
The controller delegates the service request.

@PostMapping("/register")
    public ResponseEntity<?> register(@Validated @RequestBody User user) {
        // Register User // Generate QR code using the Secret KEY
        try {
            return ResponseEntity.ok(userService.registerUser(user));
        } catch (QrGenerationException e) {
            return ResponseEntity.internalServerError().body("Something went wrong. Try again.");
        }
    }

Service layer for Registration.

Check the user already exists in DB with the same username.
Hash the password
Create a Secret key that is used for TOTP generation
Save these data into DB
Generate QR code and respond.

@Override
    public MfaTokenData registerUser(User user) throws UserAlreadyExistException, QrGenerationException {
        try{
            if (userRepository.findByUsername(user.getUsername()).isPresent()) {
                throw new UserAlreadyExistException("Username already exists");
            }
            user.setPassword(passwordEncoder.encode(user.getPassword()));
            //some additional work
            user.setSecretKey(totpManager.generateSecretKey()); //generating the secret and store with profile
            User savedUser = userRepository.save(user);

            //Generate the QR Code
            String qrCode = totpManager.getQRCode(savedUser.getSecretKey());
            return MfaTokenData.builder()
                    .mfaCode(savedUser.getSecretKey())
                    .qrCode(qrCode)
                    .build();
        } catch (Exception e){
            throw new MFAServerAppException("Exception while registering the user", e);
        }
    }

The TOTP Manager is responsible for generating the secret key and QR code. Let’s create the beans for this. By default, the secret generator will generate 32 32-byte secret keys. it can be overridden by passing a constructor argument.

@Bean
    public SecretGenerator secretGenerator(){
        return new DefaultSecretGenerator();
    }

    @Bean
    public QrGenerator qrGenerator(){
        return new ZxingPngQrGenerator();
    }

TOTP Manager Implementation. We create a QR code with all the required details for the TOTP generation. Below QR code below contains the secret, number of digits, period, and algorithm. These details help the Authenticator app generate a TOTP that matches the server.

@Override
public String generateSecretKey() {
    return secretGenerator.generate(); // 32 Byte Secret Key
}

@Override
public String getQRCode(String secret) throws QrGenerationException {
    QrData qrData = new QrData.Builder().label("2FA Server")
            .issuer("Youtube 2FA Demo")
            .secret(secret)
            .digits(6)
            .period(30)
            .algorithm(HashingAlgorithm.SHA512)
            .build();

    return Utils.getDataUriForImage(qrGenerator.generate(qrData), qrGenerator.getImageMimeType());
}

Now Registration endpoint is ready. Let’s try with UI.

The below screenshot shows the QR code returned after successful registration.

Mongo DB with User data persisted.

we have completed the registration successfully. Now user scans the QR code with the authenticator app to generate the one-time password. Let's create the login and verifyTotp endpoints.

Login endpoint Implementation

The controller delegates the request to service and responds with a response.

Here we respond with all the required parameters for UI to determine the user needs to be validated again on 2FA, user is validated, JWT, and message.

@PostMapping(value = "/login", produces = "application/json")
    public ResponseEntity<?> login(@Validated @RequestBody LoginRequest loginRequest) {
        // Validate the user credentials and return the JWT / send redirect to MFA page
        try {//Get the user and Compare the password
            Authentication authentication = authenticationProvider.authenticate(
                    new UsernamePasswordAuthenticationToken(loginRequest.getUsername(), loginRequest.getPassword())
            );
            SecurityContextHolder.getContext().setAuthentication(authentication);
            User user = (User) authentication.getPrincipal();
            return ResponseEntity.ok(MfaVerificationResponse.builder()
                    .username(loginRequest.getUsername())
                    .tokenValid(Boolean.FALSE)
                    .authValid(Boolean.TRUE)
                    .mfaRequired(Boolean.TRUE)
                    .message("User Authenticated using username and Password")
                    .jwt("")
                    .build());

        } catch (Exception e){
            return ResponseEntity.ok(MfaVerificationResponse.builder()
                    .username(loginRequest.getUsername())
                    .tokenValid(Boolean.FALSE)
                    .authValid(Boolean.FALSE)
                    .mfaRequired(Boolean.FALSE)
                    .message("Invalid Credentials. Please try again.")
                    .jwt("")
                    .build());
        }
    }

We are using an authentication provider from Spring Security that validates the user. Alternatively, you can directly validate the password and respond as we are going to implement JWT in the upcoming blog.

@Override
    public Authentication authenticate(Authentication authentication) throws AuthenticationException {
        String username = authentication.getName();
        String password = authentication.getCredentials().toString();

        Optional<User> userDetails = userRepository.findByUsername(username);
        if(userDetails.isPresent()){
            if (userDetails != null && passwordEncoder.matches(password, userDetails.get().getPassword())) {
                return new UsernamePasswordAuthenticationToken(userDetails.get(), password);
            } else {
                throw new BadCredentialsException("Invalid password");
            }
        } else {
            throw new UsernameNotFoundException("Username Not Found");
        }
    }

Let’s validate the login page using /login API.

Let’s enter valid credentials and it navigates us to the 2FA page.

This shows the login is working as expected. Let's move on to create the verifyTotp endpoint.

VerifyTotp Implementation

The controller delegates the request to the service layer and responds back with the response from the service

@PostMapping("/verifyTotp")
public ResponseEntity<?> verifyTotp(@Validated @RequestBody MfaVerificationRequest request) {
    MfaVerificationResponse mfaVerificationResponse = MfaVerificationResponse.builder()
            .username(request.getUsername())
            .tokenValid(Boolean.FALSE)
            .message("Token is not Valid. Please try again.")
            .build();
    // Validate the OTP
    if(userService.verifyTotp(request.getTotp(), request.getUsername())){
        mfaVerificationResponse = MfaVerificationResponse.builder()
                .username(request.getUsername())
                .tokenValid(Boolean.TRUE)
                .message("Token is valid")
                .jwt("DUMMYTOKEN")
                .build();
    }
    return ResponseEntity.ok(mfaVerificationResponse);
}

The service layer makes use of a code verifier from samssteven.totp dependency to validate. User secret will be queried from DB using the username from the payload

@Override
public boolean verifyTotp(String code, String username) {
    User user = userRepository.findByUsername(username).get();
    return totpManager.verifyTotp(code, user.getSecretKey());
}

 @Override
    public boolean verifyTotp(String code, String secret) {
        return myCodeVerifier.isValidCode(secret, code);
    }

We will create a bean of it with the same values which was used for QR code generation.

Code (TOTP) can be verified with time and the code generation algorithm. We will create the object of Time Provider and Code Generator as below. All the parameters must be the same as the QR code data.

@Bean
    public CodeVerifier myCodeVerifier(){
        // Time
        TimeProvider timeProvider = new SystemTimeProvider();
        // Code Generator
        CodeGenerator codeGenerator = new DefaultCodeGenerator(HashingAlgorithm.SHA512, 6);
        DefaultCodeVerifier codeVerifier = new DefaultCodeVerifier(codeGenerator, timeProvider);
        codeVerifier.setTimePeriod(30);
        codeVerifier.setAllowedTimePeriodDiscrepancy(2);
        return  codeVerifier;
    }

Let’s check this out from UI. I have entered the OTP generated from the authenticator app.

Upon submission it successfully allowed me into the application.

Kudos!!! We have successfully implemented the TOTP as 2FA into our application. Please feel free to refer to the GitHub repo.

amaialth / MFAApplication

Mfaapplication

Application developed using Angular 14 and Bootstrap.

Components involved.

Login
Register
TOTP
Home Module

View on GitHub

amaialth / mfaserver

Spring boot backend for MFA

MFA Server

Application for 2FA demo.

APIs Involved

login
register
verifyTotp
confrim-email

Dependencies

Spring Security
Spring Web
dev.samstevens.totp

View on GitHub

Securing Your App: TOTP Authentication with Spring Boot and Angular — Part One — Overview & Project Setup

Anbumani — Sun, 31 Dec 2023 22:38:00 +0000

What is TOTP?

TOTP stands for Time-based One-Time Passwords and is a common form of two-factor authentication (2FA). Unique numeric passwords are generated with a standardized algorithm that uses the current time as an input. The time-based passwords are available offline and provide user-friendly, increased account security when used as a second factor.

TOTP is also known as app-based authentication, software tokens, or soft tokens. Authentication apps like Microsoft Authenticator and Google Authenticator support the TOTP standard.

When TOTP?

Imagine a secure system that combines something you know (like a password) with something you have (a device generating a one-time password). That’s where TOTP comes in.

How does TOTP work?

When the user registers into our application system will generate a secret key and that will be stored in DB. The system will generate a QR code that combines the Algorithm, number of digits, and period that will be used by the server to generate the TOTP.

Upon login, the user will provide the credentials and validate. As a next step, they will be prompted for OTP. This will be generated by the authenticator application, this will be validated by the server using the time bucket the OTP is entered.

Project:

We will implement the Backend server in Spring Boot and Mongo DB as a Persistence layer. Angular 14 is our Front end which will connect to the backend over rest endpoints. We will be using “dev.samstevens.totp” to generate and verify TOTP.

End-Point Implementation Overview:

/register
register endpoint will accept the registration details including the username and password as payload. It will check for user existence, if the user already exists then respond with a UserAlreadyExist exception, else Generate the Secret key, encode the password received, and persist the user details. Further, generate the QR code and add it to the response.

/verifyTotp
This endpoint accepts username and TOTP as payload. It will fetch the secret key with the username provided and pass it to the verify method of the “dev.samstevens.totp” code verifier. If the code is valid then it will generate the JWT and respond. Else it will respond as an Invalid Token.

/login
This endpoint will get the username and password as payload and validate with the AuthProvider. If the credentials are valid and the user opted for MFA then respond with MFA Required. Else generate the JWT.

Project Setup:

Create a Spring Boot Project with the following dependencies,

<dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-data-mongodb</artifactId>
  </dependency>
  <dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-mail</artifactId>
  </dependency>
  <dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-security</artifactId>
  </dependency>
  <dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-web</artifactId>
  </dependency>
  <dependency>
   <groupId>dev.samstevens.totp</groupId>
   <artifactId>totp</artifactId>
   <version>1.7.1</version>
  </dependency>
  <dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-validation</artifactId>
  </dependency>
  <dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-devtools</artifactId>
   <scope>runtime</scope>
   <optional>true</optional>
  </dependency>
  <dependency>
   <groupId>org.projectlombok</groupId>
   <artifactId>lombok</artifactId>
   <optional>true</optional>
  </dependency>

application.yaml

spring: application: name: mfa-server data: mongodb: host: localhost port: 27017 database: mfa-server

Create a websecurity configuration class for all endpoints. Also, create a bean if BCryptPasswordEncoder.

`@EnableWebSecurity
@Configuration
public class AppSecurityConfig {

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

    @Bean
    public SecurityFilterChain defaultFilterChain(HttpSecurity httpSecurity) throws Exception {
        return httpSecurity
                .cors(cors-> cors.disable())
                .csrf(csrf-> csrf.disable())
                .sessionManagement(session-> session.sessionCreationPolicy(SessionCreationPolicy.STATELESS))
                .authorizeHttpRequests(auth-> auth
                        .requestMatchers("/error**","/register**","/login**","/verifyTotp**").permitAll()
                        .anyRequest().authenticated()
                )
               .build();
    }
}`

Create a User Entity. This stores the user details, credentials, and roles.

`@Document(collection = "users")
@NoArgsConstructor
@AllArgsConstructor
@Data
public class User {
    @Id
    private String id;
    @Indexed
    @NotBlank
    private String username;
    private String password;
    boolean mfaEnabled;
    @JsonIgnore
    private String secretKey;
    private String firstName;
    private String lastName;
    private boolean active;
    @DBRef
    private Set<Role> roles = new HashSet<>();
}`

Create UserRepository.

`@Repository
public interface UserRepository extends MongoRepository<User, Long> {
    Optional<User> findByUsername(String username);
}`

Create a Service that Helps us Register and Verify Totp

`public interface UserService {
    MfaTokenData registerUser(User user) throws UserAlreadyExistException, QrGenerationException;
    boolean verifyTotp(final String code,String username);
}`

Create a Controller exposing the endpoints for /register, /login, and /verifyTotp.

We will look into the Implementation in our next blog.

Securing Your App: TOTP Authentication with Spring Boot and Angular — Part Two— Implementation & Demo

Anbumani ・ Dec 31 '23

#security #springboot #angular #mongodb

Angular Project Setup

Create an angular project and include Bootstrap.

`"styles": [
"node_modules/bootstrap/scss/bootstrap.scss" ,
"src/styles.scss"
],
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.bundle.js"
]
`

Create a client service that connects with the backend over the rest endpoints.

`@Injectable({
  providedIn: 'root'
})
export class AuthClientService {

  constructor(private http: HttpClient) { }

  public login(payload: string): Observable<MfaVerificationResponse> {
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type':  'application/json'
      })
    };
    return this.http.post<MfaVerificationResponse>(
      environment.apiUrl + '/login', payload, httpOptions
    );
  }

  public verifyTotp(payload: MfaVerificationRequest): Observable<MfaVerificationResponse> {
    return this.http.post<MfaVerificationResponse>(
      environment.apiUrl + '/verifyTotp', payload
    );
  }

  public register(
    payload: string
  ): Observable<string> {
    return this.http.post(
      environment.apiUrl + '/register',payload,
      { responseType: 'text' }
    );
  }
}
`

Create a Login, Register components as per your wish, and connect them with the client. You can refer to my implementation from below GitHub.

amaialth / MFAApplication

Mfaapplication

Application developed using Angular 14 and Bootstrap.

Components involved.

Login
Register
TOTP
Home Module

View on GitHub

Check out the complete code implementation here

Securing Your App: TOTP Authentication with Spring Boot and Angular — Part Two— Implementation & Demo

Anbumani ・ Dec 31 '23

#security #springboot #angular #mongodb