Skip to content

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.

Notifications You must be signed in to change notification settings

ivangfr/springboot-react-social-login

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

98 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

springboot-react-social-login

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.

Proof-of-Concepts & Articles

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.

Additional Readings

Project Diagram

project-diagram

Applications

  • movie-api

    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
  • movie-ui

    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.

Creating OAuth2 apps for Social Login

How Social Login Works?

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.

Prerequisites

Start Environment

  • In 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
    

Running movie-app using Maven & Npm

  • 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
      

Applications URLs

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

Demo

  • The gif below shows a user loging in using the Github:

    github-login

  • The gif below shows an admin loging in using his application account:

    admin-login

Testing movie-api Endpoints

  • 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 |          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
      

Util Commands

  • Postgres
    docker exec -it postgres psql -U postgres -d moviedb
    \dt
    

Shutdown

  • 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 command below:

    docker compose down -v
    

How to upgrade movie-ui dependencies to latest version

  • 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
    

References

About

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.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Sponsor this project

 

Packages

No packages published