Your First Full Stack Application with React and Spring Boot

Take your first steps towards becoming a Full Stack Developer with React and Spring Boot

React is a one of the most popular front end view frameworks

Components
JSX
State
Props

In combination with other libraries, React helps in doing a wide variety of front end features

Forms Handling
Routing System
HTTP Requests

Spring Boot is an awesome framework to build RESTful API and Microservices.

In this course, lets combine these awesome frameworks to create your first full stack web application.

References

Installation Guides

Required Tools

Node v8+ for npm
Visual Studio Code - Latest Version
Java 8+
Eclipse - Oxygen+ - (Embedded Maven From Eclipse)

Installing Node Js (npm) & Visual Studio Code

Playlist - https://www.youtube.com/playlist?list=PLBBog2r6uMCQN4X3Aa_jM9qVjgMCHMWx6
Steps
- Step 01 - Installing NodeJs and NPM - Node Package Manager
- Step 02 - Quick Introduction to NPM
- Step 03 - Installing Visual Studio Code - Front End Java Script Editor

Installing Java, Eclipse & Embedded Maven

Playlist - https://www.youtube.com/playlist?list=PLBBog2r6uMCSmMVTW_QmDLyASBvovyAO3
Steps
- 0 - Overview - Installation Java, Eclipse and Maven
- 1 - Installing Java JDK
- 2 - Installing Eclipse IDE
- 3 - Using Embedded Maven in Eclipse
- 4 - Troubleshooting Java, Eclipse and Maven

Troubleshooting Installations

Node JS and NPM
- https://docs.npmjs.com/common-errors
- https://docs.npmjs.com/getting-started/troubleshooting
Visual Studio Code
- https://code.visualstudio.com/docs/supporting/errors
- https://code.visualstudio.com/docs/supporting/FAQ
Eclipse and Embedded Maven
- PDF : https://github.com/in28minutes/SpringIn28Minutes/blob/master/InstallationGuide-JavaEclipseAndMaven_v2.pdf
- GIT Repository For Installation : https://github.com/in28minutes/getting-started-in-5-steps

Getting Started with Spring, Spring Boot and JPA

Spring Tutorial for Beginners - https://www.youtube.com/watch?v=edgZo2g-LTM
Spring Boot Tutorial for Beginners - https://www.youtube.com/watch?v=pcdpk3Yd1EA
JPA and Hibernate Tutorial for Beginners - https://www.youtube.com/watch?v=MaI0_XdpdP8

Course Overview

Introduction

Developing your first full stack application with React and Spring Boot is fun.

In this course, you will learn the basics of full stack development developing a Basic Todo Management Application using React, Spring Boot and Spring Security Frameworks.

You will build the application step by step - in more than 50 steps. This course would be a perfect first step as an introduction to React and Full Stack Development.

You will be using React (Frontend View Framework), React Create App(To create React project), Various JavaScript Libraries (Axios, Formik, React Router), Spring Boot (REST API Framework), Spring (Dependency Management), Spring Security (Authentication and Authorization - Basic and JWT), BootStrap (Styling Pages), Maven (dependencies management), Node (npm), Visual Studio Code (JavaScript IDE), Eclipse (Java IDE) and Tomcat Embedded Web Server. We will help you set up each one of these.

What You will learn

You will develop your first full stack application with React and Spring Boot
You will learn the basic of React - React Components and Routing
You will learn basics of building awesome frontend applications with React
You will be introduced to building great RESTful APIs with Spring Boot
You will learn to use Spring Security to configure Basic Authentication and JWT
You will learn to solve the challenges of connecting an React Frontend to a RESTful API
You will learn to connect REST API to JPA/Hibernate with Spring Boot
You will learn to use a wide variety of Spring Boot Starter Projects - Spring Boot Web, and Spring Boot Data JPA
You will understand the best practices in designing RESTful web services
You will develop a Todo Management Full Stack Application step by step with login and logout functionalities
You will learn the magic of Spring Boot - Auto Configuration, Spring Initializr and Starter Projects
You will understand how to make best use of Spring Boot Actuator and Spring Boot Developer Tools
You will understand and use the embedded servlet container options provided by Spring Boot

Requirements

You should have prior experience with Java, Basic JavaScript and Spring Framework.
You should have Chrome browser installed.
We will help you install Eclipse, Visual Studio Code and Node JS(for npm)
We will help you install Chrome Restlet Client Plugin and Chrome React DevTools Plugin
We will help you learn the basics of Modern JavaScript, Spring Boot and JPA.

Step Wise Details

000 - Full Stack Application with React and Spring Boot - Introduction
000 - Step 00 - Getting Started with the Course

Getting Started with React - Basics with Components

01 Step 01 - Understanding Full Stack Application Architecture
01 Step 02 - Using Create React App to Create and Launch a React Application
01 Step 03 - Importing React App into Visual Studio Code
01 Step 04 - Exploring React Project Structure
01 Step 05 - Introduction to React Components
01 Step 06 - Playing with React Class Components
01 Step 07 - Introduction to Function Components in React
01 Step 08 - Exploring JSX Further - Babel and more
01 Step 09 - Refactoring components to individual modules and Quick Review of JavaScript Modules
01 Step 10 - Exercise - Creating seperate modules for other components

Next Steps with React - Building Counter Application

02 Step 01 - Introduction to Section - Building Counter Application
02 Step 02 - Creating Basic React Counter Component
02 Step 03 - Adding a Button and a Counter to the React Counter Component
02 Step 04 - Handling click event on the increment button
02 Step 05 - Adding State to a React Counter Component
02 Step 06 - Understanding React - Behind the scenes - Virtual Dom
02 Step 07 - Understanding setState and Using Arrow Functions to avoid this binding
02 Step 08 - Defining Inline Javascript CSS in JSX
02 Step 09 - Defining Multiple Counter Buttons and Adding a Component Prop
02 Step 10 - Understanding React Component Props - Default Value and Type Constraints
02 Step 11 - Using React Developer Tools Chrome Plugin
02 Step 12 - Moving State Up - Refactoring to Counter and Counter Button Components
02 Step 13 - Moving State Up - Adding state to Counter Component
02 Step 14 - Best Practice - Using Previous State in setState
02 Step 15 - Adding Decrement Buttons and Reset Button
02 Step 16 - Quick Review of the Counter Example

Combining Spring Boot and React to Build Full Stack Todo Management Application

03 Step 01 - Introduction to Todo Management App
03 Step 02 - Getting Started with Login Component
03 Step 03 - Understanding React Controlled Component - Adding State to Login Component
03 Step 04 - Refactoring to Common Change Event for Multiple Form Elements
03 Step 05 - Adding Hardcoded Authentication to Login Component
03 Step 06 - Understanding Conditional Rendering with && in React JSX
03 Step 07 - Implementing Routing for Login and Welcome Components with React Router
03 Step 08 - Implementing Routing from Login to Welcome Component
03 Step 09 - Adding an Error Component for Invalid URIs
03 Step 10 - Adding Route Parameter for Welcome Component
03 Step 11 - 01 - Creating a Basic React List Todo Component
03 Step 11 - 02 - Adding a Link from Welcome to Todo Page and New Todo Attributes
03 Step 12 - Adding Bootstrap Framework and Creating Components for Header and Footer
03 Step 13 - Using Bootstrap to Create a Menu with Navigation Links
03 Step 14 - Enhancing Footer and Creating Logout Component
03 Step 15 - Styling Login, List Todo and Other Components with CSS and Bootstrap
03 Step 16 - Using Session Storage to Store User Authentication Token
03 Step 17 - Implementing Logout to remove User Authentication Token
03 Step 18 - Enabling Menu Links Based on User Authentication Token
03 Step 19 - Securing Components using Authenticated Route
03 Step 20 - Refactoring React Components into JavaScript Modules
03 Step 21 - Quick Review - Routes, Authenticated Route and Components

Getting Started with Spring Boot REST API Services

03 Step 22 -- What is a Web Service?
03 Step 23 -- Important How Questions related to Web Services
03 Step 24 -- Web Services - Key Terminology
03 Step 25 -- Introduction to RESTful Web Services
03 Step 26 -- Initializing a RESTful Services Project with Spring Boot
03 Step 27 -- Creating a Spring Boot Hello World Service
03 Step 28 -- Enhancing the Spring Boot Hello World Service to return a Bean
03 Step 29 -- Quick Review of Spring Boot Auto Configuration and Dispatcher Servlet - What's happening in the background?
03 Step 30 -- Enhancing the Hello World Service with a Path Variable

Connecting Spring Boot REST API with React Frontend

03 Step 31 - Connecting React with Restful API - 1 - Preparing Welcome Page
03 Step 32 - Connecting React with Restful API - 2 - Understanding Axios HTTP Cleint Framework and Promises
03 Step 33 - Connecting React with Restful API - 3 - Running React App on Port 4200
03 Step 34 - Connecting React with Restful API - 4 - Adding Axios and Creating HelloWorldService
03 Step 35 - Connecting React with Restful API - 5 - Allow Cross Origin Requests From Spring Boot
03 Step 36 - Connecting React with Restful API - 6 - Quick Review
03 Step 37 - Calling Hello World Bean JSON API from React Frontend
03 Step 38 - Calling Hello World HTTP Service with Path Variables
03 Step 39 - Handling API Error Responses in React Frontend
03 Step 40 - Designing RESTful Services for Todo Resource
03 Step 41 -- Creating Spring Boot REST API for retrieving Todo List
03 Step 42 - Connecting React Frontend with Todo List RESTful Service
03 Step 43 - Understanding Important React Lifecycle Methods
03 Step 44 -- Creating Spring Boot REST API to delete a Todo - 1 - Create DELETE Request Method
03 Step 45 -- Creating Spring Boot REST API to delete a Todo - Execute DELETE Request Method
03 Step 46 - Adding Delete Todo Feature to React Frontend
03 Step 47 - Creating Todo Component and Handle Routing
03 Step 48 - Designing Todo Form with moment, Formik and Bootstrap
03 Step 49 - Initializing and Handling Form Submit with Formik
03 Step 50 - Implementing Form Validation with Formik
03 Step 51 - Creating Retrieve Todo Spring Boot API and Connecting React
03 Step 52 -- Creating Spring Boot REST API for Updating Todo - PUT Request Method
03 Step 53 -- Creating Spring Boot REST API for Creating a Todo - POST Request Method
03 Step 54 -- RESTful Web Services - Best Practices
03 Step 55 - Implementing Update Todo Feature in React Frontend
03 Step 56 - Implementing New Todo Feature in React Frontend

Getting Started with Spring Security and Basic Auth

03 Step 57 -- Overview of Security with Basic Auth and JWT
03 Step 58 -- Setting up Spring Security
03 Step 59 -- Configure standard userid and password
03 Step 60 - Enhancing React Welcome Data Service to use Basic Auth
03 Step 61 -- Configure Spring Security to disable CSRF and enable OPTION Requests
03 Step 62 - Creating React Axios Interceptor to add Basic Auth Header
03 Step 63 - Remove Hard Coding of User Credentials
03 Step 64 -- Create Basic Authentication RESTful Service in Spring Boot
03 Step 65 - Enhance React Frontend to use Basic Auth API to Validate Login Credentials

Getting Started with JWT

03 Step 66 -- Introduction to JWT
03 Step 67 - Importing JWT Framework into Eclipse
03 Step 68 - Quick Tip - Resolving JWT Compilation Errors
03 Step 69 -- Executing JWT Resources - Get Token and Refresh Token
03 Step 70 -- Understanding JWT Spring Security Framework Setup
03 Step 71 -- Creating a New User with Encoded Password
03 Step 72 - Using JWT Token in React Frontend
03 Step 73 - Best Practice - Use Constants for URLs and Tokens

Integrating with the Backend using JPA and Hibernate

03 Step 74 -- Setting up Todo Entity and Populating Data
03 Step 75 - Connecting React with GET REST APIs connected to JPA Repository
03 Step 76 - Connecting POST, PUT and DELETE REST APIs to JPA Repository
03 Step 77 - Connecting React Frontend with JPA POST, PUT and DELETE REST APIs

Spring Boot in 10 Steps

Introduction to Spring Boot in 10 Steps
Step 01 - Introduction to Spring Boot - Goals and Important Features
Step 02 - Developing Spring Applications before Spring Boot
Step 03 - Using Spring Initializr to create a Spring Boot Application
Step 04 - Creating a Simple REST Controller
Step 05 - What is Spring Boot Auto Configuration?
Step 06 - Spring Boot vs Spring vs Spring MVC
Step 07 - Spring Boot Starter Projects - Starter Web and Starter JPA
Step 08 - Overview of different Spring Boot Starter Projects
Step 09 - Spring Boot Actuator
Step 10 - Spring Boot Developer Tools

First 10 Steps in JPA with H2 in-memory database

Introduction to JPA in 10 Steps
Step 01 - Object Relational Impedence Mismatch - Understanding the problem that JPA solves
Step 02 - World before JPA - JDBC, Spring JDBC and myBatis
Step 03 - Introduction to JPA
Step 04 - Creating a JPA Project using Spring Initializr
Step 05 - Defining a JPA Entity - User
Step 06 - Defining a Service to manage the Entity - UserService and EntityManager
Step 07 - Using a Command Line Runner to save the User to database.
Step 08 - Magic of Spring Boot and In Memory Database H2
Step 09 - Introduction to Spring Data JPA
Step 10 - More JPA Repository - findById and findAll

for file in *; do mv "${file}" "${file//-/ }"; done
for file in *; do mv "${file}" "${file//   / - }"; done
for file in *; do mv "${file}" "${file//01 Step/Step}"; done

Code Snippets

Core JWT Components

jwt.signing.key.secret=mySecret
jwt.get.token.uri=/authenticate
jwt.refresh.token.uri=/refresh
jwt.http.request.header=Authorization
jwt.token.expiration.in.seconds=604800

package com.in28minutes.todoservices.jwt;

import java.util.ArrayList;
import java.util.List;
import java.util.Optional;

import org.springframework.security.core.userdetails.UserDetails;
import org.springframework.security.core.userdetails.UserDetailsService;
import org.springframework.security.core.userdetails.UsernameNotFoundException;
import org.springframework.stereotype.Service;

@Service
public class JwtInMemoryUserDetailsService implements UserDetailsService {

  static List<JwtUserDetails> inMemoryUserList = new ArrayList<>();

  static {
    inMemoryUserList.add(new JwtUserDetails(1L, "in28minutes",
        "$2a$10$3zHzb.Npv1hfZbLEU5qsdOju/tk2je6W6PnNnY.c1ujWPcZh4PL6e", "ROLE_USER_2"));
  }

  @Override
  public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {
    Optional<JwtUserDetails> findFirst = inMemoryUserList.stream()
        .filter(user -> user.getUsername().equals(username)).findFirst();

    if (!findFirst.isPresent()) {
      throw new UsernameNotFoundException(String.format("USER_NOT_FOUND '%s'.", username));
    }

    return findFirst.get();
  }

}


@Component
public class JwtTokenAuthorizationOncePerRequestFilter extends OncePerRequestFilter {

    private final Logger logger = LoggerFactory.getLogger(this.getClass());

    @Autowired
    private UserDetailsService jwtInMemoryUserDetailsService;
    
    @Autowired
    private JwtTokenUtil jwtTokenUtil;
    
    @Value("${jwt.http.request.header}")
    private String tokenHeader;

    @Override
    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain chain) throws ServletException, IOException {
        logger.debug("Authentication Request For '{}'", request.getRequestURL());

        final String requestTokenHeader = request.getHeader(this.tokenHeader);

        String username = null;
        String jwtToken = null;
        if (requestTokenHeader != null && requestTokenHeader.startsWith("Bearer ")) {
            jwtToken = requestTokenHeader.substring(7);
            try {
                username = jwtTokenUtil.getUsernameFromToken(jwtToken);
            } catch (IllegalArgumentException e) {
                logger.error("JWT_TOKEN_UNABLE_TO_GET_USERNAME", e);
            } catch (ExpiredJwtException e) {
                logger.warn("JWT_TOKEN_EXPIRED", e);
            }
        } else {
            logger.warn("JWT_TOKEN_DOES_NOT_START_WITH_BEARER_STRING");
        }

        logger.debug("JWT_TOKEN_USERNAME_VALUE '{}'", username);
        if (username != null && SecurityContextHolder.getContext().getAuthentication() == null) {

            UserDetails userDetails = this.jwtInMemoryUserDetailsService.loadUserByUsername(username);

            if (jwtTokenUtil.validateToken(jwtToken, userDetails)) {
                UsernamePasswordAuthenticationToken usernamePasswordAuthenticationToken = new UsernamePasswordAuthenticationToken(userDetails, null, userDetails.getAuthorities());
                usernamePasswordAuthenticationToken.setDetails(new WebAuthenticationDetailsSource().buildDetails(request));
                SecurityContextHolder.getContext().setAuthentication(usernamePasswordAuthenticationToken);
            }
        }

        chain.doFilter(request, response);
    }
}


@Component
public class JwtTokenUtil implements Serializable {

  static final String CLAIM_KEY_USERNAME = "sub";
  static final String CLAIM_KEY_CREATED = "iat";
  private static final long serialVersionUID = -3301605591108950415L;
  private Clock clock = DefaultClock.INSTANCE;

  @Value("${jwt.signing.key.secret}")
  private String secret;

  @Value("${jwt.token.expiration.in.seconds}")
  private Long expiration;

  public String getUsernameFromToken(String token) {
    return getClaimFromToken(token, Claims::getSubject);
  }

  public Date getIssuedAtDateFromToken(String token) {
    return getClaimFromToken(token, Claims::getIssuedAt);
  }

  public Date getExpirationDateFromToken(String token) {
    return getClaimFromToken(token, Claims::getExpiration);
  }

  public <T> T getClaimFromToken(String token, Function<Claims, T> claimsResolver) {
    final Claims claims = getAllClaimsFromToken(token);
    return claimsResolver.apply(claims);
  }

  private Claims getAllClaimsFromToken(String token) {
    return Jwts.parser().setSigningKey(secret).parseClaimsJws(token).getBody();
  }

  private Boolean isTokenExpired(String token) {
    final Date expiration = getExpirationDateFromToken(token);
    return expiration.before(clock.now());
  }

  private Boolean ignoreTokenExpiration(String token) {
    // here you specify tokens, for that the expiration is ignored
    return false;
  }

  public String generateToken(UserDetails userDetails) {
    Map<String, Object> claims = new HashMap<>();
    return doGenerateToken(claims, userDetails.getUsername());
  }

  private String doGenerateToken(Map<String, Object> claims, String subject) {
    final Date createdDate = clock.now();
    final Date expirationDate = calculateExpirationDate(createdDate);

    return Jwts.builder().setClaims(claims).setSubject(subject).setIssuedAt(createdDate)
        .setExpiration(expirationDate).signWith(SignatureAlgorithm.HS512, secret).compact();
  }

  public Boolean canTokenBeRefreshed(String token) {
    return (!isTokenExpired(token) || ignoreTokenExpiration(token));
  }

  public String refreshToken(String token) {
    final Date createdDate = clock.now();
    final Date expirationDate = calculateExpirationDate(createdDate);

    final Claims claims = getAllClaimsFromToken(token);
    claims.setIssuedAt(createdDate);
    claims.setExpiration(expirationDate);

    return Jwts.builder().setClaims(claims).signWith(SignatureAlgorithm.HS512, secret).compact();
  }

  public Boolean validateToken(String token, UserDetails userDetails) {
    JwtUserDetails user = (JwtUserDetails) userDetails;
    final String username = getUsernameFromToken(token);
    return (username.equals(user.getUsername()) && !isTokenExpired(token));
  }

  private Date calculateExpirationDate(Date createdDate) {
    return new Date(createdDate.getTime() + expiration * 1000);
  }
}

@Component
public class JwtUnAuthorizedResponseAuthenticationEntryPoint implements AuthenticationEntryPoint, Serializable {

  private static final long serialVersionUID = -8970718410437077606L;

  @Override
  public void commence(HttpServletRequest request, HttpServletResponse response,
      AuthenticationException authException) throws IOException {
    response.sendError(HttpServletResponse.SC_UNAUTHORIZED,
        "You would need to provide the Jwt Token to Access This resource");
  }
}


public class JwtUserDetails implements UserDetails {

  private static final long serialVersionUID = 5155720064139820502L;

  private final Long id;
  private final String username;
  private final String password;
  private final Collection<? extends GrantedAuthority> authorities;

  public JwtUserDetails(Long id, String username, String password, String role) {
    this.id = id;
    this.username = username;
    this.password = password;

    List<SimpleGrantedAuthority> authorities = new ArrayList<SimpleGrantedAuthority>();
    authorities.add(new SimpleGrantedAuthority(role));

    this.authorities = authorities;
  }

  @JsonIgnore
  public Long getId() {
    return id;
  }

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

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

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

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

  @JsonIgnore
  @Override
  public String getPassword() {
    return password;
  }

  @Override
  public Collection<? extends GrantedAuthority> getAuthorities() {
    return authorities;
  }

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

}


@Configuration
@EnableWebSecurity
@EnableGlobalMethodSecurity(prePostEnabled = true)
public class JWTWebSecurityConfig extends WebSecurityConfigurerAdapter {

    @Autowired
    private JwtUnAuthorizedResponseAuthenticationEntryPoint jwtUnAuthorizedResponseAuthenticationEntryPoint;

    @Autowired
    private UserDetailsService jwtInMemoryUserDetailsService;

    @Autowired
    private JwtTokenAuthorizationOncePerRequestFilter jwtAuthenticationTokenFilter;

    @Value("${jwt.get.token.uri}")
    private String authenticationPath;

    @Autowired
    public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception {
        auth
            .userDetailsService(jwtInMemoryUserDetailsService)
            .passwordEncoder(new BCryptPasswordEncoder());
    }

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

    @Bean
    @Override
    public AuthenticationManager authenticationManagerBean() throws Exception {
        return super.authenticationManagerBean();
    }

    @Override
    protected void configure(HttpSecurity httpSecurity) throws Exception {
        httpSecurity
            .csrf().disable()
            .exceptionHandling().authenticationEntryPoint(jwtUnAuthorizedResponseAuthenticationEntryPoint).and()
            .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS).and()
            .authorizeRequests()
            .anyRequest().authenticated();

       httpSecurity
            .addFilterBefore(jwtAuthenticationTokenFilter, UsernamePasswordAuthenticationFilter.class);
        
        httpSecurity
            .headers()
            .frameOptions().sameOrigin()  //H2 Console Needs this setting
            .cacheControl(); //disable caching
    }

    @Override
    public void configure(WebSecurity webSecurity) throws Exception {
        webSecurity
            .ignoring()
            .antMatchers(
                HttpMethod.POST,
                authenticationPath
            )
            .antMatchers(HttpMethod.OPTIONS, "/**")
            .and()
            .ignoring()
            .antMatchers(
                HttpMethod.GET,
                "/" //Other Stuff You want to Ignore
            )
            .and()
            .ignoring()
            .antMatchers("/h2-console/**/**");//Should not be in Production!
    }
}

@RestController
@CrossOrigin(origins="http://localhost:4200")
public class JwtAuthenticationRestController {

  @Value("${jwt.http.request.header}")
  private String tokenHeader;

  @Autowired
  private AuthenticationManager authenticationManager;

  @Autowired
  private JwtTokenUtil jwtTokenUtil;

  @Autowired
  private UserDetailsService jwtInMemoryUserDetailsService;

  @RequestMapping(value = "${jwt.get.token.uri}", method = RequestMethod.POST)
  public ResponseEntity<?> createAuthenticationToken(@RequestBody JwtTokenRequest authenticationRequest)
      throws AuthenticationException {

    authenticate(authenticationRequest.getUsername(), authenticationRequest.getPassword());

    final UserDetails userDetails = jwtInMemoryUserDetailsService.loadUserByUsername(authenticationRequest.getUsername());

    final String token = jwtTokenUtil.generateToken(userDetails);

    return ResponseEntity.ok(new JwtTokenResponse(token));
  }

  @RequestMapping(value = "${jwt.refresh.token.uri}", method = RequestMethod.GET)
  public ResponseEntity<?> refreshAndGetAuthenticationToken(HttpServletRequest request) {
    String authToken = request.getHeader(tokenHeader);
    final String token = authToken.substring(7);
    String username = jwtTokenUtil.getUsernameFromToken(token);
    JwtUserDetails user = (JwtUserDetails) jwtInMemoryUserDetailsService.loadUserByUsername(username);

    if (jwtTokenUtil.canTokenBeRefreshed(token)) {
      String refreshedToken = jwtTokenUtil.refreshToken(token);
      return ResponseEntity.ok(new JwtTokenResponse(refreshedToken));
    } else {
      return ResponseEntity.badRequest().body(null);
    }
  }

  @ExceptionHandler({ AuthenticationException.class })
  public ResponseEntity<String> handleAuthenticationException(AuthenticationException e) {
    return ResponseEntity.status(HttpStatus.UNAUTHORIZED).body(e.getMessage());
  }

  private void authenticate(String username, String password) {
    Objects.requireNonNull(username);
    Objects.requireNonNull(password);

    try {
      authenticationManager.authenticate(new UsernamePasswordAuthenticationToken(username, password));
    } catch (DisabledException e) {
      throw new AuthenticationException("USER_DISABLED", e);
    } catch (BadCredentialsException e) {
      throw new AuthenticationException("INVALID_CREDENTIALS", e);
    }
  }
}

public class AuthenticationException extends RuntimeException {
    public AuthenticationException(String message, Throwable cause) {
        super(message, cause);
    }
}

public class  JwtTokenRequest implements Serializable {
  
  private static final long serialVersionUID = -5616176897013108345L;

  private String username;
    private String password;

    public JwtTokenRequest() {
        super();
    }

    public JwtTokenRequest(String username, String password) {
        this.setUsername(username);
        this.setPassword(password);
    }

    public String getUsername() {
        return this.username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return this.password;
    }

    public void setPassword(String password) {
        this.password = password;
    }
}

public class JwtTokenResponse implements Serializable {

  private static final long serialVersionUID = 8317676219297719109L;

  private final String token;

    public JwtTokenResponse(String token) {
        this.token = token;
    }

    public String getToken() {
        return this.token;
    }
}

Course Recording Notes

Preview Video

Welcome to course on *** in ** simple steps.
I'm Ranga Karanam. I've so and so much experience with ... I've been using this framework for ...
At in28minutes, we ask one question everyday - How to create more effective courses? All our success - *** students on Udemy and *** subscribers on Youtube - is a result of this pursuit of excellence.
You will develop *** and *** using ***
You will learn the basics like *** and move on to the advanced concepts like ***.
You will use
- ... todo ...
- Maven for dependency management, building and running the application in tomcat.
- Eclipse IDE
All the code for this course and the step by step details are in our Github repository.
We have an awesome installation guide to help you install Maven and Eclipse. You are NOT expected to have any experience with Eclipse, Maven, or Tomcat.
What are we waiting for? Lets have some fun with *** in *** steps. We had a lot of fun creating this course for you and We are confident that you will have a lot of fun. I hope you are as excited as we are to learn more. Go ahead and enroll for the course. Or take a test drive with a free preview. See you in the course.

Course Intro Video

Welcome to this course on ***. We are excited to teach you how to build awesome ***.
In this video, we introduce you to the different sections of the course. By the end of the video you should have a clear idea of how to make the best use of the course.
We have organized this course into 6 different sections. We have designed each section to be independent of each other. That means, you have the flexibility of customizing the course based on your skills and your needs.
If you have experience with Spring and Spring Boot, you can skip these sections.
Lets get a quick overview of each of the sections now:
- Section I is an one hour introduction to Spring
- Section II is an one hour introduction to Spring Boot..
In summary this is your course. Feel free to create your own path and tailor it to your needs.
I will see you in the next video where we introduce you to our github repository

Overview of the Github Repository

Welcome Back. In this video, we give you an overview of how our github repository for this course is organized.
Github repository for this course is at ****.
Home page of the github repository has an overview of the course and installation guide
For each hands-on section of the course, we have a seperate folder in the repository. You can see these five folders for *** different sections
- Folder 1 contains ...
- Folder 2 contains ...
- Folder 3 contains ...
Each of these folders contain
- Step by Step details of the sections
- Complete code example at the end of the section
- Intermediate backups at different stages of the section
- Useful Links
For example, let's look at the folder for ***. Home page of the folder contains
- Step by step details : What are we going to do in each step
- Useful Links : Different links that would be useful during the course
- Complete Code, Snippets and Examples : Example code that your can use during the section. For example, If you are using a class and you do not know the package of the class, you can search here and quickly find what you would need.
- Intermediate Backups : You can download any of these zips and import them into Eclipse as maven projects. File > Import > Existing Maven Projects.
- Understanding our github repository is key part of making best use of this course. I recommend to spend some time with our github repository and I will see you in the next video.

Installation of Tools Video

In this video, we will help you install all the basic tools to get you started with the course
We use
- Maven for Dependency Management
- Eclipse as IDE
- ..
Step by step details to install Java, Eclipse and Maven are in the installation guide present here. Also included are links to 5 videos that will help you to install and trouble shoot installations.
If you have any problems during the course, we recommend you to look at the troubleshooting section of the installation playlist.
Get your tools ready and I will see you in the course

Each Section Introduction

Why is this section important to the course?
What is discussed in this section?
What is the github folder for this section?
Can a student skip this sections?
Is there a trouble shooting guide?
What are the backups available?
Are examples in this section dependent on any other section?

Conclusion Video

Congratulations! You have successfully completed the course on ... We covered a wide range of topics starting from Spring, Spring Boot to ..... I'm sure you had a lot of fun doing this course. If you loved this course, we would love to hear from you. Do not forget to leave us a review. Until we see you in another in28minutes course, here's bye from the team here at in28minutes.
To find out more about *** use these References

Templates

Welcome Message


## ADD A FEW SAMPLE REVIEWS AFter a couple of months
## ADD A FEW SAMPLE REVIEWS - in the description of the course 

Congratulations on joining this course from in28Minutes. 

There are three things you need to understand before you start this course!

1...... Listen + See + Do Hands-on + Repeat = 90% Retention
For the first 2 hours, we repeat a few concepts to help you retain them. .

2...... Set Yourself a Goal
Set 1 hour aside every day for the next week for this course! No exceptions allowed :) 

3...... Udemy asks you for a review very early in the course! If you are not ready for giving a review, you can skip giving a review.

Thank you and enjoy the course,
Ranga From in28Minutes

Thank You for completing the course message

Congratulations on completing the course from in28Minutes.

Good Luck for your future.

Thank you ,
Ranga from in28Minutes

Bonus Lectures

TITLE : Bonus Lecture : Coupons for My Best-Selling Courses -30 Day Money Back Guarantee

I hope you enjoyed it! 

Connect and share your success (Course Completion Certificate) on Linked In - https://www.linkedin.com/in/rangakaranam/

Here are coupons for many of my best-selling courses. Please click the images/courses below to watch the course video previews (all of these courses have 30-day 100% money back guarantees):

- Copy relevant courses from https://github.com/in28minutes/learn

Other Courses

300+ Videos and Courses - https://github.com/in28minutes/learn
25 Videos and Articles for Beginners on Spring Boot

About in28Minutes

At in28Minutes, we ask ourselves one question everyday. How do we help you learn effectively - that is more quickly and retain more of what you have learnt?
We use Problem-Solution based Step-By-Step Hands-on Approach With Practical, Real World Application Examples.
Our success on Udemy and Youtube (2 Million Views & 12K Subscribers) speaks volumes about the success of our approach.
While our primary expertise is on Development, Design & Architecture Java & Related Frameworks (Spring, Struts, Hibernate) we are expanding into the front-end world (Bootstrap, JQuery, React JS).

Our Beliefs

Best Courses are interactive and fun.
Foundations for building high quality applications are best laid down while learning.

Our Approach

Problem Solution based Step by Step Hands-on Learning
Practical, Real World Application Examples.
We use 80-20 Rule. We discuss 20% things used 80% of time in depth. We touch upon other things briefly equipping you with enough knowledge to find out more on your own.
We will be developing a demo application in the course, which could be reused in your projects, saving hours of your effort.
We love open source and therefore, All our code is open source too and available on Github.

Troubleshooting

Rangas-MacBook-Pro:04-10-2018 rangaraokaranam$ node -v

Rangas-MacBook-Pro:04-10-2018 rangaraokaranam$ npm -v
6.4.1

#Global
npm uninstall -g React-cli
npm cache verify
npm install -g @React/[email protected]

#Inside the project - If you had an earlier version of React cli
rm -rf node_modules
npm uninstall --save-dev React-cli
npm install --save-dev @React/cli@latest
npm install

Why Visual Studio Code?
- https://trends.google.com/trends/explore?date=all&q=%2Fm%2F0k2kj45,%2Fm%2F0_x5x3g,%2Fm%2F0134xwrk,%2Fm%2F0b6h18n
We use Light Theme
Install
- Auto Import - Automatically finds, parses and provides code actions and code completion for all available imports. Works with Typescript and TSX
- Reload to Activate

What You will Learn?

Big Picture

What is the High Level Architecture of our Full Stack Application?
What is an SPA?
What is React?

TypeScript and JavaScript

I'm new to TypeScript. Will I be able to adapt to it?
How does a JavaScript Class compare to a Java Class?
- Packages vs Modules
- import statements
- Decorator vs Annotation
What is a JavaScript Module?
How does JavaScript Syntax compare to Java Syntax?
- Arrays - Filtering, Spread Operator and Functional Stuff
- Custom Objects

React Basics

What is React Component?
What are the conventions for file extensions in React Projects?
How do you build forms in React? How do you do Form Validation?
What is Routing?
How do you implement Routing in React?
How do you call HTTP Services in React?

Running React Applications

What is Root Component? What are Bootstrap Components? How is the React Application Bootstrapped? \src\index.html, \src\main.ts, AppModule, AppComponent
Do Browsers understand JSX? How does JSX code get converted to JavaScript code?

Automated Tests and Code Quality

What are unit tests? How are unit tests organized in React? How is different from Java?
How can you run tests? \src\karma.conf.ts
What are coding standards? How can you check coding standards for React Cli Project? What is Lint? What is Linting? Is there a Standard Style Guide for React? \tslint.json
How can I run coding standards check for React Projects?

Course Details

Request URLs and Examples

Common Headers

Origin - http://localhost:4200
Content-Type - application/json
Authorization 
- Bearer *** or
- Basic *****

Retrieve all todos for a user

GET - http://localhost:8080/users/in28minutes/todos

[
  {
    id: 1,
    username: "in28minutes",
    description: "Learn to Dance 2",
    targetDate: "2018-11-09T12:05:18.647+0000",
   : false,
  },
  {
    id: 2,
    username: "in28minutes",
    description: "Learn about Microservices 2",
    targetDate: "2018-11-09T12:05:18.647+0000",
   : false,
  },
  {
    id: 3,
    username: "in28minutes",
    description: "Learn about React",
    targetDate: "2018-11-09T12:05:18.647+0000",
   : false,
  },
]

Retrieve a specific todo

GET - http://localhost:8080/users/in28minutes/todos/1

{
  id: 1,
  username: "in28minutes",
  description: "Learn to Dance 2",
  targetDate: "2018-11-09T12:05:18.647+0000",
 : false,
}

Creating a new todo

POST to http://localhost:8080/users/in28minutes/todos with BODY of Request given below

{
  "username": "in28minutes",
  "description": "Learn to Drive a Car",
  "targetDate": "2018-11-09T10:49:23.566+0000",
  "done": false
}

Updating a new todo

http://localhost:8080/users/in28minutes/todos/1 with BODY of Request given below

{
  "id": 1
  "username": "in28minutes",
  "description": "Learn to Drive a Car",
  "targetDate": "2018-11-09T10:49:23.566+0000",
  "done": false
}

Delete todo

DELETE to http://localhost:8080/users/in28minutes/todos/1

JWT Authenticate

POST to http://localhost:8080/authenticate

{
  "username":"ranga",
  "password":"password@!23@#!"
}

Response

{
"token": "eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJyYW5nYSIsImV4cCI6MTU0MjQ3MjA3NCwiaWF0IjoxNTQxODY3Mjc0fQ.kD6UJQyxjSPMzAhoTJRr-Z5UL-FfgsyxbdseWQvk0fLi7eVXAKhBkWfj06SwH43sY_ZWBEeLuxaE09szTboefw"
}

Other URLS

Refresh - http://localhost:8080/authenticate

Useful Links

Connection to MySQL

create sequence hibernate_sequence start with 1 increment by 1

create table todo (
    id bigint not null, 
    description varchar(255), 
    is_done boolean not null, 
    target_date timestamp, 
    username varchar(255), 
    primary key (id))

Diagrams

Courtesy http://viz-js.com/


digraph architecture {
node[style=filled,color="#59C8DE",fontsize=20]
//node [style=filled,color="#D14D28", fontcolor=white];
edge [fontsize=6 ];

VIRTUALDOM[label=<Virtual DOM>];
DOM
REACTAPP[label=<App>];

{rank=same; DOM, REACTAPP};

VIRTUALDOM -> DOM [ label="diff & update" ];
REACTAPP -> VIRTUALDOM [ label="creates" ];
DOM -> REACTAPP [ label="events" ];

}

digraph architecture {
node[style=filled,color="#59C8DE",fontsize=20]
//node [style=filled,color="#D14D28", fontcolor=white];
edge [fontsize=9 ];
{rank=same; Actions, Reducers, Store};

Actions -> Reducers
View -> Actions [ label="dispatch" ];
Store -> View [label ="subscribe"]
Reducers -> Store

}


  
graph architecture {
node[style=filled,color="#59C8DE"]
//node [style=filled,color="#D14D28", fontcolor=white];
rankdir = TB;
node[shape=record]

FRONTEND[label=<React Application<BR />
   <FONT POINT-SIZE="9">Modern JavaScript - ES6</FONT>>];

REST[label=<RESTFUL API<BR />
   <FONT POINT-SIZE="9">Spring Boot on Java</FONT>>];

DB[label=<Database>];

FRONTEND -- REST -- DB
DB[shape=cylinder]
}

digraph architecture {
node[style=filled,color="#59C8DE"]
//node [style=filled,color="#D14D28", fontcolor=white];
rankdir = TB;
node[shape=record]

FRONTEND[label=<React Application<BR />
   <FONT POINT-SIZE="9">JavaScript</FONT>>];

MODULE0[label=<Components>];

MODULE1[label=<Libraries>];

COMPONENT01[label=<Login>];
COMPONENT02[label=<Logout>];
COMPONENT03[label=<ListTodo>];
COMPONENT04[label=<Todo>];
COMPONENT05[label=<Header>];
COMPONENT06[label=<Footer>];
COMPONENT07[label=<Menu>];

COMPONENT11[label=<Formik>];
COMPONENT12[label=<Axios>];
COMPONENT13[label=<ReactRouter>];

FRONTEND -> MODULE0
FRONTEND -> MODULE1

MODULE0 -> COMPONENT01
MODULE0 -> COMPONENT02
MODULE0 -> COMPONENT03
MODULE0 -> COMPONENT04
MODULE0 -> COMPONENT05
MODULE0 -> COMPONENT06
MODULE0 -> COMPONENT07

MODULE1 -> COMPONENT11
MODULE1 -> COMPONENT12
MODULE1 -> COMPONENT13

}


graph architecture {

node[style=filled,color="#59C8DE"]
//node [style=filled,color="#D14D28", fontcolor=white];
rankdir = TB;
node[shape=record]

COMPONENT[label=<Component>];

View[label=<View<BR />
   <FONT POINT-SIZE="9">JSX or Javascript</FONT>>];
Logic[label=<Logic<BR />
   <FONT POINT-SIZE="9">Javascript</FONT>>];
Styling[label=<Styling<BR />
   <FONT POINT-SIZE="9">CSS</FONT>>];
State[label=<State<BR />
   <FONT POINT-SIZE="9">Internal Data Store</FONT>>];
Props[label=<Props<BR />
   <FONT POINT-SIZE="9">Pass Data</FONT>>];

COMPONENT -- View
COMPONENT -- Logic
COMPONENT -- Styling
COMPONENT -- State
COMPONENT -- Props
}

graph architecture {

node[style=filled,color="#59C8DE"]
//node [style=filled,color="#D14D28", fontcolor=white];
rankdir = TB;
node[shape=record]

React -- Components
Components -- JSX
Components -- State
Components -- Props
React -- Features
Features -- Routing
Features -- Forms
Features -- RestAPICalls
Features -- Authentication

RestAPICalls[label=<Rest API Calls>]
Forms[label=<Forms and Validation>]

}

Todo

Debugging with Visual Studio Code
- To debug the client side React code, we'll need to install the Debugger for Chrome extension - https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
- Open the Extensions view (⇧⌘X or Ctrl+Shift+X)
- Type Debugger for Chrome
- Install
- Reload
- Go to the Debug view (⇧⌘D or Ctrl+Shift+D)
- Click on gear button to create launch.json
- Choose Chrome from the Select Environment dropdown
- Set URL to "url": "http://localhost:4200"
Running Examples
- Download the zip or clone the Git repository.
- Unzip the zip file (if you downloaded one)
- Open Command Prompt and Change directory (cd) to folder containing pom.xml
- Open Eclipse
  - File -> Import -> Existing Maven Project -> Navigate to the folder where you unzipped the zip
  - Select the right project
- Choose the Spring Boot Application file (search for file with @SpringBootApplication)
- Right Click on the file and Run as Java Application
- You are all Set
- For help : use our installation guide - https://www.youtube.com/playlist?list=PLBBog2r6uMCSmMVTW_QmDLyASBvovyAO3

Next Steps

React
- Why we need to bind event handlers in Class Components in React?
  - https://medium.freecodecamp.org/this-is-why-we-need-to-bind-event-handlers-in-class-components-in-react-f7ea1a6f93eb
- class vs className - A discussion
  - https://stackoverflow.com/questions/46989454/class-vs-classname-in-react-16
Modern JavaScript
React

in28minutes/full-stack-with-react-and-spring-boot

in28minutes

Reviews

Repository Details