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

README.md

@@ -24,16 +24,24 @@ 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,5 +1,5 @@
 import axios from 'axios';
-import { urlLogin, urlRegister } from '../urls';
+import { urlLogin, urlRegister, urlGithubLogin } from '../urls';
 import { LOGIN, REGISTER, LOGIN_ERRORS, REGISTER_ERRORS } from './types';
 
 export const postLogin = (data, callback) => async (dispatch) => {
@@ -48,3 +48,27 @@ 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,131 @@
+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);
+  };
+
+  UNSAFE_componentWillMount() {
+    this.setState({
+      code: '',
+      error: null,
+      posted: false,
+      errorText: '',
+    });
+  }
+
+  componentWillUnmount() {
+    // eslint-disable-next-line
+    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}`}
+            className="ui fluid button"
+          >
+            {this.icon()}
+          </GitHubLogin>
+        )}
+      </>
+    );
+  }
+}
+
+GitHubAuth.propTypes = {
+  postGithubCode: PropTypes.func.isRequired,
+};
+
+const mapStateToProps = (state) => ({
+  login: state.login.login,
+  loginerror: state.login.loginerror,
+});
+
+export default connect(mapStateToProps, { postGithubCode })(
+  withRouter(GitHubAuth)
+);

src/components/Login.js

@@ -10,11 +10,13 @@ import {
   Icon,
   Message,
   Button,
+  Segment,
 } from 'semantic-ui-react';
 import PropTypes from 'prop-types';
 import './../styles/Login.css';
 import orgLogo from '../assets/org-logo.jpg';
 import { register } from '../urls';
+import GitHubAuth from './GitHubAuth';
 
 class Login extends Component {
   constructor(props) {
@@ -168,6 +170,9 @@ class Login extends Component {
                   <Message error content={this.props.loginerror.detail} />
                 ) : null}
                 <Divider />
+                <Segment>
+                  <GitHubAuth {...this.props} />
+                </Segment>
                 <span>
                   Don't have an account?{' '}
                   <Link to={register()}>Register here.</Link>

src/urls.js

@@ -47,6 +47,10 @@ export function urlRegister() {
   return `${urlBaseBackend()}/token_auth/register/`;
 }
 
+export function urlGithubLogin() {
+  return `${urlBaseBackend()}/token_auth/github/`;
+}
+
 export function urlInfo() {
   return `${urlBaseBackend()}/info/`;
 }