How do I do client side authentication check with React front end and Spring Boot security backend?

Question

I've got the spring boot security dependency set up

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

I've also restricted some pages in my WebSecurityConfigAdapter e.g.

  http
        .authorizeRequests()                 
        .antMatchers("/").permitAll()
        .antMatchers("/admin/**").hasRole("ADMIN")

(I've also done the various other boilerplate setup of UsersDetailsService etc.)

In a traditional front end where I'm using html/thymeleaf I can simply do something like this to display a logout link, if the user is logged in.

 <form sec:authorize="isAuthenticated()" id="frmlogout" th:action="@{/logout}" method="post" class="form-inline">
        <a href="javascript:{}" onclick="document.getElementById('frmlogout').submit(); return false;">Logout</a>
 </form>

Question is, how can I do a similar "isAuthenticated()" check (as well as a role check) from my react .js classes? Is it even possible?

The desired outcome is so that I can then add the logout button to my navbar, which is defined in my .js classes.

Check this question - https://stackoverflow.com/questions/43164554/how-to-implement-authenticated-routes-in-react-router-4 — Taras Yaremkiv, Sep 02 '17 at 11:39

score 3 · Answer 1 · answered Sep 02 '17 at 20:26

This post on React.js + Spring Security shows an approach of using a session cookie which is the traditional way of securing communication in spring mvc.

Or you could use Basic Auth for your API and implement the login logic in React. If a call to the API results in a HTTP 401 Unauthenticated then ask the user to provide credentials and use the in react to call the API.

How do I do client side authentication check with React front end and Spring Boot security backend?

1 Answers1