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 font-end React application called movie-ui. Besides, 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 font-end React application called movie-ui
. Besides, 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","description"} |
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 user
or admin
can login using his/her Github
account or using the credentials (username
and password
) created when he/she signed up directly to the application. All the requests coming from movie-ui
to secured endpoints in movie-api
have the JWT access token. This token is generated when the user
or admin
logins.
movie-ui
uses Semantic UI React
as CSS-styled framework.
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.
In a terminal, make sure you are inside 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 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 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
loging in using the Github
The gif below shows an admin
loging 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 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 | 200 |
......................... + ............. + ........... + ............ |
GET /api/movies | 401 | 200 | 200 |
POST /api/movies | 401 | 403 | 201 |
DELETE /api/movies/abc | 401 | 403 | 200 |
------------------------------------------------------------------------
[200] Success - [201] Created - [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 springboot-react-social-login
root folder, run the command below
docker compose down -v
In a terminal, make sure you are in springboot-react-social-login/movie-ui
folder
Run the following commands
npm upgrade
npm i -g npm-check-updates
ncu -u
npm install