Spring Boot OAuth2 Social Login with Google, Facebook Twitter

You are currently viewing Spring Boot OAuth2 Social Login with Google, Facebook Twitter

Spring Boot OAuth2 Social Login with Google, Facebook Twitter

OAuth2 Social Login is a common feature in modern web applications, allowing users to sign in using their social media accounts. Spring Boot provides robust support for implementing OAuth2 authentication with popular social platforms like Facebook, Google, and GitHub. In this tutorial, we’ll guide you through the process of setting up OAuth2 Social Login in a Spring Boot application, enabling users to log in using their preferred social accounts.

Prerequisites

  • Basic understanding of Spring Boot
  • JDK installed on your machine
  • Maven or Gradle installed
  • Developer accounts on Google, Facebook, and Twitter (to obtain client credentials)

Step 1: Create a Spring Boot Project

You can create a new Spring Boot project using the Spring Initializr, or you can use your preferred IDE to generate a new project with the necessary dependencies.

For Maven, add the following dependencies:

  • Spring Web
  • Spring Security
  • Spring Boot OAuth2 Client
  • Thymeleaf (for simplicity in this example)

Here’s an example pom.xml:

<dependencies>
    <!-- Spring Boot Starter Web -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>

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

    <!-- Spring Boot OAuth2 Client -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-oauth2-client</artifactId>
    </dependency>

    <!-- Thymeleaf for templating -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
</dependencies>

Step 2: Configure OAuth2 Providers

Now, we need to configure our application to work with Google, Facebook, and Twitter as OAuth2 providers. You will need to obtain client credentials (client ID and secret) from each provider’s developer console.

Google Configuration

Create a application.properties file or application.yml file in src/main/resources:

spring.security.oauth2.client.registration.google.client-id=your-google-client-id
spring.security.oauth2.client.registration.google.client-secret=your-google-client-secret
spring.security.oauth2.client.registration.google.scope=profile,email

Facebook Configuration

spring.security.oauth2.client.registration.facebook.client-id=your-facebook-client-id
spring.security.oauth2.client.registration.facebook.client-secret=your-facebook-client-secret
spring.security.oauth2.client.registration.facebook.scope=email
spring.security.oauth2.client.registration.facebook.redirect-uri=http://localhost:8080/login/oauth2/code/facebook

Twitter Configuration

spring.security.oauth2.client.registration.twitter.client-id=your-twitter-client-id
spring.security.oauth2.client.registration.twitter.client-secret=your-twitter-client-secret
spring.security.oauth2.client.registration.twitter.scope=read:users
spring.security.oauth2.client.registration.twitter.redirect-uri=http://localhost:8080/login/oauth2/code/twitter

Step 3: Create a Controller

Now let’s create a controller to handle the login and redirect URLs:

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class LoginController {

    @GetMapping("/")
    public String index() {
        return "index";
    }

    @GetMapping("/login")
    public String login() {
        return "login";
    }

    @GetMapping("/login-error")
    public String loginError(Model model) {
        model.addAttribute("loginError", true);
        return "login";
    }
}

Step 4: Create Login Template (login.html)

Next, create a Thymeleaf template for the login page (src/main/resources/templates/login.html):

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Login</title>
</head>
<body>
    <h2>Login with Social Accounts</h2>
    <div th:if="${loginError}" class="alert alert-danger">
        Invalid username or password.
    </div>
    <div>
        <a href="/login/oauth2/authorization/google" class="btn btn-primary">Login with Google</a>
        <a href="/login/oauth2/authorization/facebook" class="btn btn-primary">Login with Facebook</a>
        <a href="/login/oauth2/authorization/twitter" class="btn btn-primary">Login with Twitter</a>
    </div>
</body>
</html>

Step 5: Test the Application

Now you can run your Spring Boot application (mvn spring-boot:run) and navigate to http://localhost:8080/. You should see the login page with buttons for Google, Facebook, and Twitter.

When a user clicks one of these buttons, they will be redirected to the respective OAuth2 provider’s login page. After successful authentication, they will be redirected back to your application.

Summary

In this tutorial, we’ve created a simple Spring Boot application that allows users to log in using their Google, Facebook, or Twitter accounts using OAuth2. We configured the application with client credentials for each provider, created a login page with buttons for social login, and handled the redirection after successful authentication. This is a basic example, and in a production environment, you would likely want to handle user registration, data storage, and more complex user flows.

Tags:

Leave a Reply