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>
         }

src/index.jsx

@@ -19,6 +19,7 @@ import {ReleaseView} from "./views/Release";
 import {Recomended} from "./views/Recomended";
 import {SongView} from "./views/Song";
 import {Grid, RowCol} from './components/Grid';
+import {AuthCallback, AuthLogin, AuthLogout} from "./components/Auth";
 
 const Main = (props) => {
     const navigate = (query) => props.history.push(`/search?query=${query}`);
@@ -50,10 +51,16 @@ const App = () => (
             <Nav/>
             <Switch>
                 <Route path='/search/:who?' component={Search}/>
+
                 <Route path='/artist/:mbid?' component={ArtistView}/>
                 <Route path='/disc/:mbid?' component={DiscView}/>
                 <Route path='/release/:mbid?' component={ReleaseView}/>
                 <Route path='/song/:mbid?' component={SongView}/>
+
+                <Route exact path='/login' component={AuthLogin}/>
+                <Route exact path='/logout' component={AuthLogout}/>
+                <Route exact path='/auth_callback' component={AuthCallback}/>
+
                 <Route exact path='/' component={Main}/>
                 <Route path='*' component={NoRoute}/>
             </Switch>

src/services/State.jsx

@@ -11,11 +11,6 @@ const reducer = (state, action) => {
                 ...state,
                 user: action.user
             }
-        case 'logout':
-            return {
-                ...state,
-                user: action.user
-            }
         default: return state;
     }
 };

src/services/auth_service.js

@@ -0,0 +1,45 @@
+import axios from "axios";
+
+const current_host = `${window.location.protocol}//${window.location.host}`
+const oauth_url = `${process.env.REACT_APP_API_SERVER}/oauth`;
+const client_id = process.env["REACT_APP_CLIENT_ID"];
+
+const generate_challenge = () => {
+    return {
+        code: '5d2309e5bb73b864f989753887fe52f79ce5270395e25862da6940d5',
+        challenge: 'MChCW5vD-3h03HMGFZYskOSTir7II_MMTb8a9rJNhnI',
+        method: 'S256',
+    }
+}
+
+export const obtain_code = () => {
+    const challenge = generate_challenge()
+    const params = {
+        response_type: 'code',
+        client_id: client_id,
+        redirect_uri: `${current_host}/login`,
+        scope: 'read write',
+        code_challenge: challenge.challenge,
+        code_challenge_method: challenge.method
+    };
+    const url = `${oauth_url}/authorize/?${new URLSearchParams(params).toString()}`;
+
+    return {
+        redirect: url,
+        code_verifier: challenge.code
+    }
+}
+
+export const get_auth = async (code, code_verifier) => {
+    const params = {
+        code: code,
+        code_verifier: code_verifier,
+        grant_type: 'authorization_code',
+        redirect_uri: `${current_host}/login`,
+        client_id: client_id,
+    };
+    const url = `${oauth_url}/token/`
+    const response = await axios.post(url, new URLSearchParams(params));
+
+    return response.data
+}