get authentication working for supabase

src/App.tsx

@@ -3,15 +3,15 @@ import React from 'react';
 import LoginForm from './LoginForm';
 import ScoreCounter from './ScoreCounter';
 import Row from './Row';
-import Icon from './Icon';
 
 import { useJSONLocalStorage, useLocalStorage } from './hooks/useLocalStorage';
-import {toot, starman, flush, getCheer} from './sound';
+import {toot, starman, flush} from './sound';
+
+import {supabase} from './api';
+import {User} from '@supabase/supabase-js';
 
 import './App.css';
 
-
-
 interface Stats {
   attempts: number;
   scheduledPoops: number;
@@ -34,10 +34,22 @@ const initialStreakTracker:StreakTracker = {
 function App() {
 
   const [stats, setStats] =  useJSONLocalStorage<Stats>("stats", initialStats);
-  const [name] = useLocalStorage<string>("name", {});
+  const [user, setUser] = React.useState<User | undefined>();
-  const [password] = useLocalStorage<string>("password", {});
+  const [loading, setLoading] = React.useState<boolean>(true);
+  React.useEffect(() => {
+    supabase.auth.getUser().then(res => {
+      if(res.data.user) {
+        setUser(res.data.user);
+      }
+      setLoading(false);
+      if(res.error) {
+        console.error(res.error);
+      }
+    });
 
-  return !name || !password ? <LoginForm /> :(
+  }, []);
+
+  return loading ? <></> : !user ? <LoginForm setUser={setUser}/> : (
     <div className="App">
       <div className="header">
         <div className="name-plate">Hello Pax!</div>

src/LoginForm.tsx

@@ -1,32 +1,54 @@
 import React from 'react';
 import './LoginForm.css';
 
-import { useLocalStorage } from './hooks/useLocalStorage';
+import {supabase} from './api';
+import {User} from '@supabase/supabase-js';
 
-const LoginForm = () => {
+interface LoginFormProps {
-  const [, setName] = useLocalStorage<string>('name', {});
+  setUser: React.Dispatch<React.SetStateAction<User | undefined>>;
-  const [, setPassword] = useLocalStorage<string>('password', {});
+}
+
+const LoginForm:React.FC<LoginFormProps> = ({setUser}) => {
+  const [error, setError] = React.useState<string|undefined>();
+  const [submitting, setSubmitting] = React.useState<boolean>(false);
+  const [login, setLogin] = React.useState<string>("");
+  const [password, setPassword] = React.useState<string>("");
 
   return (
     <form
       className="form-login"
-      onSubmit={e => {
+      onSubmit={async e => {
         e.preventDefault();
-        console.log('BLARG');
+        if(login) {
-        const inputs = new FormData(e.target as HTMLFormElement);
+          setSubmitting(true); 
-        setName(inputs.get('name') as string);
+          setError(undefined);
-        setPassword(inputs.get('password') as string);
+          const {data, error: loginError} = await supabase.auth.signInWithPassword({
+            email: login,
+            password
+          });
+          setSubmitting(false)
+          if(loginError) {
+            setError(loginError.message || "Error authenticating");
+            console.error(loginError);
+            return;
+          }
+          if(data.user) {
+            setUser(data.user);
+          }
+        }
       }}
     >
       <label>
-        Name:
+        User:
-        <input name="name" minLength={2} />
+        <input onChange={e => setLogin(e.target.value)} name="user" minLength={2} required/>
       </label>
       <label>
-        Password: + <input name="password" type="password" minLength={3} />
+        Password:
+        <input name="password" onChange={e =>  setPassword(e.target.value)}type="password" minLength={8} required/>
       </label>
+      <div className="errors">{error && error}</div>
       <div className="button-row">
-        <button type="submit">Let's Go!</button>
+        <button disabled={!login || !password || !!submitting} type="submit">Let's Go!</button>
       </div>
     </form>
   );

src/api.tsx

@@ -1,7 +1,9 @@
 import { createClient } from "@supabase/supabase-js";
-import { REACT_APP_SUPABASE_URL, REACT_APP_SUPABASE_KEY } from './constants.ts';
+import { SB_ANON_KEY, SB_URL } from './constants';
 
 export const supabase = createClient(
-    REACT_APP_SUPABASE_URL,
+    SB_URL,
-    REACT_APP_SUPABASE_KEY
+    SB_ANON_KEY
 );
+
+

src/constants.ts

@@ -1,4 +1,12 @@
-export const SB_ANON_KEY = process.env.REACT_APP_SB_ANON_KEY;
+
-export const SB_URL = process.env.REACT_APP_SB_URL;
+if(!process.env.REACT_APP_SB_ANON_KEY) {
+  console.error("No REACT_APP_SB_ANON_KEY env var provided.  Closing App.")
+}
+if(!process.env.REACT_APP_SB_URL){
+  console.error("No REACT_APP_SB_URL env var provided.  Closing App.")
+}
+
+export const SB_ANON_KEY = process.env.REACT_APP_SB_ANON_KEY as string;
+export const SB_URL = process.env.REACT_APP_SB_URL as string;