0.0.21

- Add ez deploy script
- Half implemented JWT refresh tokens, need to finish JS implementation

web/src/Api/index.js

@@ -1,17 +1,19 @@
 import axios from 'axios';
 import jwt from 'jwt-decode'
 import { toast } from 'react-toastify';
+import AuthContext from '../Contexts/AuthContext';
+import { useContext } from 'react';
 
 function getHeaders() {
-  // TODO: move this to use Context values instead.
   const user = JSON.parse(localStorage.getItem('user'));
 
   if (user && user.jwt) {
     var unixtime = Math.round((new Date()).getTime() / 1000);
     if (user.exp < unixtime) {
-      // TODO: Handle expiry nicer
-      toast.warning("Session expired. Please log in again")
-      // localStorage.removeItem('user');
+      // Trigger refresh
+      localStorage.removeItem('user');
+      window.location.reload();
+      // toast.warning("Session expired. Please log in again")
       // window.location.reload();
       return {};
     }
@@ -58,7 +60,9 @@ export const PostLogin = (formValues) => {
           uuid: expandedUser.sub,
           exp: expandedUser.exp,
           username: expandedUser.username,
-          admin: expandedUser.admin
+          admin: expandedUser.admin,
+          refresh_token: expandedUser.refresh_token,
+          refresh_exp: expandedUser.refresh_exp,
         }
 
         toast.success('Successfully logged in.');
@@ -79,6 +83,39 @@ export const PostLogin = (formValues) => {
     });
 };
 
+export const PostRefreshToken = (refreshToken) => {
+  return axios.post(process.env.REACT_APP_API_URL + "refresh", {token: refreshToken})
+    .then((response) => {
+      if (response.data.token) {
+        let expandedUser = jwt(response.data.token)
+        let user = {
+          jwt: response.data.token,
+          uuid: expandedUser.sub,
+          exp: expandedUser.exp,
+          username: expandedUser.username,
+          admin: expandedUser.admin,
+          refresh_token: expandedUser.refresh_token,
+          refresh_exp: expandedUser.refresh_exp,
+        }
+
+        return user;
+      } else {
+        toast.error(response.data.error ? response.data.error: 'An Unknown Error has occurred');
+        return null
+      }
+    }).catch((error) => {
+      if (error.response === 401)  {
+        toast.error('Unauthorized')
+      } else if (error.response === 429) {
+        toast.error('Rate limited. Please try again shortly')
+      } else {
+        toast.error('Failed to connect');
+      }
+      return Promise.resolve();
+    });
+};
+
+
 export const PostRegister = (formValues) => {
   return axios.post(process.env.REACT_APP_API_URL + "register", formValues)
     .then((response) => {

web/src/Contexts/AuthContextProvider.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { toast } from 'react-toastify';
 import AuthContext from './AuthContext';
-import { PostLogin, PostRegister, PostResetPassword } from '../Api/index';
+import { PostLogin, PostRegister, PostResetPassword, PostRefreshToken } from '../Api/index';
 
 const AuthContextProvider = ({ children }) => {
   const [user, setUser] = useState();
@@ -9,9 +9,22 @@ const AuthContextProvider = ({ children }) => {
 
   useEffect(() => {
     setLoading(true)
-    const user = JSON.parse(localStorage.getItem('user'));
+    let curTime = Math.round((new Date()).getTime() / 1000);
+    let user = JSON.parse(localStorage.getItem('user'));
+
+    // Confirm JWT is set.
     if (user && user.jwt) {
-      setUser(user)
+      // Check refresh expiry is valid.
+      if (user.refresh_exp && (user.refresh_exp > curTime)) {
+        // Check if JWT is still valid
+        if (user.exp < curTime) {
+          // Refresh if not
+          user = RefreshToken(user.refresh_token)
+          localStorage.setItem('user', JSON.stringify(user));
+        }
+
+        setUser(user)
+      }
     }
     setLoading(false)
   }, []);
@@ -35,7 +48,11 @@ const AuthContextProvider = ({ children }) => {
   };
 
   const ResetPassword = (formValues) => {
-    return PostResetPassword(formValues)
+    return PostResetPassword(formValues);
+  }
+
+  const RefreshToken = (refreshToken) => {
+    return PostRefreshToken(refreshToken);
   }
 
   const Logout = () => {
@@ -51,6 +68,7 @@ const AuthContextProvider = ({ children }) => {
         Login,
         Register,
         ResetPassword,
+        RefreshToken,
         loading,
         user,
       }}

web/src/Pages/About.js

@@ -8,7 +8,7 @@ const About = () => {
         About GoScrobble.com
       </h1>
       <p className="aboutBody">
-        Go-Scrobble is an open source music scorbbling service written in Go and React.<br/>
+        Go-Scrobble is an open source music scrobbling service written in Go and React.<br/>
         Used to track your listening history and build a profile to discover new music.
       </p>
       <a

web/src/Pages/Home.js

@@ -8,7 +8,7 @@ const Home = () => {
   return (
     <div className="pageWrapper">
       <img src={logo} className="App-logo" alt="logo" />
-      <p className="homeText">Go-Scrobble is an open source music scrobbling service written in Go and React.</p>
+      <p className="homeText">GoScrobble is an open source music scrobbling service.</p>
       <HomeBanner />
     </div>
     );