Code Monkey home page Code Monkey logo

spring-boot-react-oauth2-social-login-demo's Introduction

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

spring-boot-react-oauth2-social-login-demo's People

Contributors

callicoder avatar venkatraman96 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.