Comenzado el flujo oauth

hay que separar un poco todo

src/components/Auth.jsx

@@ -0,0 +1,64 @@
+import React, {useState} from 'react';
+import {Redirect} from "react-router-dom";
+import queryString from "query-string";
+
+import {get_auth, obtain_code} from "../services/auth_service";
+import {useStateValue} from "../services/State";
+
+export const AuthCallback = (props) => {
+    return null;
+}
+
+export const AuthLogin = (props) => {
+    const [response, setResponse] = useState(null);
+    const [context, dispatch] = useStateValue();
+
+    if (window.localStorage.getItem('refresh_token')) {
+    }
+
+    if (!response) {
+        if (context.user.auth) {
+            return <Redirect to='/'/>
+        }
+
+        if (!window.localStorage.getItem('code_verifier')) {
+            const {redirect, code_verifier} = obtain_code();
+            window.localStorage.setItem('code_verifier', code_verifier);
+            window.location.href = redirect;
+            return null;
+        }
+
+        const parsedParams = queryString.parse(props.location.search);
+        if (parsedParams.error) {
+            console.log(parsedParams.error);
+            window.localStorage.removeItem('code_verifier');
+            return <Redirect to={'/error'}/>
+        }
+
+        const code = parsedParams.code;
+        const code_verifier = window.localStorage.getItem('code_verifier');
+        get_auth(code, code_verifier).then((response) => setResponse(response));
+
+        return null;
+    } else {
+        console.log(response);
+
+        window.localStorage.removeItem('code_verifier');
+
+        const refresh = response.refresh_token;
+        const expires = new Date(new Date().getTime() + ((response.expires_in) * 1000))
+
+        window.localStorage.setItem('refresh_token', refresh);
+        window.localStorage.setItem('expires', expires);
+
+        dispatch({type: 'login', user: {auth: true, access_token: response.access_token}});
+
+        return <Redirect to={'/'}/>
+    }
+}
+
+export const AuthLogout = (props) => {
+    const [context, dispatch] = useStateValue();
+    dispatch({action: 'logout', user: {auth: false}})
+    return <Redirect to='/'/>
+}

src/components/Nav.jsx

@@ -3,12 +3,9 @@ import {Link} from "react-router-dom";
 import './Nav.scss';
 import {useStateValue} from '../services/State'
 
-export const Nav = () => {
+export const Nav = (props) => {
     const [context, dispatch] = useStateValue();
 
-    const handleLogin = () => dispatch({type: 'login', user: {auth: true}})
-    const handleLogout = () => dispatch({type: 'logout', user: {auth: false}})
-
     const showLogin = () => {
         return context.user.auth === false;
     }
@@ -17,7 +14,7 @@ export const Nav = () => {
         if (showLogin()) {
             return <ul className='nav-links'>
                 <li className='link'>
-                    <button onClick={handleLogin}>Iniciar Sesión</button>
+                    <Link to='/login'>Iniciar Sesión</Link>
                 </li>
                 <li className='link'>
                     <Link to='/signup'>Registrate</Link>
@@ -26,10 +23,10 @@ export const Nav = () => {
         }else {
             return <ul className='nav-links'>
                 <li>
-                    Bienvenido
+                    Bienvenido {context.user.access_token}
                 </li>
                 <li className='link'>
-                    <button onClick={handleLogout}>Cerrar Sesión</button>
+                    <Link to='/logout'>Cerrar Sesión</Link>
                 </li>
             </ul>
         }