5.3.3 Enabling third-party authentication

You may have seen links or buttons on your favorite website that say “Sign in with Facebook,” “Log in with Twitter,” or something similar. Rather than asking a user to enter their credentials on a login page specific to the website, they offer a way to sign in via another website like Facebook that they may already be logged into.

This type of authentication is based on OAuth2 or OpenID Connect (OIDC). Although OAuth2 is an authorization specification, and we’ll talk more about how to use it to secure REST APIs in chapter 8, it can be also used to perform authentication via a third-party website. OpenID Connect is another security specification that is based on OAuth2 to formalize the interaction that takes place during a third-party authentication.

To employ this type of authentication in your Spring application, you’ll need to add the OAuth2 client starter to the build as follows:

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

Then, at the very least, you’ll need to configure details about one or more OAuth2 or OpenID Connect servers that you want to be able to authenticate against. Spring Security supports sign-in with Facebook, Google, GitHub, and Okta out of the box, but you can configure other clients by specifying a few extra properties.

The general set of properties you’ll need to set for your application to act as an OAuth2/OpenID Connect client follows:

spring:
  security:
    oauth2:
      client:
        registration:
          <oauth2 or openid provider name>:
            clientId: <client id>
            clientSecret: <client secret>
            scope: <comma-separated list of requested scopes>

For example, suppose that for Taco Cloud, we want users to be able to sign in using Facebook. The following configuration in application.yml will set up the OAuth2 client:

spring:
  security:
    oauth2:
      client:
      registration:
        facebook:
          clientId: <facebook client id>
          clientSecret: <facebook client secret>
          scope: email, public_profile

The client ID and secret are the credentials that identify your application to Facebook. You can obtain a client ID and secret by creating a new application entry at https://developers.facebook.com/. The scope property specifies the access that the application will be granted. In this case, the application will have access to the user’s email address and the essential information from their public Facebook profile.

In a very simple application, this is all you will need. When the user attempts to access a page that requires authentication, their browser will redirect to Facebook. If they’re not already logged in to Facebook, they’ll be greeted with the Facebook signin page. After signing in to Facebook, they’ll be asked to authorize your application and grant the requested scope. Finally, they’ll be redirected back to your application, where they will have been authenticated.

If, however, you’ve customized security by declaring a SecurityFilterChain bean, then you’ll need to enable OAuth2 login along with the rest of the security configuration as follows:

@Bean
public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
  return http
    .authorizeRequests()
      .mvcMatchers("/design", "/orders").hasRole("USER")
      .anyRequest().permitAll()
    .and()
      .formLogin()
       .loginPage("/login")
    .and()
     .oauth2Login()

    ...

    .and()
    .build();
}

You may also want to offer both a traditional username-password login and third-party login. In that case, you can specify the login page in the configuration like this:

.and()
  .oauth2Login()
    loginPage("/login")

This will cause the application to always take the user to the application-provided login page where they may choose to log in with their username and password as usual. But you can also provide a link on that same login page that offers them the opportunity to log in with Facebook. Such a link could look like this in the login page’s HTML template:

<a th:href="/oauth2/authorization/facebook">Sign in with Facebook</a>