feat: Implementação do login social com Github

frontend/src/App.js

@@ -1,8 +1,14 @@
 import React from 'react';
 import Routes from './routes';
 
+import { AuthProvider } from './contexts/AuthContext';
+
 function App() {
-    return <Routes />;
+    return (
+        <AuthProvider>
+            <Routes />
+        </AuthProvider>
+    );
 }
 
 export default App;

frontend/src/components/Header/index.js

@@ -4,7 +4,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faBars, faTimes } from '@fortawesome/free-solid-svg-icons';
 import { faGithub } from '@fortawesome/free-brands-svg-icons';
 
-import Logo from '../Logo'
+import Logo from '../Logo';
 
 import * as S from './styled';
 
@@ -49,7 +49,10 @@ export default function Header() {
                         </S.StyledLink>
                     </li>
                     <li>
-                        <S.ButtonLink activeClassName="is-active" to="/login">
+                        <S.ButtonLink
+                            activeClassName="is-active"
+                            href={`https://github.com/login/oauth/authorize?scope=userl&client_id=${process.env.REACT_APP_CLIENT_ID}`}
+                        >
                             Entrar
                             <FontAwesomeIcon
                                 icon={faGithub}

frontend/src/components/Header/styled.js

@@ -96,7 +96,7 @@ export const StyledLink = styled(NavLink)`
     }
 `;
 
-export const ButtonLink = styled(NavLink)`
+export const ButtonLink = styled.a`
     background-color: var(--quaternary);
 
     width: 100px;

frontend/src/contexts/AuthContext.js

@@ -0,0 +1,15 @@
+import React, { createContext, useState } from 'react';
+
+const AuthContext = createContext({});
+
+const AuthProvider = ({ children }) => {
+    const [user, setUser] = useState({});
+
+    return (
+        <AuthContext.Provider value={{ user, setUser }}>
+            {children}
+        </AuthContext.Provider>
+    );
+};
+
+export { AuthContext, AuthProvider };

frontend/src/pages/CallbackPage/index.js

@@ -0,0 +1,48 @@
+/* eslint-disable no-shadow */
+import React, { useEffect, useCallback, useContext } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+
+import { AuthContext } from '../../contexts/AuthContext';
+
+import api from '../../services/api';
+import { login } from '../../services/authentication';
+
+import Logo from '../../components/Logo';
+
+import * as S from './styled';
+
+export default function CallbackPage() {
+    const history = useHistory();
+
+    const { search } = useLocation();
+    const searchParam = new URLSearchParams(search);
+
+    const code = searchParam.get('code');
+
+    const { setUser } = useContext(AuthContext);
+
+    const authenticateUserWithGithub = useCallback(
+        async (code) => {
+            const response = await api.get(
+                `http://localhost:3333/auth/${code}`
+            );
+            if (response.status === 200 || response.status === 201) {
+                setUser(response.data.user);
+                login(response.data.token);
+                history.push('/dashboard');
+            }
+        },
+        [history, setUser]
+    );
+
+    useEffect(() => {
+        authenticateUserWithGithub(code);
+    }, [code, authenticateUserWithGithub]);
+
+    return (
+        <S.Container>
+            <Logo />
+            <h2>Aguardando as informações...</h2>
+        </S.Container>
+    );
+}

frontend/src/pages/CallbackPage/styled.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    margin-top: 10%;
+
+    h2 {
+        color: white;
+        margin-top: 20px;
+    }
+
+`

frontend/src/routes.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom';
 
+import { isAuthenticated as logged } from './services/authentication';
+
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import Home from './pages/Home';
@@ -15,15 +17,15 @@ import Footer from './components/Footer';
 import ToDoChallenge from './pages/ToDoChallenge';
 
 import { Container } from './styles/GlobalStyles';
-import ConstructPage from './pages/ConstructPage';
+import CallbackPage from './pages/CallbackPage';
 
-const logged = false;
 
 const LoggedRoute = ({ component: Component, ...rest }) => (
+
     <Route
         {...rest}
         render={(props) =>
-            logged ? (
+            logged() ? (
                 <Component {...props} />
             ) : (
                 <Redirect
@@ -41,6 +43,7 @@ function Routes() {
             <Container>
                 <Switch>
                     <Route path="/" exact component={Home} />
+                    <Route path="/callback" component={CallbackPage} />
                     <Route path="/challenges" exact component={Challenges} />
                     <Route path="/challenges/:id/details" component={Detail} />
                     <Route path="/devs" component={Devs} />
@@ -55,7 +58,6 @@ function Routes() {
                         component={MyChallenges}
                     />
                     <LoggedRoute path="/dashboard" component={Dashboard} />
-                    <Route path="/login" component={ConstructPage} />
                 </Switch>
             </Container>
             <Footer />

frontend/src/services/authentication.js

@@ -0,0 +1,11 @@
+export const TOKEN_KEY = "@DevChallenge-Token";
+
+export const isAuthenticated = () => localStorage.getItem(TOKEN_KEY) !== null;
+
+export const login = token => {
+  localStorage.setItem(TOKEN_KEY, token);
+};
+
+export const logout = () => {
+  localStorage.removeItem(TOKEN_KEY);
+};