{"id":18048050,"url":"https://github.com/ivangfr/springboot-react-social-login","last_synced_at":"2025-04-04T15:06:54.466Z","repository":{"id":38313241,"uuid":"254603961","full_name":"ivangfr/springboot-react-social-login","owner":"ivangfr","description":"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. Additionally, we will use OAuth2 (Social Login) to secure both applications.","archived":false,"fork":false,"pushed_at":"2025-03-13T20:37:46.000Z","size":17846,"stargazers_count":178,"open_issues_count":2,"forks_count":50,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-28T14:05:24.307Z","etag":null,"topics":["docker","github-oauth-login","github-oauth2","google-oauth-login","google-oauth2","java","javascript","jsonwebtoken","oauth2-client","postgresql","react","semantic-ui-react","social-login","spring-boot","spring-data-jpa","spring-security","spring-web-mvc","springdoc-openapi"],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ivangfr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"ivangfr"}},"created_at":"2020-04-10T10:10:01.000Z","updated_at":"2025-03-19T15:40:55.000Z","dependencies_parsed_at":"2024-01-12T01:12:38.576Z","dependency_job_id":"1b145c1a-ac85-48fa-a768-bfc94cbe3be8","html_url":"https://github.com/ivangfr/springboot-react-social-login","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivangfr%2Fspringboot-react-social-login","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivangfr%2Fspringboot-react-social-login/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivangfr%2Fspringboot-react-social-login/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivangfr%2Fspringboot-react-social-login/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ivangfr","download_url":"https://codeload.github.com/ivangfr/springboot-react-social-login/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247198443,"owners_count":20900079,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["docker","github-oauth-login","github-oauth2","google-oauth-login","google-oauth2","java","javascript","jsonwebtoken","oauth2-client","postgresql","react","semantic-ui-react","social-login","spring-boot","spring-data-jpa","spring-security","spring-web-mvc","springdoc-openapi"],"created_at":"2024-10-30T20:11:05.653Z","updated_at":"2025-04-04T15:06:54.443Z","avatar_url":"https://github.com/ivangfr.png","language":"Java","funding_links":["https://github.com/sponsors/ivangfr"],"categories":[],"sub_categories":[],"readme":"# springboot-react-social-login\n\nThe 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`](https://docs.spring.io/spring-boot/index.html) application called `movie-api` and a font-end [React](https://react.dev/) application called `movie-ui`. Additionally, we will use [`OAuth2`](https://en.wikipedia.org/wiki/OAuth#OAuth_2.0) (Social Login) to secure both applications.\n\n## Proof-of-Concepts \u0026 Articles\n\nOn [ivangfr.github.io](https://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.\n\n## Additional Readings\n\n- \\[**Medium**\\] [**Implementing A Full Stack Web App Using Spring-Boot and React**](https://medium.com/@ivangfr/implementing-a-full-stack-web-app-using-spring-boot-and-react-7db598df4452)\n- \\[**Medium**\\] [**Implementing Social Login in a Spring Boot and React App**](https://medium.com/@ivangfr/implementing-social-login-in-a-spring-boot-and-react-app-6ce073c9983c)\n- \\[**Medium**\\] [**How to Create an OAuth2 App in GitHub**](https://medium.com/@ivangfr/how-to-create-an-oauth2-app-in-github-8e273e376408)\n- \\[**Medium**\\] [**How to Create an OAuth2 App in Google**](https://medium.com/@ivangfr/how-to-create-an-oauth2-app-in-google-10e846d23adb)\n- \\[**Medium**\\] [**Building a Web Chat with Social Login using Spring Boot: Introduction**](https://medium.com/@ivangfr/building-a-web-chat-with-social-login-using-spring-boot-introduction-644702e6be8e)\n- \\[**Medium**\\] [**Building a Single Spring Boot App with Keycloak or Okta as IdP: Introduction**](https://medium.com/@ivangfr/building-a-single-spring-boot-app-with-keycloak-or-okta-as-idp-introduction-2814a4829aed)\n\n## Project Diagram\n\n![project-diagram](documentation/project-diagram.jpeg)\n\n## Applications\n\n- ### movie-api\n\n  `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.\n  \n  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.\n  \n  `movie-api` stores its data in [`Postgres`](https://www.postgresql.org/) database.\n\n  `movie-api` has the following endpoints:\n\n  | Endpoint                                                      | Secured | Roles           |\n  | ------------------------------------------------------------- | ------- | --------------- |\n  | `POST /auth/authenticate -d {\"username\",\"password\"}`          | No      |                 |\n  | `POST /auth/signup -d {\"username\",\"password\",\"name\",\"email\"}` | No      |                 |\n  | `GET /public/numberOfUsers`                                   | No      |                 |\n  | `GET /public/numberOfMovies`                                  | No      |                 |\n  | `GET /api/users/me`                                           | Yes     | `ADMIN`, `USER` |\n  | `GET /api/users`                                              | Yes     | `ADMIN`         |\n  | `GET /api/users/{username}`                                   | Yes     | `ADMIN`         |\n  | `DELETE /api/users/{username}`                                | Yes     | `ADMIN`         |\n  | `GET /api/movies [?text]`                                     | Yes     | `ADMIN`, `USER` |\n  | `POST /api/movies -d {\"imdb\",\"description\"}`                  | Yes     | `ADMIN`         |\n  | `DELETE /api/movies/{imdb}`                                   | Yes     | `ADMIN`         |\n\n- ### movie-ui\n\n  `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.\n  \n  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.\n  \n  `movie-ui` uses [`Semantic UI React`](https://react.semantic-ui.com/) as CSS-styled framework.\n\n## Creating OAuth2 apps for Social Login\n\n- **Github**\n\n  In the **Medium** article, [**How to Create an OAuth2 App in GitHub**](https://medium.com/@ivangfr/how-to-create-an-oauth2-app-in-github-8e273e376408), we will walk you through the process of creating an OAuth2 app in `GitHub`.\n\n- **Google**\n\n  In the **Medium** article, [**How to Create an OAuth2 App in Google**](https://medium.com/@ivangfr/how-to-create-an-oauth2-app-in-google-10e846d23adb), we will show in details how to create an OAuth2 app in `Google`.\n\n## How Social Login Works?\n\nIn the **Medium** article, [**Implementing Social Login in a Spring Boot and React App**](https://medium.com/@ivangfr/implementing-social-login-in-a-spring-boot-and-react-app-6ce073c9983c), we show the complete Social Login flow, covering the request and redirections among `movie-ui`, `movie-api` and `GitHub` provider.\n\n## Prerequisites\n\n- [`npm`](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n- [`Java 21`](https://www.oracle.com/java/technologies/downloads/#java21) or higher\n- A containerization tool (e.g., [`Docker`](https://www.docker.com), [`Podman`](https://podman.io), etc.)\n- [`jq`](https://jqlang.github.io/jq/)\n\n## Start Environment\n\n- In a terminal, make sure you are inside the `springboot-react-social-login` root folder;\n\n- Run the following command to start Docker Compose containers:\n  ```\n  docker compose up -d\n  ```\n\n## Running movie-app using Maven \u0026 Npm\n\n- **movie-api**\n\n  - Open a terminal and navigate to the `springboot-react-social-login/movie-api` folder;\n\n  - 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](#creating-oauth2-apps-for-social-login)):\n    ```\n    export GITHUB_CLIENT_ID=...\n    export GITHUB_CLIENT_SECRET=...\n    export GOOGLE_CLIENT_ID=...\n    export GOOGLE_CLIENT_SECRET=...\n    ```\n\n  - Run the following `Maven` command to start the application:\n    ```\n    ./mvnw clean spring-boot:run\n    ```\n\n- **movie-ui**\n\n  - Open another terminal and navigate to the `springboot-react-social-login/movie-ui` folder;\n\n  - Run the command below if you are running the application for the first time:\n    ```\n    npm install\n    ```\n\n  - Run the `npm` command below to start the application:\n    ```\n    npm start\n    ```\n\n## Applications URLs\n\n| Application  | URL                                   | Credentials                                         |\n| ------------ | ------------------------------------- | --------------------------------------------------- |\n| movie-api    | http://localhost:8080/swagger-ui.html |                                                     |\n| movie-ui     | http://localhost:3000                 | `admin/admin`, `user/user` or signing up a new user |\n\n## Demo\n\n- The gif below shows a `user` logging in using `Github`:\n\n  ![github-login](documentation/github-login.gif)\n\n- The gif below shows an `admin` logging in using his application account:\n\n  ![admin-login](documentation/admin-login.gif)\n\n## Testing movie-api Endpoints\n\n- **Manual Test**\n\n  - Access `movie-ui` at http://localhost:3000;\n\n  - Click `Login` and then, connect with `Github`;\n  \n  - Provide your `Github` credentials.\n\n- **Automatic Endpoints Test**\n\n  - Open a terminal and make sure you are in the `springboot-react-social-login` root folder;\n\n  - Run the following script:\n    ```\n    ./movie-api/test-endpoints.sh\n    ```\n    It should return something like the output below, where it shows the http code for different requests:\n    ```\n    POST auth/authenticate\n    ======================\n    admin access token\n    ------------------\n    eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJleHAiOjE1ODY2MjM1MjksImlhdCI6MTU4Nj..._ha2pM4LSSG3_d4exgA\n    \n    user access token\n    -----------------\n    eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJleHAiOjE1ODY2MjM1MjksImlhdCIyOSwian...Y3z9uwhuW_nwaGX3cc5A\n    \n    POST auth/signup\n    ================\n    user2 access token\n    ------------------\n    eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJleHAiOjE1ODY2MjM1MjksImanRpIjoiYTMw...KvhQbsMGAlFov1Q480qg\n\n    Authorization\n    =============\n                    Endpoints | without token |  user token |  admin token |\n    ------------------------- + ------------- + ----------- + ------------ |\n     GET public/numberOfUsers |           200 |         200 |          200 |\n    GET public/numberOfMovies |           200 |         200 |          200 |\n    ......................... + ............. + ........... + ............ |\n            GET /api/users/me |           401 |         200 |          200 |\n               GET /api/users |           401 |         403 |          200 |\n         GET /api/users/user2 |           401 |         403 |          200 |\n      DELETE /api/users/user2 |           401 |         403 |          200 |\n    ......................... + ............. + ........... + ............ |\n              GET /api/movies |           401 |         200 |          200 |\n             POST /api/movies |           401 |         403 |          201 |\n       DELETE /api/movies/abc |           401 |         403 |          200 |\n    ------------------------------------------------------------------------\n     [200] Success -  [201] Created -  [401] Unauthorized -  [403] Forbidden\n    ```\n\n## Util Commands\n\n- **Postgres**\n  ```\n  docker exec -it postgres psql -U postgres -d moviedb\n  \\dt\n  ```\n\n## Shutdown\n\n- To stop `movie-api` and `movie-ui`, go to the terminals where they are running and press `Ctrl+C`;\n\n- 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:\n  ```\n  docker compose down -v\n  ```\n\n## How to upgrade movie-ui dependencies to latest version\n\n- In a terminal, make sure you are in the `springboot-react-social-login/movie-ui` folder;\n\n- Run the following commands:\n  ```\n  npm upgrade\n  npm i -g npm-check-updates\n  ncu -u\n  npm install\n  ```\n\n## References\n\n- https://www.callicoder.com/spring-boot-security-oauth2-social-login-part-1/","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fivangfr%2Fspringboot-react-social-login","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fivangfr%2Fspringboot-react-social-login","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fivangfr%2Fspringboot-react-social-login/lists"}