diff --git a/src/app/Home.tsx b/src/app/Home.tsx
index c76db620..44d1f189 100644
--- a/src/app/Home.tsx
+++ b/src/app/Home.tsx
@@ -4,9 +4,8 @@
 
 import * as React from 'react';
 
-import { Link } from 'wouter';
+import { Link, useLocation } from 'wouter';
 import clsx from 'clsx';
-import { styled } from '@mui/material/styles';
 import AppBar from '@mui/material/AppBar';
 import Button from '@mui/material/Button';
 import Grid from '@mui/material/Grid';
@@ -19,7 +18,6 @@ import Paper from '@mui/material/Paper';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
 import Avatar from '@mui/material/Avatar';
-import { List } from 'immutable';
 import { PopoverOrigin } from '@mui/material/Popover';
 import AccountCircle from '@mui/icons-material/AccountCircle';
 import MenuIcon from '@mui/icons-material/Menu';
@@ -27,11 +25,9 @@ import MenuIcon from '@mui/icons-material/Menu';
 import { NewProject } from './NewProject';
 import { Project } from './Project';
 import { User } from './User';
-
-interface HomeState {
-  anchorEl?: HTMLElement;
-  projects: List<Project>;
-}
+import { Suspense, useEffect, useRef, useState } from 'react';
+import { useMediaQuery } from '@mui/system';
+import { styled } from '@mui/material';
 
 interface HomeProps {
   user: User;
@@ -44,162 +40,141 @@ const AnchorOrigin: PopoverOrigin = {
   horizontal: 'right',
 };
 
-const Home = styled(
-  class HomeInner extends React.Component<HomeProps & { className?: string }, HomeState> {
-    state: HomeState;
-
-    constructor(props: HomeProps) {
-      super(props);
-
-      this.state = {
-        anchorEl: undefined,
-        projects: List<Project>(),
-      };
-
-      // eslint-disable-next-line @typescript-eslint/no-misused-promises
-      setTimeout(this.getProjects);
-    }
-
-    getProjects = async (): Promise<void> => {
-      const response = await fetch('/api/projects', { credentials: 'same-origin' });
-      const status = response.status;
-      if (!(status >= 200 && status < 400)) {
-        console.log("couldn't fetch projects.");
-        return;
-      }
-      const projects = (await response.json()) as Project[];
-      this.setState({
-        projects: List(projects),
-      });
-    };
-
-    handleClose = () => {
-      this.setState({
-        anchorEl: undefined,
-      });
-    };
-
-    handleMenu = (event: React.MouseEvent<HTMLElement>) => {
-      this.setState({
-        anchorEl: event.currentTarget,
-      });
-    };
+async function fetchProjects() {
+  const response = await fetch('/api/projects', { credentials: 'same-origin' });
+  const status = response.status;
+  if (!(status >= 200 && status < 400)) {
+    console.log("Couldn't fetch projects.");
+    return [];
+  }
+  return (await response.json()) as Project[];
+}
 
-    handleProjectCreated = (project: Project) => {
-      window.location.pathname = '/' + project.id;
-    };
+function NewProjectForm({ user }: { user: User }) {
+  const [, navigate] = useLocation();
+  function handleProjectCreated(project: Project) {
+    navigate('/' + project.id);
+  }
+  return (
+    <div className="simlin-home-newprojectform">
+      <Grid container direction="row" justifyContent="center" alignItems="center">
+        <Grid item>
+          <NewProject user={user} onProjectCreated={handleProjectCreated} />
+        </Grid>
+      </Grid>
+    </div>
+  );
+}
 
-    getGridListCols = () => {
-      // TODO: this should be 1 on small screens, but useMediaQuery doesn't
-      //       work in class components, only function components.
-      return 2;
+function Projects() {
+  const isLargeScreen = useMediaQuery('(min-width:600px)');
+  const gridListCols = isLargeScreen ? 2 : 1;
+  const [projects, setProjects] = useState<Project[]>([]);
+
+  useEffect(() => {
+    let ignore = false;
+    fetchProjects().then((projects) => {
+      if (!ignore) setProjects(projects);
+    });
+    return () => {
+      ignore = true;
     };
+  }, []);
+
+  return (
+    <div className="simlin-home-projectgrid">
+      <ImageList cols={gridListCols} gap={0}>
+        {projects.map((project) => (
+          <ImageListItem key={project.id} style={{ height: 'auto' }}>
+            <Link to={`/${project.id}`} className="simlin-home-modellink">
+              <Paper className="simlin-home-paper" elevation={4}>
+                <div className="simlin-home-preview">
+                  <img src={`/api/preview/${project.id}`} alt="model preview" className="simlin-home-previewimg" />
+                </div>
+                <Typography variant="h5" component="h3">
+                  {project.displayName}
+                </Typography>
+                <Typography component="p">{project.description}&nbsp;</Typography>
+              </Paper>
+            </Link>
+          </ImageListItem>
+        ))}
+      </ImageList>
+    </div>
+  );
+}
 
-    newProjectForm() {
-      return (
-        <div className="simlin-home-newprojectform">
-          <Grid container direction="row" justifyContent="center" alignItems="center">
-            <Grid item>
-              <NewProject user={this.props.user} onProjectCreated={this.handleProjectCreated} />
-            </Grid>
-          </Grid>
-        </div>
-      );
-    }
-
-    projects() {
-      const { projects } = this.state;
-      return (
-        <div className="simlin-home-projectgrid">
-          <ImageList cols={this.getGridListCols()} gap={0}>
-            {projects.map((project) => (
-              <ImageListItem key={project.id} style={{ height: 'auto' }}>
-                <Link to={`/${project.id}`} className="simlin-home-modellink">
-                  <Paper className="simlin-home-paper" elevation={4}>
-                    <div className="simlin-home-preview">
-                      <img src={`/api/preview/${project.id}`} alt="model preview" className="simlin-home-previewimg" />
-                    </div>
-                    <Typography variant="h5" component="h3">
-                      {project.displayName}
-                    </Typography>
-                    <Typography component="p">{project.description}&nbsp;</Typography>
-                  </Paper>
-                </Link>
-              </ImageListItem>
-            ))}
-          </ImageList>
-        </div>
-      );
-    }
-
-    render() {
-      const { className } = this.props;
-      const { anchorEl } = this.state;
-      const { photoUrl } = this.props.user;
-      const open = Boolean(anchorEl);
-
-      const account = photoUrl ? (
-        <Avatar alt={this.props.user.displayName} src={photoUrl} className="simlin-home-avatar" />
+function Home(props: HomeProps & { className?: string }) {
+  const anchorEl = useRef<HTMLButtonElement>(null);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  const account = props.user.photoUrl ? (
+    <Avatar alt={props.user.displayName} src={props.user.photoUrl} className="simlin-home-avatar" />
+  ) : (
+    <AccountCircle />
+  );
+
+  return (
+    <div className={clsx(props.className, 'simlin-home-root')}>
+      <AppBar position="fixed">
+        <Toolbar variant="dense">
+          <IconButton className="simlin-home-menubutton" color="inherit" aria-label="Menu">
+            <MenuIcon />
+          </IconButton>
+          <Typography variant="h6" color="inherit" className="simlin-home-flex">
+            <Link to="/" className="simlin-home-modellink">
+              Simlin
+            </Link>
+            {/*&nbsp;*/}
+            {/*<span className={classes.sdTitle}>*/}
+            {/*  System Dynamics*/}
+            {/*</span>*/}
+          </Typography>
+          <div>
+            <Link to="/new" className="simlin-home-modellink">
+              <Button variant="outlined" className="simlin-home-newprojectbutton">
+                New Project
+              </Button>
+            </Link>
+
+            <IconButton
+              className="simlin-home-profileicon"
+              aria-owns={isMenuOpen ? 'menu-appbar' : undefined}
+              aria-haspopup="true"
+              onClick={() => setIsMenuOpen(true)}
+              color="inherit"
+              ref={anchorEl}
+            >
+              {account}
+            </IconButton>
+            <Menu
+              id="menu-appbar"
+              anchorEl={anchorEl.current}
+              anchorOrigin={AnchorOrigin}
+              transformOrigin={AnchorOrigin}
+              open={isMenuOpen}
+              onClose={() => setIsMenuOpen(false)}
+            >
+              <MenuItem onClick={() => setIsMenuOpen(false)}>Logout</MenuItem>
+            </Menu>
+          </div>
+        </Toolbar>
+      </AppBar>
+      <br />
+      <br />
+      <br />
+      {props.isNewProject ? (
+        <NewProjectForm user={props.user} />
       ) : (
-        <AccountCircle />
-      );
-
-      const content = this.props.isNewProject ? this.newProjectForm() : this.projects();
-
-      return (
-        <div className={clsx(className, 'simlin-home-root')}>
-          <AppBar position="fixed">
-            <Toolbar variant="dense">
-              <IconButton className="simlin-home-menubutton" color="inherit" aria-label="Menu">
-                <MenuIcon />
-              </IconButton>
-              <Typography variant="h6" color="inherit" className="simlin-home-flex">
-                <Link to="/" className="simlin-home-modellink">
-                  Simlin
-                </Link>
-                {/*&nbsp;*/}
-                {/*<span className={classes.sdTitle}>*/}
-                {/*  System Dynamics*/}
-                {/*</span>*/}
-              </Typography>
-              <div>
-                <Link to="/new" className="simlin-home-modellink">
-                  <Button variant="outlined" className="simlin-home-newprojectbutton">
-                    New Project
-                  </Button>
-                </Link>
+        <Suspense fallback={'Loading'}>
+          <Projects />
+        </Suspense>
+      )}
+    </div>
+  );
+}
 
-                <IconButton
-                  className="simlin-home-profileicon"
-                  aria-owns={open ? 'menu-appbar' : undefined}
-                  aria-haspopup="true"
-                  onClick={this.handleMenu}
-                  color="inherit"
-                >
-                  {account}
-                </IconButton>
-                <Menu
-                  id="menu-appbar"
-                  anchorEl={anchorEl}
-                  anchorOrigin={AnchorOrigin}
-                  transformOrigin={AnchorOrigin}
-                  open={open}
-                  onClose={this.handleClose}
-                >
-                  <MenuItem onClick={this.handleClose}>Logout</MenuItem>
-                </Menu>
-              </div>
-            </Toolbar>
-          </AppBar>
-          <br />
-          <br />
-          <br />
-          {content}
-        </div>
-      );
-    }
-  },
-)(() => ({
+export default styled(Home)({
   '&.simlin-home-root': {
     flexGrow: 1,
   },
@@ -253,6 +228,4 @@ const Home = styled(
     marginRight: 'auto',
     maxWidth: 1024,
   },
-}));
-
-export default Home;
+});
diff --git a/src/app/Login.tsx b/src/app/Login.tsx
index 44dae3e1..27e8d870 100644
--- a/src/app/Login.tsx
+++ b/src/app/Login.tsx
@@ -26,9 +26,10 @@ import CardActions from '@mui/material/CardActions';
 import CardContent from '@mui/material/CardContent';
 import Link from '@mui/material/Link';
 import Typography from '@mui/material/Typography';
-import TextField from '@mui/material/TextField';
+import TextField, { TextFieldProps } from '@mui/material/TextField';
 
 import { ModelIcon } from '@system-dynamics/diagram/ModelIcon';
+import { FormEvent, useState } from 'react';
 
 type EmailLoginStates = 'showEmail' | 'showPassword' | 'showSignup' | 'showProviderRedirect' | 'showRecover';
 
@@ -40,11 +41,6 @@ export interface LoginProps {
 interface LoginState {
   emailLoginFlow: EmailLoginStates | undefined;
   email: string;
-  emailError: string | undefined;
-  password: string;
-  passwordError: string | undefined;
-  fullName: string;
-  fullNameError: string | undefined;
   provider: 'google.com' | 'apple.com' | undefined;
 }
 
@@ -55,7 +51,12 @@ function appleProvider(): OAuthProvider {
   return provider;
 }
 
-export const GoogleIcon: React.FunctionComponent = styled((props) => {
+function getInputAndValue(event: FormEvent<HTMLFormElement>, elementName: string) {
+  const input = event.currentTarget.elements.namedItem(elementName) as HTMLInputElement;
+  return { input, value: input.value };
+}
+
+export const GoogleIcon = styled((props) => {
   return (
     <SvgIcon {...props}>
       <path d="M12.545,10.239v3.821h5.445c-0.712,2.315-2.647,3.972-5.445,3.972c-3.332,0-6.033-2.701-6.033-6.032s2.701-6.032,6.033-6.032c1.498,0,2.866,0.549,3.921,1.453l2.814-2.814C17.503,2.988,15.139,2,12.545,2C7.021,2,2.543,6.477,2.543,12s4.478,10,10.002,10c8.396,0,10.249-7.85,9.426-11.748L12.545,10.239z" />
@@ -65,431 +66,314 @@ export const GoogleIcon: React.FunctionComponent = styled((props) => {
   fill: white;
 `);
 
-export const Login = styled(
-  class Login extends React.Component<LoginProps & { className?: string }, LoginState> {
-    state: LoginState;
-
-    constructor(props: LoginProps) {
-      super(props);
-
-      this.state = {
-        emailLoginFlow: undefined,
-        email: '',
-        emailError: undefined,
-        password: '',
-        passwordError: undefined,
-        fullName: '',
-        fullNameError: undefined,
-        provider: undefined,
-      };
-    }
+function LoginInner({ auth, disabled }: LoginProps) {
+  const [state, setState] = useState<LoginState>({
+    emailLoginFlow: undefined,
+    email: '',
+    provider: undefined,
+  });
 
-    appleLoginClick = () => {
-      const provider = appleProvider();
-      // eslint-disable-next-line @typescript-eslint/no-misused-promises
-      setTimeout(async () => {
-        await signInWithRedirect(this.props.auth, provider);
-      });
-    };
-    googleLoginClick = () => {
-      const provider = new GoogleAuthProvider();
-      provider.addScope('profile');
-      // eslint-disable-next-line @typescript-eslint/no-misused-promises
-      setTimeout(async () => {
-        await signInWithRedirect(this.props.auth, provider);
-      });
-    };
-    emailLoginClick = () => {
-      this.setState({ emailLoginFlow: 'showEmail' });
-    };
-    onFullNameChanged = (event: React.ChangeEvent<HTMLInputElement>) => {
-      this.setState({ fullName: event.target.value });
-    };
-    onPasswordChanged = (event: React.ChangeEvent<HTMLInputElement>) => {
-      this.setState({ password: event.target.value });
-    };
-    onEmailChanged = (event: React.ChangeEvent<HTMLInputElement>) => {
-      this.setState({ email: event.target.value });
-    };
-    onEmailCancel = () => {
-      this.setState({ emailLoginFlow: undefined });
-    };
-    onSubmitEmail = async () => {
-      const email = this.state.email.trim();
-      if (!email) {
-        this.setState({ emailError: 'Enter your email address to continue' });
-        return;
-      }
+  if (disabled) return <></>;
+
+  async function appleLoginClick(event: FormEvent) {
+    event.preventDefault();
+    await signInWithRedirect(auth, appleProvider());
+  }
+
+  async function googleLoginClick(event: FormEvent) {
+    event.preventDefault();
+    const provider = new GoogleAuthProvider();
+    provider.addScope('profile');
+    await signInWithRedirect(auth, provider);
+  }
+
+  function emailLoginClick() {
+    setState((state) => ({ ...state, emailLoginFlow: 'showEmail' }));
+  }
+
+  function onEmailCancel() {
+    setState((state) => ({ ...state, emailLoginFlow: undefined }));
+  }
+
+  async function onSubmitEmail(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+
+    const { input, value: email } = getInputAndValue(event, 'email');
 
-      const methods = await fetchSignInMethodsForEmail(this.props.auth, email);
-      if (methods.includes('password')) {
-        this.setState({ emailLoginFlow: 'showPassword' });
-      } else if (methods.length === 0) {
-        this.setState({ emailLoginFlow: 'showSignup' });
+    const methods = await fetchSignInMethodsForEmail(auth, email);
+    if (methods.includes('password')) setState((state) => ({ ...state, email, emailLoginFlow: 'showPassword' }));
+    else if (methods.length === 0) setState((state) => ({ ...state, email, emailLoginFlow: 'showSignup' }));
+    else {
+      // we only allow 1 method
+      const method = methods[0];
+      if (method === 'google.com' || method === 'apple.com') {
+        setState((state) => ({
+          ...state,
+          emailLoginFlow: 'showProviderRedirect',
+          provider: methods[0] as 'google.com' | 'apple.com',
+        }));
       } else {
-        // we only allow 1 method
-        const method = methods[0];
-        if (method === 'google.com' || method === 'apple.com') {
-          this.setState({
-            emailLoginFlow: 'showProviderRedirect',
-            provider: methods[0] as 'google.com' | 'apple.com',
-          });
-        } else {
-          this.setState({
-            emailError: 'an unknown error occurred; try a different email address',
-          });
-        }
-      }
-    };
-    onSubmitRecovery = async () => {
-      const email = this.state.email.trim();
-      if (!email) {
-        this.setState({ emailError: 'Enter your email address to continue' });
-        return;
+        input.setCustomValidity('An unknown error occurred; try a different email address');
+        input.reportValidity();
       }
+    }
+  }
 
-      await sendPasswordResetEmail(this.props.auth, email);
-
-      this.setState({
-        emailLoginFlow: 'showPassword',
-        password: '',
-        passwordError: undefined,
-      });
-    };
-    onSubmitNewUser = async () => {
-      const email = this.state.email.trim();
-      if (!email) {
-        this.setState({ emailError: 'Enter your email address to continue' });
-        return;
-      }
+  async function onSubmitRecovery(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
 
-      const fullName = this.state.fullName.trim();
-      if (!fullName) {
-        this.setState({ emailError: 'Enter your email address to continue' });
-        return;
-      }
+    const { value: email } = getInputAndValue(event, 'email');
 
-      const password = this.state.password.trim();
-      if (!password) {
-        this.setState({ passwordError: 'Enter your email address to continue' });
-        return;
-      }
+    await sendPasswordResetEmail(auth, email);
 
-      try {
-        const userCred = await createUserWithEmailAndPassword(this.props.auth, email, password);
-        await updateProfile(userCred.user, { displayName: fullName });
-      } catch (err) {
-        console.log(err);
-        if (err instanceof Error) {
-          this.setState({ passwordError: err.message });
-        } else {
-          this.setState({ passwordError: 'something unknown went wrong' });
-        }
-      }
-    };
-    onNullSubmit = (event: React.FormEvent<HTMLFormElement>): boolean => {
-      event.preventDefault();
-      return false;
-    };
-    onEmailHelp = () => {
-      this.setState({ emailLoginFlow: 'showRecover' });
-    };
-    onEmailLogin = async () => {
-      const email = this.state.email.trim();
-      if (!email) {
-        this.setState({ emailError: 'Enter your email address to continue' });
-        return;
-      }
+    setState((state) => ({ ...state, emailLoginFlow: 'showPassword' }));
+  }
 
-      const password = this.state.password.trim();
-      if (!password) {
-        this.setState({ passwordError: 'Enter your email address to continue' });
-        return;
-      }
+  async function onSubmitNewUser(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+
+    const { value: email } = getInputAndValue(event, 'email');
+    const { value: fullName } = getInputAndValue(event, 'fullName');
+    const { input: passwordInput, value: password } = getInputAndValue(event, 'password');
 
-      try {
-        await signInWithEmailAndPassword(this.props.auth, email, password);
-      } catch (err) {
-        console.log(err);
-        if (err instanceof Error) {
-          this.setState({ passwordError: err.message });
-        }
+    try {
+      const userCred = await createUserWithEmailAndPassword(auth, email, password);
+      await updateProfile(userCred.user, { displayName: fullName });
+    } catch (err) {
+      console.error(err);
+      if (err instanceof Error) {
+        passwordInput.setCustomValidity(err.message);
+      } else {
+        passwordInput.setCustomValidity('Something unknown went wrong');
       }
-    };
-    render() {
-      const { className } = this.props;
-      const disabledClass = this.props.disabled ? 'simlin-login-disabled' : 'simlin-login-inner-inner';
-
-      let loginUI: JSX.Element | undefined = undefined;
-      if (!this.props.disabled) {
-        switch (this.state.emailLoginFlow) {
-          case 'showEmail':
-            loginUI = (
-              <Card
-                variant="outlined"
-                sx={{ minWidth: 275, maxWidth: 360, width: '100%' }}
-                className="simlin-login-email-form"
-              >
-                <form onSubmit={this.onNullSubmit}>
-                  <CardContent>
-                    <Typography variant="h6" component="div">
-                      Sign in with email
-                    </Typography>
-                    <TextField
-                      label="Email"
-                      value={this.state.email}
-                      onChange={this.onEmailChanged}
-                      type="email"
-                      margin="normal"
-                      variant="standard"
-                      error={this.state.emailError !== undefined}
-                      helperText={this.state.emailError}
-                      fullWidth
-                      autoFocus
-                    />
-                  </CardContent>
-                  <CardActions>
-                    <Button sx={{ marginLeft: 'auto' }} onClick={this.onEmailCancel}>
-                      Cancel
-                    </Button>
-                    {/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
-                    <Button type="submit" variant="contained" onClick={this.onSubmitEmail}>
-                      Next
-                    </Button>
-                  </CardActions>
-                </form>
-              </Card>
-            );
-            break;
-          case 'showPassword':
-            loginUI = (
-              <Card
-                variant="outlined"
-                sx={{ minWidth: 275, maxWidth: 360, width: '100%' }}
-                className="simlin-login-email-form"
-              >
-                <form onSubmit={this.onNullSubmit}>
-                  <CardContent>
-                    <Typography variant="h6" component="div">
-                      Sign in
-                    </Typography>
-                    <TextField
-                      label="Email"
-                      value={this.state.email}
-                      onChange={this.onEmailChanged}
-                      type="email"
-                      margin="normal"
-                      variant="standard"
-                      error={this.state.emailError !== undefined}
-                      helperText={this.state.emailError}
-                      fullWidth
-                    />
-                    <TextField
-                      label="Password"
-                      value={this.state.password}
-                      onChange={this.onPasswordChanged}
-                      type="password"
-                      autoComplete="current-password"
-                      margin="normal"
-                      variant="standard"
-                      error={this.state.passwordError !== undefined}
-                      helperText={this.state.passwordError}
-                      fullWidth
-                      autoFocus
-                    />
-                  </CardContent>
-                  <CardActions>
-                    <Typography sx={{ marginRight: 'auto' }} variant="body2">
-                      <Link sx={{ cursor: 'help' }} underline="hover" onClick={this.onEmailHelp}>
-                        Trouble signing in?
-                      </Link>
-                    </Typography>
-                    {/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
-                    <Button type="submit" variant="contained" onClick={this.onEmailLogin}>
-                      Sign in
-                    </Button>
-                  </CardActions>
-                </form>
-              </Card>
-            );
-            break;
-          case 'showSignup':
-            loginUI = (
-              <Card
-                variant="outlined"
-                sx={{ minWidth: 275, maxWidth: 360, width: '100%' }}
-                className="simlin-login-email-form"
-              >
-                <form onSubmit={this.onNullSubmit}>
-                  <CardContent>
-                    <Typography variant="h6" component="div">
-                      Create account
-                    </Typography>
-                    <TextField
-                      label="Email"
-                      value={this.state.email}
-                      onChange={this.onEmailChanged}
-                      type="email"
-                      margin="normal"
-                      variant="standard"
-                      error={this.state.emailError !== undefined}
-                      helperText={this.state.emailError}
-                      fullWidth
-                    />
-                    <TextField
-                      label="First & last name"
-                      value={this.state.fullName}
-                      onChange={this.onFullNameChanged}
-                      margin="normal"
-                      variant="standard"
-                      error={this.state.fullNameError !== undefined}
-                      helperText={this.state.fullNameError}
-                      fullWidth
-                      autoFocus
-                    />
-                    <TextField
-                      label="Choose password"
-                      value={this.state.password}
-                      onChange={this.onPasswordChanged}
-                      type="password"
-                      autoComplete="current-password"
-                      margin="normal"
-                      variant="standard"
-                      error={this.state.passwordError !== undefined}
-                      helperText={this.state.passwordError}
-                      fullWidth
-                    />
-                  </CardContent>
-                  <CardActions>
-                    <Button sx={{ marginLeft: 'auto' }} onClick={this.onEmailCancel}>
-                      Cancel
-                    </Button>
-                    {/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
-                    <Button type="submit" variant="contained" onClick={this.onSubmitNewUser}>
-                      Save
-                    </Button>
-                  </CardActions>
-                </form>
-              </Card>
-            );
-            break;
-          case 'showProviderRedirect':
-            const provider = this.state.provider === 'google.com' ? 'Google' : 'Apple';
-            loginUI = (
-              <Card
-                variant="outlined"
-                sx={{ minWidth: 275, maxWidth: 360, width: '100%' }}
-                className="simlin-login-email-form"
-              >
-                <form onSubmit={this.onNullSubmit}>
-                  <CardContent>
-                    <Typography variant="h6" component="div">
-                      Sign in - you already have an account
-                    </Typography>
-                    <Typography className="simlin-login-recover-instructions">
-                      You’ve already used {provider} to sign up with <b>{this.state.email}</b>. Sign in with {provider}{' '}
-                      to continue.
-                    </Typography>
-                  </CardContent>
-                  <CardActions>
-                    <Button
-                      sx={{ marginLeft: 'auto' }}
-                      type="submit"
-                      variant="contained"
-                      onClick={this.state.provider === 'google.com' ? this.googleLoginClick : this.appleLoginClick}
-                    >
-                      Sign in with {provider}
-                    </Button>
-                  </CardActions>
-                </form>
-              </Card>
-            );
-            break;
-          case 'showRecover':
-            loginUI = (
-              <Card
-                variant="outlined"
-                sx={{ minWidth: 275, maxWidth: 360, width: '100%' }}
-                className="simlin-login-email-form"
-              >
-                <form onSubmit={this.onNullSubmit}>
-                  <CardContent>
-                    <Typography variant="h6" component="div">
-                      Recover password
-                    </Typography>
-                    <Typography className="simlin-login-recover-instructions">
-                      Get instructions sent to this email that explain how to reset your password
-                    </Typography>
-                    <TextField
-                      label="Email"
-                      value={this.state.email}
-                      onChange={this.onEmailChanged}
-                      type="email"
-                      margin="normal"
-                      variant="standard"
-                      error={this.state.emailError !== undefined}
-                      helperText={this.state.emailError}
-                      fullWidth
-                      autoFocus
-                    />
-                  </CardContent>
-                  <CardActions>
-                    <Button sx={{ marginLeft: 'auto' }} onClick={this.onEmailCancel}>
-                      Cancel
-                    </Button>
-                    {/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
-                    <Button type="submit" variant="contained" onClick={this.onSubmitRecovery}>
-                      Send
-                    </Button>
-                  </CardActions>
-                </form>
-              </Card>
-            );
-            break;
-          default:
-            loginUI = (
-              <div className="simlin-login-options-buttons">
-                <Button
-                  variant="contained"
-                  sx={{ backgroundColor: 'black' }}
-                  startIcon={<AppleIcon />}
-                  onClick={this.appleLoginClick}
-                >
-                  Sign in with Apple
-                </Button>
-                <br />
-                <Button variant="contained" color="primary" startIcon={<GoogleIcon />} onClick={this.googleLoginClick}>
-                  Sign in with Google
-                </Button>
-                <br />
-                <Button
-                  variant="contained"
-                  sx={{ backgroundColor: '#db4437' }}
-                  startIcon={<EmailIcon />}
-                  onClick={this.emailLoginClick}
-                >
-                  Sign in with email
-                </Button>
-                <br />
-              </div>
-            );
-        }
+      passwordInput.reportValidity();
+      passwordInput.setCustomValidity('');
+    }
+  }
+
+  function onEmailHelp() {
+    setState((state) => ({ ...state, emailLoginFlow: 'showRecover' }));
+  }
+
+  async function onEmailLogin(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+
+    const { value: email } = getInputAndValue(event, 'email');
+    const { input: passwordInput, value: password } = getInputAndValue(event, 'password');
+
+    try {
+      await signInWithEmailAndPassword(auth, email, password);
+    } catch (err) {
+      console.log(err);
+      if (err instanceof Error) {
+        passwordInput.setCustomValidity(err.message);
+      } else {
+        passwordInput.setCustomValidity('Something unknown went wrong');
       }
+      passwordInput.reportValidity();
+      passwordInput.setCustomValidity('');
+    }
+  }
+
+  function EmailField(props: TextFieldProps) {
+    return (
+      <TextField
+        name="email"
+        label="Email"
+        type="email"
+        margin="normal"
+        variant="standard"
+        fullWidth
+        required
+        {...props}
+      />
+    );
+  }
+
+  function PasswordField(props: TextFieldProps) {
+    return (
+      <TextField
+        name="password"
+        label="Password"
+        type="password"
+        margin="normal"
+        variant="standard"
+        fullWidth
+        required
+        {...props}
+      />
+    );
+  }
 
-      return (
-        <div className={clsx(className, 'simlin-login-outer')}>
-          <div className="simlin-login-middle">
-            <div className="simlin-login-inner">
-              <ModelIcon className="simlin-login-logo" />
-              <br />
-              <div className={disabledClass}>{loginUI}</div>
-            </div>
+  if (state.emailLoginFlow === 'showEmail')
+    return (
+      <Card variant="outlined" sx={{ minWidth: 275, maxWidth: 360, width: '100%' }} className="simlin-login-email-form">
+        <form onSubmit={onSubmitEmail}>
+          <CardContent>
+            <Typography variant="h6" component="div">
+              Sign in with email
+            </Typography>
+            <EmailField autoFocus />
+          </CardContent>
+          <CardActions>
+            <Button sx={{ marginLeft: 'auto' }} onClick={onEmailCancel}>
+              Cancel
+            </Button>
+            <Button type="submit" variant="contained">
+              Next
+            </Button>
+          </CardActions>
+        </form>
+      </Card>
+    );
+  else if (state.emailLoginFlow === 'showPassword')
+    return (
+      <Card variant="outlined" sx={{ minWidth: 275, maxWidth: 360, width: '100%' }} className="simlin-login-email-form">
+        <form onSubmit={onEmailLogin}>
+          <CardContent>
+            <Typography variant="h6" component="div">
+              Sign in
+            </Typography>
+            <EmailField value={state.email} disabled />
+            <PasswordField autoFocus autoComplete="current-password" />
+          </CardContent>
+          <CardActions>
+            <Typography sx={{ marginRight: 'auto' }} variant="body2">
+              <Link sx={{ cursor: 'help' }} underline="hover" onClick={onEmailHelp}>
+                Trouble signing in?
+              </Link>
+            </Typography>
+            <Button type="submit" variant="contained">
+              Sign in
+            </Button>
+          </CardActions>
+        </form>
+      </Card>
+    );
+  else if (state.emailLoginFlow === 'showSignup')
+    return (
+      <Card variant="outlined" sx={{ minWidth: 275, maxWidth: 360, width: '100%' }} className="simlin-login-email-form">
+        <form onSubmit={onSubmitNewUser}>
+          <CardContent>
+            <Typography variant="h6" component="div">
+              Create account
+            </Typography>
+            <EmailField value={state.email} disabled />
+            <TextField
+              name="fullName"
+              label="First & last name"
+              margin="normal"
+              variant="standard"
+              fullWidth
+              autoFocus
+              required
+            />
+            <PasswordField label="Choose password" autoComplete="new-password" />
+          </CardContent>
+          <CardActions>
+            <Button sx={{ marginLeft: 'auto' }} onClick={onEmailCancel}>
+              Cancel
+            </Button>
+            <Button type="submit" variant="contained">
+              Save
+            </Button>
+          </CardActions>
+        </form>
+      </Card>
+    );
+  else if (state.emailLoginFlow === 'showProviderRedirect')
+    return (
+      <Card variant="outlined" sx={{ minWidth: 275, maxWidth: 360, width: '100%' }} className="simlin-login-email-form">
+        <form onSubmit={state.provider === 'google.com' ? googleLoginClick : appleLoginClick}>
+          <CardContent>
+            <Typography variant="h6" component="div">
+              Sign in - you already have an account
+            </Typography>
+            <Typography className="simlin-login-recover-instructions">
+              You’ve already used {state.provider} to sign up with <b>{state.email}</b>. Sign in with {state.provider}{' '}
+              to continue.
+            </Typography>
+          </CardContent>
+          <CardActions>
+            <Button sx={{ marginLeft: 'auto' }} type="submit" variant="contained">
+              Sign in with {state.provider}
+            </Button>
+          </CardActions>
+        </form>
+      </Card>
+    );
+  else if (state.emailLoginFlow === 'showRecover')
+    return (
+      <Card variant="outlined" sx={{ minWidth: 275, maxWidth: 360, width: '100%' }} className="simlin-login-email-form">
+        <form onSubmit={onSubmitRecovery}>
+          <CardContent>
+            <Typography variant="h6" component="div">
+              Recover password
+            </Typography>
+            <Typography className="simlin-login-recover-instructions">
+              Get instructions sent to this email that explain how to reset your password
+            </Typography>
+            <EmailField defaultValue={state.email} autoFocus />
+          </CardContent>
+          <CardActions>
+            <Button sx={{ marginLeft: 'auto' }} onClick={onEmailCancel}>
+              Cancel
+            </Button>
+            <Button type="submit" variant="contained">
+              Send
+            </Button>
+          </CardActions>
+        </form>
+      </Card>
+    );
+  else
+    return (
+      <div className="simlin-login-options-buttons">
+        <Button
+          variant="contained"
+          sx={{ backgroundColor: 'black' }}
+          startIcon={<AppleIcon />}
+          onClick={appleLoginClick}
+        >
+          Sign in with Apple
+        </Button>
+        <br />
+        <Button variant="contained" color="primary" startIcon={<GoogleIcon />} onClick={googleLoginClick}>
+          Sign in with Google
+        </Button>
+        <br />
+        <Button
+          variant="contained"
+          sx={{ backgroundColor: '#db4437' }}
+          startIcon={<EmailIcon />}
+          onClick={emailLoginClick}
+        >
+          Sign in with email
+        </Button>
+        <br />
+      </div>
+    );
+}
+
+function LoginOuter({ className, auth, disabled }: LoginProps & { className?: string }) {
+  const disabledClass = disabled ? 'simlin-login-disabled' : 'simlin-login-inner-inner';
+
+  return (
+    <div className={clsx(className, 'simlin-login-outer')}>
+      <div className="simlin-login-middle">
+        <div className="simlin-login-inner">
+          <ModelIcon className="simlin-login-logo" />
+          <br />
+          <div className={disabledClass}>
+            <LoginInner auth={auth} disabled={disabled} />
           </div>
         </div>
-      );
-    }
-  },
-)(({ theme }) => ({
+      </div>
+    </div>
+  );
+}
+
+export const Login = styled(LoginOuter)(({ theme }) => ({
   '&.simlin-login-outer': {
     display: 'table',
     position: 'absolute',