get authentication working for supabase

This commit is contained in:
John Shaver 2023-04-10 14:26:02 -07:00
parent ba15c15ff9
commit 32219acf33
4 changed files with 69 additions and 25 deletions

View file

@ -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 [password] = useLocalStorage<string>("password", {});
const [user, setUser] = React.useState<User | undefined>();
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>

View file

@ -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 = () => {
const [, setName] = useLocalStorage<string>('name', {});
const [, setPassword] = useLocalStorage<string>('password', {});
interface LoginFormProps {
setUser: React.Dispatch<React.SetStateAction<User | undefined>>;
}
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');
const inputs = new FormData(e.target as HTMLFormElement);
setName(inputs.get('name') as string);
setPassword(inputs.get('password') as string);
if(login) {
setSubmitting(true);
setError(undefined);
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:
<input name="name" minLength={2} />
User:
<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>
);

View file

@ -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,
REACT_APP_SUPABASE_KEY
SB_URL,
SB_ANON_KEY
);

View file

@ -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;