Fix: Entering first time should silently redirect to /login

src/Pages/Login.jsx

@@ -5,7 +5,7 @@ import { Container } from '@mui/material'
 import Link from '@mui/material/Link'
 import { useState } from 'react'
 import { useNavigate } from "react-router-dom";
-import { loadUser } from '../utils'
+import { checkLogin, loadUser } from '../utils'
 
 // TODO: change api key and token inputs to one input for Copy -> Request Headers
 
@@ -14,7 +14,7 @@ export default function Login() {
     const navigate = useNavigate()
 
     const [ token, setToken ] = useState('')
-    const [ apikey, setApiKey ] = useState(localStorage.getItem("apikey"))
+    const [ apikey, setApiKey ] = useState(localStorage.getItem("apikey") == null ? '' : localStorage.getItem('apikey'))
     const [ failText, setFailText ] = useState('')
     const [ apiKeyErr, setApiKeyErr ] = useState(false)
     const [ tokenErr, setTokenErr ] = useState(false)
@@ -31,7 +31,7 @@ export default function Login() {
         // ensure the bearer token provided is valid 
         localStorage.setItem('token', token)
         localStorage.setItem('apikey', apikey)
-        loadUser().then((r) => {
+        checkLogin().then((r) => {
             setLoading(false)
             if (r.success) {
                 navigate('/')
@@ -59,7 +59,7 @@ export default function Login() {
                 <p className='text-center'>Add your Pithee api key and authorization token to start using Prittee.<br/>
                     You can find out how to get your info <Link href="https://zircon-stoplight-fbb.notion.site/Prittee-Introduction-0e418deda00242ebb6026d074b397629">here</Link>.</p>
                 <Box component="div" display="flex" flexDirection="row" alignItems="center" justifyContent="center" gap={4} className='mt-6'>
-                    <TextField id="apikey" error={apiKeyErr} onChange={onApiKeyChange} label="API Key" variant="outlined" value={localStorage.getItem("apikey")} />
+                    <TextField id="apikey" error={apiKeyErr} onChange={onApiKeyChange} label="API Key" variant="outlined" value={apikey} />
                     <TextField id="auth-token" error={tokenErr} helperText={failText} onChange={onTokenChange} label="Authorization Token" variant="outlined" />
                     <LoadingButton loading={loading} variant="text" size="large" onClick={addUserToken}>Let's Go</LoadingButton>
                 </Box>

src/Pages/Profile.jsx

@@ -36,7 +36,6 @@ export default function Profile() {
             <Await resolve={Promise.all([user, posts]).then(value => value)}>
                 {(value) => {
                     let [ user, posts ] = value
-                    user = user.user
                     const totalPoints = user.total_points > 0 ? user.total_points : posts.reduce((n, p) => n + p.points, 0);
                     return(
                         <Box className='flex flex-col items-center'>

src/utils.js

@@ -19,8 +19,29 @@ const tierIds = [
     '402261d8-4db8-4e24-8886-90dc6da6fcd1'
 ]
 
-
 const loadUser = async function() {
+    return new Promise((resolve) => {
+        fetch('https://oqutjaxxxzzbjtyrfoka.supabase.co/rest/v1/rpc/get_player_data', {
+            method: 'POST', // why post?
+            headers: {
+                "APIKey": localStorage.getItem("apikey"),
+                "Authorization": localStorage.getItem("token")
+            }
+        }).then(r =>  r.json().then(data => ({status: r.status, body: data})))
+        .then((r) => {
+            // note: when an empty bearer token is provided, the server responds with 200 OK with an empty array as
+            // the body instead of the expected 401. This is a bug with Pithee that we need to account for!
+            if (r.body.length > 0) {
+                resolve(r.body[0])
+            } else {
+                alertLoginExpired()
+            }
+        })
+    })
+}
+
+
+const checkLogin = async function() {
     return new Promise((resolve) => {
         fetch('https://oqutjaxxxzzbjtyrfoka.supabase.co/rest/v1/rpc/get_player_data', {
             method: 'POST', // why post?
@@ -51,7 +72,7 @@ const loadUser = async function() {
                 })
             }
         }).catch((err) => {
-            alert(err)
+            // alert(err)
             resolve({
                 success: false,
             })
@@ -80,8 +101,7 @@ const loadUserPosts = async function () {
 
             resolve(r.body)
         } else {
-            alert("Your token has expired. Please re-enter your information to keep using Prittee.")
+            alertLoginExpired()
-            window.location.href = '/login'
         }
     })
 })
@@ -180,8 +200,7 @@ const makePitheeNoContentApiCall = async function(url, method, body) {
             if (r.status >= 200 && r.status <= 299) { // OK range
                 resolve(r.body)
             } else if (r.status === 401) {
-                alert("Your token has expired. Please re-enter your information to keep using Prittee.")
+                alertLoginExpired()
-                window.location.href = '/login'
             } else {
                 // TODO: this is little information for the client.
                 // the server could be responding with a 401 due to expired
@@ -211,13 +230,11 @@ const makePitheeApiCall = async function(url, method, body) {
             if (r.status >= 200 && r.status <= 299) { // OK range
                 // check if empty array is given (token is null)
                 if (r.body.length == 0) {
-                    alert("Your token has expired. Please re-enter your information to keep using Prittee.")
+                    alertLoginExpired()
-                    window.location.href = '/login'
                 }
                 resolve(r.body)
             } else if (r.status === 401) {
-                alert("Your token has expired. Please re-enter your information to keep using Prittee.")
+                alertLoginExpired()
-                window.location.href = '/login'
             } else {
                 // TODO: this is little information for the client.
                 // the server could be responding with a 401 due to expired
@@ -229,6 +246,16 @@ const makePitheeApiCall = async function(url, method, body) {
     })
 }
 
+// sends the "Your login has expired" alert IF the user has logged in before
+// sends a silent redirect to /login if the user has never logged in
+const alertLoginExpired = () => {
+    if (localStorage.getItem('apikey') != null) {
+        console.log(localStorage.getItem('apikey'))
+        alert("Your token has expired. Please re-enter your information to keep using Prittee.")
+    }
+    window.location.href = '/login'
+}
+
 export { 
     loadUser, 
     loadWinArchive, 
@@ -239,4 +266,5 @@ export {
     loadUserPosts, 
     loadLeaderboardPage,
     insertPost,
+    checkLogin,
 }