https://github.com/callicoder/spring-boot-react-oauth2-social-login-demo
Spring Boot React OAuth2 Social Login with Google, Facebook, and Github
https://github.com/callicoder/spring-boot-react-oauth2-social-login-demo
authentication facebook-login github-login google-login oauth2 oauth2-login react react-oauth2 social-authentication social-login spring spring-boot spring-boot-oauth2 spring-security spring-security-oauth2
Last synced: about 1 year ago
JSON representation
Spring Boot React OAuth2 Social Login with Google, Facebook, and Github
- Host: GitHub
- URL: https://github.com/callicoder/spring-boot-react-oauth2-social-login-demo
- Owner: callicoder
- Created: 2018-10-01T04:19:38.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-10-11T11:12:05.000Z (over 2 years ago)
- Last Synced: 2025-04-07T22:11:11.642Z (about 1 year ago)
- Topics: authentication, facebook-login, github-login, google-login, oauth2, oauth2-login, react, react-oauth2, social-authentication, social-login, spring, spring-boot, spring-boot-oauth2, spring-security, spring-security-oauth2
- Language: Java
- Homepage:
- Size: 2.43 MB
- Stars: 1,501
- Watchers: 46
- Forks: 708
- Open Issues: 44
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# Spring Boot React OAuth2 Social Login Demo
## Setting up the Backend Server (spring-social)
+ **Create MySQL database**
```bash
mysql> create database spring_social
```
+ **Configure database username and password**
```yml
# spring-social/src/main/resources/application.yml
spring:
datasource:
url: jdbc:mysql://localhost:3306/spring_social?useSSL=false
username:
password:
```
+ **Specify OAuth2 Provider ClientId's and ClientSecrets**
> This is optional if you're testing the app in localhost. A demo clientId and clientSecret is already specified.
```yml
security:
oauth2:
client:
registration:
google:
clientId:
clientSecret:
redirectUriTemplate: "{baseUrl}/oauth2/callback/{registrationId}"
scope:
- email
- profile
facebook:
clientId:
clientSecret:
redirectUriTemplate: "{baseUrl}/oauth2/callback/{registrationId}"
scope:
- email
- public_profile
github:
clientId:
clientSecret:
redirectUriTemplate: "{baseUrl}/oauth2/callback/{registrationId}"
scope:
- user:email
- read:user
provider:
facebook:
authorizationUri: https://www.facebook.com/v3.0/dialog/oauth
tokenUri: https://graph.facebook.com/v3.0/oauth/access_token
userInfoUri: https://graph.facebook.com/v3.0/me?fields=id,first_name,middle_name,last_name,name,email,verified,is_verified,picture.width(250).height(250)
```
*Please make sure that `http://localhost:8080/oauth2/callback/`* is added as an authorized redirect uri in the OAuth2 provider. For example, In your [Google API console](https://console.developers.google.com/projectselector/apis/credentials?pli=1), make sure that `http://localhost:8080/oauth2/callback/google` is added in the **Authorized redirect URIs**
*Also, make sure that the above mentioned scopes are added in the OAuth2 provider console.* For example, scope `email` and `profile` should be added in your Google project's OAuth2 consent screen.
+ **Run spring-social**
```bash
mvn spring-boot:run
```
## Setting up the Frontend Server (react-social)
```bash
cd react-social
npm install && npm start
```