Loading repository data…
ivangfr / repository
The goal of this project is to implement an application called movie-app to manage movies. For it, we will implement a back-end Spring Boot application called movie-api and a front-end React application called movie-ui. Additionally, we will use OAuth2 (Social Login) to secure both applications.
The goal of this project is to implement an application called movie-app to manage movies. For it, we will implement a back-end Spring Boot application called movie-api and a front-end React application called movie-ui. Additionally, we will use OAuth2 (Social Login) to secure both applications.
On ivangfr.github.io, I have compiled my Proof-of-Concepts (PoCs) and articles. You can easily search for the technology you are interested in by using the filter. Who knows, perhaps I have already implemented a PoC or written an article about what you are looking for.
Spring Boot Web Java backend application that exposes a Rest API to create, retrieve and delete movies. If a user has ADMIN role he/she can also retrieve information of other users or delete them. The application secured endpoints can just be accessed if a valid JWT access token is provided.
In order to get the JWT access token, the user can login using the credentials (username and password) created when he/she signed up directly to the application.
movie-api stores its data in Postgres database.
movie-api has the following endpoints:
| Endpoint | Secured | Roles |
|---|---|---|
POST /auth/authenticate -d {"username","password"} | No | |
POST /auth/signup -d {"username","password","name","email"} | No | |
GET /public/numberOfUsers | No | |
GET /public/numberOfMovies | No | |
GET /api/users/me | Yes | ADMIN, USER |
GET /api/users | Yes | ADMIN |
GET /api/users/{username} | Yes | ADMIN |
DELETE /api/users/{username} | Yes | ADMIN |
GET /api/movies [?text] | Yes | ADMIN, USER |
POST /api/movies -d {"imdb","title","poster"[opt]} | Yes | ADMIN |
DELETE /api/movies/{imdb} | Yes | ADMIN |
React frontend application where a user with role USER can retrieve the information about movies. On the other hand, a user with role ADMIN has access to all secured endpoints, including endpoints to create and delete movies.
In order to access the application, a or can login using his/her account or using the credentials ( and ) created when he/she signed up directly to the application. All the requests coming from to secured endpoints in have the JWT access token. This token is generated when the or logins.
Github
In the Medium article, How to Create an OAuth2 App in GitHub, we will walk you through the process of creating an OAuth2 app in GitHub.
In the Medium article, How to Create an OAuth2 App in Google, we will show in details how to create an OAuth2 app in Google.
In the Medium article, Implementing Social Login in a Spring Boot and React App, we show the complete Social Login flow, covering the request and redirections among movie-ui, movie-api and GitHub provider.
npmJava 25 or higherDocker, Podman, etc.)Bash 4.0 or higher (macOS ships with Bash 3.2; install via brew install bash)jqIn a terminal, make sure you are inside the springboot-react-social-login root folder;
Run the following command to start Docker Compose containers:
docker compose up -d
movie-api
Open a terminal and navigate to the springboot-react-social-login/movie-api folder;
Export the following environment variables for the Client ID and Client Secret of the Social Apps (see how to get them in Creating OAuth2 apps for Social Login):
export GITHUB_CLIENT_ID=...
export GITHUB_CLIENT_SECRET=...
export GOOGLE_CLIENT_ID=...
export GOOGLE_CLIENT_SECRET=...
Run the following Maven command to start the application:
./mvnw clean spring-boot:run
movie-ui
Open another terminal and navigate to the springboot-react-social-login/movie-ui folder;
Run the command below if you are running the application for the first time:
npm install
Run the npm command below to start the application:
npm start
| Application | URL | Credentials |
|---|---|---|
| movie-api | http://localhost:8080/swagger-ui.html | |
| movie-ui | http://localhost:3000 | admin/admin, user/user or signing up a new user |
The gif below shows a user logging in using Github:
The gif below shows an admin logging in using his application account:
Manual Test
Access movie-ui at http://localhost:3000;
Click Login and then, connect with Github;
Provide your Github credentials.
Automatic Endpoints Test
Open a terminal and make sure you are in the springboot-react-social-login root folder;
Run the following script:
./movie-api/test-endpoints.sh
It should return something like the output below, where it shows the http code for different requests:
POST auth/authenticate
======================
admin access token
------------------
eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJleHAiOjE1ODY2MjM1MjksImlhdCI6MTU4Nj..._ha2pM4LSSG3_d4exgA
user access token
-----------------
eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJleHAiOjE1ODY2MjM1MjksImlhdCIyOSwian...Y3z9uwhuW_nwaGX3cc5A
POST auth/signup
================
user2 access token
------------------
eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJleHAiOjE1ODY2MjM1MjksImanRpIjoiYTMw...KvhQbsMGAlFov1Q480qg
Authorization
=============
Endpoints | without token | user token | admin token |
------------------------- + ------------- + ----------- + ------------ |
GET public/numberOfUsers | 200 | 200 | 200 |
GET public/numberOfMovies | 200 | 200 | 200 |
......................... + ............. + ........... + ............ |
GET /api/users/me | 401 | 200 | 200 |
GET /api/users | 401 | 403 | 200 |
GET /api/users/user2 | 401 | 403 | 200 |
DELETE /api/users/user2 | 401 | 403 | 204 |
......................... + ............. + ........... + ............ |
GET /api/movies | 401 | 200 | 200 |
POST /api/movies | 401 | 403 | 201 |
DELETE /api/movies/abc | 401 | 403 | 204 |
------------------------------------------------------------------------
[200] Success - [201] Created - [204] No Content - [401] Unauthorized - [403] Forbidden
docker exec -it postgres psql -U postgres -d moviedb
\dt
To stop movie-api and movie-ui, go to the terminals where they are running and press Ctrl+C;
To stop and remove Docker Compose containers, network, and volumes, go to a terminal and, inside the springboot-react-social-login root folder, run the following command:
docker compose down -v
movie-api
Open a terminal and navigate to the springboot-react-social-login/movie-api folder;
Run the following command to execute all tests:
./mvnw clean test
movie-ui
Open a terminal and navigate to the springboot-react-social-login/movie-ui folder;
Run the following command to execute all tests:
npm test
In a terminal, make sure you are in the springboot-react-social-login/movie-ui folder;
Run the following commands:
npm upgrade
npm i -g npm-check-updates
ncu -u
npm install
Spring Boot module (movie-api): Code is formatted using Spotless with Google Java Format.
To check or apply formatting, make sure you are inside the module folder and run the following command:
Check formatting:
./mvnw spotless:check
Auto-fix formatting:
./mvnw spotless:apply
React module (movie-ui): Code is format
Selected from shared topics, language and repository description—not editorial ratings.
ivangfr /
The goal of this project is to implement an application called order-app to manage orders. For it, we will implement a back-end Spring Boot application called order-api and a front-end React application called order-ui. Besides, we will use JWT Authentication to secure both applications.
ivangfr /
The goal of this project is to implement an application called book-app to manage books. For it, we will implement a back-end Spring Boot application called book-api and a front-end React application called book-ui. Besides, we will use Basic Authentication to secure both applications.
useradminGithubusernamepasswordmovie-uimovie-apiuseradminmovie-ui uses Mantine as a UI component library, with Tabler Icons for icons.