autologin as separate component

components/forms/AutoLogin.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import usePost from 'hooks/usePost';
+
+export default function AutoLogin({ hash = null }) {
+  const post = usePost();
+  const router = useRouter();
+
+  const handleAutologin = async ({ hash }) => {
+    const autologin = await post('/api/auth/hash', {
+      hash,
+    });
+
+    if (autologin.ok) {
+      return router.push('/');
+    }
+  };
+
+  if (hash) {
+    handleAutologin({ hash });
+  }
+
+  return <div />;
+}

components/forms/LoginForm.js

@@ -27,25 +27,11 @@ const validate = ({ username, password }) => {
   return errors;
 };
 
-export default function LoginForm({ hash = null }) {
+export default function LoginForm() {
   const post = usePost();
   const router = useRouter();
   const [message, setMessage] = useState();
 
-  const handleAutologin = async ({ hash }) => {
-    const autologin = await post('/api/auth/hash', {
-      hash,
-    });
-
-    if (autologin.ok) {
-      return router.push('/');
-    }
-  };
-
-  if (hash) {
-    handleAutologin({ hash });
-  }
-
   const handleSubmit = async ({ username, password }) => {
     const { ok, status, data } = await post('/api/auth/login', {
       username,

pages/login.js

@@ -1,13 +1,17 @@
 import React from 'react';
 import Layout from 'components/layout/Layout';
 import LoginForm from 'components/forms/LoginForm';
+import AutoLogin from 'components/forms/AutoLogin';
 import { useRouter } from 'next/router';
 
 export default function LoginPage() {
   const { query } = useRouter();
+  if (query.hash) {
+    return <AutoLogin hash={query.hash} />;
+  }
   return (
     <Layout title="login" header={false} footer={false} center>
-      <LoginForm hash={query.hash} />
+      <LoginForm />
     </Layout>
   );
 }