get authentication working for supabase
This commit is contained in:
parent
ba15c15ff9
commit
32219acf33
4 changed files with 69 additions and 25 deletions
26
src/App.tsx
26
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 [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>
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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
|
||||
);
|
||||
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
||||
|
|
Loading…
Reference in a new issue