How to Secure Your Movies App with Spring Boot, React, and Keycloak

Jun 20, 2022 | Programming

homemayankDocumentsarticle-generation-using-llmresized_images_gitjavareadme_ivangfr_springboot-react-keycloak

Welcome to the exciting world of building secure applications! Today, we’ll journey through the process of securing a movies application using Keycloak in combination with Spring Boot and React. By the end of this article, you will be equipped to manage movie data securely while utilizing robust user authentication.

Understanding the Architecture

Imagine that your movies application is like a theater with two distinct sections—one for the audience and another for administrators. The audience (React application) can watch movies but has limited access, while the administrators (Spring Boot API) can manage the movies and need an authentication pass (JWT token) to access restricted areas.

Project Setup

Before we dive in to secure the application, let’s ensure you have everything you need:

Java 21+
npm
Docker
jq
OMDb API KEY, required for movie searching.

Create a .env.local file in the springboot-react-keycloak/movies-ui folder with the following:

REACT_APP_OMDB_API_KEY=your-api-key

Initialize Keycloak

Using a terminal, execute the following commands to set up Keycloak:

.init-keycloak.sh

This script will create essential roles and users to ensure that your application can distinguish between regular users and admins, just like a theater staff differentiates between guests and employees.

Running the Applications

Now, it’s time to open the stage for our actors! Here’s how to start both the Spring Boot API and the React UI:

For the movies-api:

Navigate to the springboot-react-keycloak/movies-api folder.
Run:

.mvnw clean spring-boot:run -Dspring-boot.run.jvmArguments=-Dserver.port=9080

For the movies-ui:

Open another terminal to the springboot-react-keycloak/movies-ui folder.
If running for the first time, execute:

npm install

Start the application with:

npm start

Your applications are now live! The admin can log in and start managing movies while users can log in to comment and browse.

Testing the Movies API

Next, you might want to manage the movie records using tests. You can do this using either curl or the Swagger interface. Make sure you authenticate using the access token obtained earlier.

Getting Access Token

To get the access token, run the following command:

ACCESS_TOKEN=$(curl -s -X POST http://localhost:8080/realms/company-services/protocol/openid-connect/token -H "Content-Type: application/x-www-form-urlencoded" -d "username=admin" -d "password=admin" -d "grant_type=password" -d "client_id=movies-app" | jq -r .access_token)

After acquiring the token, note that you can decode and verify it using jwt.io.

Troubleshooting Common Issues

If you encounter issues during setup, here are some tips:

Ensure that all services (movies-api, movies-ui, and Keycloak) are running correctly in their respective terminals.
Check for any typing errors in your setup scripts, especially in file paths and environment variable settings.
If you get a 401 Unauthorized error when accessing secured endpoints, make sure you pass the correct JWT token.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

Congratulations! You’ve set up a secure movie application with Spring Boot, React, and Keycloak. With roles defined, your application is structured like the perfect theater, maintaining the balance between security and functionality.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.