Spring Boot React OAuth2 Social Login with Google, Facebook, and Github
Switch branches/tags
Nothing to show
Clone or download
Latest commit ada77d0 Nov 21, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
react-social comment Nov 17, 2018
spring-social fix name Nov 21, 2018
Readme.md cleanup Oct 20, 2018
screenshot.png Screenshot Oct 5, 2018

Readme.md

Spring Boot React OAuth2 Social Login Demo

App Screenshot

Setting up the Backend Server (spring-social)

  • Create MySQL database

     mysql> create database spring_social
  • Configure database username and password

     # spring-social/src/main/resources/application.yml
     spring:
         datasource:
             url: jdbc:mysql://localhost:3306/spring_social?useSSL=false
             username: <YOUR_DB_USERNAME>
             password: <YOUR_DB_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.

     security:
       oauth2:
         client:
           registration:
             google:
               clientId: <GOOGLE_CLIENT_ID>
               clientSecret: <GOOGLE_CLIENT_SECRET>
               redirectUriTemplate: "{baseUrl}/oauth2/callback/{registrationId}"
               scope:
                 - email
                 - profile
             facebook:
               clientId: <FACEBOOK_CLIENT_ID>
               clientSecret: <FACEBOOK_CLIENT_SECRET>
               redirectUriTemplate: "{baseUrl}/oauth2/callback/{registrationId}"
               scope:
                 - email
                 - public_profile
             github:
               clientId: <GITHUB_CLIENT_ID>
               clientSecret: <GITHUB_CLIENT_SECRET>
               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/<provider> is added as an authorized redirect uri in the OAuth2 provider. For example, In your Google API console, 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

     mvn spring-boot:run

Setting up the Frontend Server (react-social)

cd react-social
npm install && npm start