Added GitHub Oauth Login and Registration

Added the code to make POST request on backend to send code and recieve access_token.

Fixes anitab-org#106

Author: codesankalp

README.md

@@ -21,16 +21,23 @@ Documentation for the project is hosted [here](https://osp-web-docs.surge.sh/).
 
 **Note:** Before setting up the frontend make sure to have Setup the [Backend Repo](https://github.com/anitab-org/open-source-programs-backend).
 
-1. To start the server:
+1. Create a `.env` file in the project root directory and add **Client ID** and **Callback URL** of GitHub App like this:
+
+```
+REACT_APP_GITHUB_CLIENT_ID=< GitHub App Client ID >
+REACT_APP_GITHUB_CALLBACK_URL=< GitHub App Callback URL >
+```
+To get **Client ID** and **Callback URL** of GitHub App follow [this docs](https://docs.github.com/en/developers/apps/creating-a-github-app).
+
+2. To start the server:
 
 ```
-cd open-source-programs-web
 npm install
 npm start
 ```
 
-2. Navigate to `http://localhost:3000/` in your browser.
-3. You can terminate the process by `Ctrl+C` in your terminal.
+3. Navigate to `http://localhost:3000/` in your browser.
+4. You can terminate the process by `Ctrl+C` in your terminal.
 
 ## Contributing
 

package.json

@@ -7,16 +7,18 @@
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "aws-sdk": "^2.734.0",
-    "axios": "^0.19.2",
+    "axios": "^0.21.1",
     "dotenv": "^8.2.0",
+    "github-login": "^1.0.12",
     "moment": "^2.27.0",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-github-login": "^1.0.3",
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.2.0",
     "react-router-redux": "^4.0.8",
-    "react-scripts": "3.4.1",
+    "react-scripts": "^4.0.3",
     "redux": "^4.0.5",
     "redux-api-middleware": "^3.2.1",
     "redux-persist": "^6.0.0",

src/actions/login.js

@@ -1,7 +1,8 @@
 import axios from 'axios'
 import {
     urlLogin,
-    urlRegister
+    urlRegister,
+    urlGithubLogin
 } from '../urls'
 import {
     LOGIN,
@@ -58,3 +59,28 @@ export const postRegister = (data, callback) => async dispatch => {
         callback()
     }
 };
+
+export const postGithubCode = (data, callback) => async dispatch => {
+    try {
+        const config = {
+            headers: {
+                'content-type': 'application/json',
+            }
+        }
+        const res = await axios.post(urlGithubLogin(), data, config);
+        dispatch({
+            type: LOGIN,
+            payload: res.data
+        });
+
+        localStorage.setItem('token', res.data.access_token)
+        callback();
+    }
+    catch (err) {
+        dispatch({
+            type: LOGIN_ERRORS,
+            payload: err.response
+        });
+        callback()
+    }
+}

src/components/GitHubAuth.js

@@ -0,0 +1,132 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import PropTypes from 'prop-types'
+import GitHubLogin from 'react-github-login';
+import { postGithubCode } from '../actions/login'
+import { withRouter } from 'react-router';
+import { Icon, Message } from 'semantic-ui-react'
+
+
+class GitHubAuth extends Component {
+
+    constructor(props) {
+        super(props)
+        this.state = {
+            code: '',
+            error: null,
+            posted: false,
+            errorText: ''
+        }
+        this.postCode = this.postCode.bind(this);
+        this.GithubError = this.GithubError.bind(this);
+    }
+
+    postCode = (response) => {
+        console.log(response.code)
+        this.setState({
+            code: response.code
+        })
+        const data = {
+            code: this.state.code
+        }
+        this.props.postGithubCode(data, this.callback)
+        this.setState({
+            code: ''
+        })
+    }
+
+    callback = () => {
+        this.setState({
+            error: this.props.loginerror ? true : false,
+            posted: true,
+            errorText: 'Server Error: try again.'
+        })
+        console.log(this.state.error, this.state.posted);
+        if (!this.state.error) {
+            this.props.history.push('/')
+        }
+        setTimeout(() => {
+            this.setState({
+                error: false,
+                posted: false,
+            })
+        }, 4000)
+    }
+
+    icon = () => {
+        return (
+            <React.Fragment>
+                <Icon name='github' /> Log in with GitHub
+            </React.Fragment>
+        )
+    }
+
+    GithubError = (response) => {
+        console.log(response);
+        this.setState({
+            error: true,
+            posted: true,
+            errorText: "GitHub API Error."
+        })
+        setTimeout(() => {
+            this.setState({
+                error: false,
+                posted: false
+            })
+        }, 4000)
+    }
+
+    componentWillMount() {
+        this.setState({
+            code: '',
+            error: null,
+            posted: false,
+            errorText: ''
+        })
+    }
+
+    componentWillUnmount() {
+        this.setState = (state, callback) => {
+            return;
+        };
+    }
+
+    render() {
+        const { REACT_APP_GITHUB_CLIENT_ID, REACT_APP_GITHUB_CALLBACK_URL } = process.env;
+        const { error, posted, errorText } = this.state;
+        const onFailure = response => this.GithubError(response)
+        return (
+            <>
+                {
+                    error && posted ?
+                        <Message
+                            error
+                            content={errorText}
+                        /> :
+                        <GitHubLogin clientId={`${REACT_APP_GITHUB_CLIENT_ID}`}
+                            onSuccess={this.postCode}
+                            onFailure={onFailure}
+                            redirectUri={`${REACT_APP_GITHUB_CALLBACK_URL}`}
+                            children={this.icon()}
+                            className="ui fluid button"
+                        />
+                }
+            </>
+
+        )
+    }
+}
+
+GitHubAuth.propTypes = {
+    postGithubCode: PropTypes.func.isRequired,
+}
+
+const mapStateToProps = state => ({
+    login: state.login.login,
+    loginerror: state.login.loginerror
+})
+
+export default connect(
+    mapStateToProps,
+    { postGithubCode, }
+)(withRouter(GitHubAuth))