spring-boot-react-oauth2-social-login-demo

by callicoder

Spring Boot React OAuth2 Social Login with Google, Facebook, and Github

578 Stars 371 Forks Last release: Not found 51 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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: 
            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: 
              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, 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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.