1. Overview
In this tutorial – we’ll replace the Reddit backed OAuth2 authentication process with a simpler, form-based login. We’ll still be able to authenticate the application with Reddit, we’ll just not use Reddit to drive our main login flow.
2. Basic User Registration
First, let’s replace the old authentication flow.
2.1. The User Entity
We’ll make a few changes to the User entity: make the username unique, add a password field (temporary) and implement UserDetails interface:
@Entity public class User implements UserDetails{ ... @Column(nullable = false, unique = true) private String username; private String password; @Override public Collection<? extends GrantedAuthority> getAuthorities() { return Arrays.asList(new SimpleGrantedAuthority("ROLE_USER")); } @Override public boolean isAccountNonExpired() { return true; } @Override public boolean isAccountNonLocked() { return true; } @Override public boolean isCredentialsNonExpired() { return true; } @Override public boolean isEnabled() { return true; } ... }
2.2. Register A New User
Next – let’s see how to register a new user in the backend:
@Controller @RequestMapping(value = "/user") public class UserController { @Autowired private UserService service; @RequestMapping(value = "/register", method = RequestMethod.POST) @ResponseStatus(HttpStatus.OK) public void register( @RequestParam("username") String username, @RequestParam("email") String email, @RequestParam("password") String password) { service.registerNewUser(username, email, password); } }
Obviously this is a basic create operation for the user – no bells and whistles.
Here’s the actual implementation, in the service layer:
@Service public class UserService { @Autowired private UserRepository userRepository; @Autowired private PreferenceRepository preferenceReopsitory; @Autowired private PasswordEncoder passwordEncoder; @Override public void registerNewUser(String username, String email, String password) { User existingUser = userRepository.findByUsername(username); if (existingUser != null) { throw new UsernameAlreadyExistsException("Username already exists"); } User user = new User(); user.setUsername(username); user.setPassword(passwordEncoder.encode(password)); Preference pref = new Preference(); pref.setTimezone(TimeZone.getDefault().getID()); pref.setEmail(email); preferenceReopsitory.save(pref); user.setPreference(pref); userRepository.save(user); } }
2.3. Dealing with Exceptions
And the simple UserAlreadyExistsException:
public class UsernameAlreadyExistsException extends RuntimeException { public UsernameAlreadyExistsException(String message) { super(message); } public UsernameAlreadyExistsException(String message, Throwable cause) { super(message, cause); } }
The exception is dealt with in the main exception handler of the application:
@ExceptionHandler({ UsernameAlreadyExistsException.class }) public ResponseEntity<Object> handleUsernameAlreadyExists(RuntimeException ex, WebRequest request) { logger.error("400 Status Code", ex); String bodyOfResponse = ex.getLocalizedMessage(); return new ResponseEntity<Object>(bodyOfResponse, new HttpHeaders(), HttpStatus.BAD_REQUEST); }
2.4. A Simple Register Page
Finally – a simple front-end signup.html:
<form> <input id="username"/> <input id="email"/> <input type="password" id="password" /> <button onclick="register()">Sign up</button> </form> <script> function register(){ $.post("user/register", {username: $("#username").val(), email: $("#email").val(), password: $("#password").val()}, function (data){ window.location.href= "./"; }).fail(function(error){ alert("Error: "+ error.responseText); }); } </script>
It’s worth mentioning again that this isn’t a fully mature registration process – just a very quick flow. For a complete registration flow, you can check out the main registration series here on Baeldung.
3. New Login Page
Here is our new and simple login page:
<div th:if="${param.containsKey('error')}"> Invalid username or password </div> <form method="post" action="j_spring_security_check"> <input name="username" /> <input type="password" name="password"/> <button type="submit" >Login</button> </form> <a href="signup">Sign up</a>
4. Security Configuration
Now – let’s take a look at the new security configuration:
@Configuration @EnableWebSecurity @ComponentScan({ "org.baeldung.security" }) public class SecurityConfig extends WebSecurityConfigurerAdapter { @Autowired private MyUserDetailsService userDetailsService; @Override protected void configure(AuthenticationManagerBuilder auth) throws Exception { auth.userDetailsService(userDetailsService).passwordEncoder(encoder()); } @Override protected void configure(HttpSecurity http) throws Exception { http ... .formLogin() .loginPage("/") .loginProcessingUrl("/j_spring_security_check") .defaultSuccessUrl("/home") .failureUrl("/?error=true") .usernameParameter("username") .passwordParameter("password") ... } @Bean public PasswordEncoder encoder() { return new BCryptPasswordEncoder(11); } }
Most things are pretty straightforward, so we won’t go over them in detail here.
And here’s the custom UserDetailsService:
@Service public class MyUserDetailsService implements UserDetailsService { @Autowired private UserRepository userRepository; @Override public UserDetails loadUserByUsername(String username) { User user = userRepository.findByUsername(username); if (user == null) { return new User(); } return user; } }
Note: We used our custom User entity instead of Spring Security default User.
5. Authenticate Reddit
Now that we’re no longer relying on Reddit for our authentication flow, we need to enable users to connect their accounts to Reddit after they log in.
First – we need to modify the old Reddit login logic:
@RequestMapping("/redditLogin") public String redditLogin() { OAuth2AccessToken token = redditTemplate.getAccessToken(); service.connectReddit(redditTemplate.needsCaptcha(), token); return "redirect:home"; }
And the actual implementation – the connectReddit() method:
@Override public void connectReddit(boolean needsCaptcha, OAuth2AccessToken token) { User currentUser = (User) SecurityContextHolder.getContext().getAuthentication().getPrincipal(); currentUser.setNeedCaptcha(needsCaptcha); currentUser.setAccessToken(token.getValue()); currentUser.setRefreshToken(token.getRefreshToken().getValue()); currentUser.setTokenExpiration(token.getExpiration()); userRepository.save(currentUser); }
Note how the redditLogin() logic is now used to connect the user’s account in our system with his Reddit account by obtaining the user’s AccessToken.
As for the frontend – that’s quite simple:
<h1>Welcome, <a href="profile" sec:authentication="principal.username">Bob</a></small> </h1> <a th:if="${#authentication.principal.accessToken == null}" href="redditLogin" > Connect your Account to Reddit </a>
We need to also need to make sure that users do connect their accounts to Reddit before trying to submit posts:
@RequestMapping("/post") public String showSubmissionForm(Model model) { if (getCurrentUser().getAccessToken() == null) { model.addAttribute("msg", "Sorry, You did not connect your account to Reddit yet"); return "submissionResponse"; } ... }
6. Conclusion
The small reddit app is definitely moving forward.
The old authentication flow – fully backed by Reddit – was causing some problems. So now, we have a clean and simple form-based login while still being able to connect your Reddit API in the back end.
Good stuff.