Use Next Router, Named Components

package.json

@@ -15,14 +15,16 @@
     "migrate:prod": "ts-node --project tsconfig.node.json ./scripts/migrate_prod.ts"
   },
   "dependencies": {
-    "@types/react": "^16.9.56",
     "firebase": "^8.0.2",
-    "firebase-admin": "^9.4.0",
+    "firebase-admin": "^9.5.0",
     "next": "10",
-    "nookies": "^2.5.0",
+    "nookies": "^2.5.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "typescript": "^4.0.5"
+    "typescript": "^4.1.5"
   },
-  "devDependencies": {}
-}
+  "devDependencies": {
+    "@types/node": "^14.14.31",
+    "@types/react": "^17.0.2"
+  }
+}

pages/authenticated.tsx

@@ -1,5 +1,9 @@
 import React from "react";
 import nookies from "nookies";
+<<<<<<< HEAD
+import { useRouter } from "next/router";
+=======
+>>>>>>> 0eb7c262f8bbc6ab3858d7926e3cda2452af7026
 import { firebaseAdmin } from "../firebaseAdmin";
 import { firebaseClient } from "../firebaseClient";
 
@@ -39,6 +43,24 @@ export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
 
 const AuthenticatedPage = (
   props: InferGetServerSidePropsType<typeof getServerSideProps>
+<<<<<<< HEAD
+) => {
+  const router = useRouter();
+  return (
+    <div>
+      <p>{props.message!}</p>
+      <button
+        onClick={async () => {
+          await firebaseClient.auth().signOut();
+          router.push("/");
+        }}
+      >
+        Sign out
+      </button>
+    </div>
+  );
+};
+=======
 ) => (
   <div>
     <p>{props.message!}</p>
@@ -52,5 +74,6 @@ const AuthenticatedPage = (
     </button>
   </div>
 );
+>>>>>>> 0eb7c262f8bbc6ab3858d7926e3cda2452af7026
 
 export default AuthenticatedPage;

pages/index.tsx

@@ -1,3 +1,16 @@
+<<<<<<< HEAD
+import React, { useEffect, useCallback } from "react";
+import Link from "next/link";
+import { useAuth } from "../auth";
+import { ReactNode } from "react";
+
+const Home: ReactNode = () => {
+  const { user } = useAuth();
+
+  return (
+    <>
+      <p>{`User ID: ${user ? user.uid : "no user signed in"}`}</p>
+=======
 import React, { useEffect, useCallback } from 'react';
 import Link from 'next/link';
 import { useAuth } from '../auth';
@@ -8,6 +21,7 @@ export default () => {
   return (
     <div style={{ padding: '40px' }}>
       <p>{`User ID: ${user ? user.uid : 'no user signed in'}`}</p>
+>>>>>>> 0eb7c262f8bbc6ab3858d7926e3cda2452af7026
 
       <p>
         <Link href="/authenticated">
@@ -19,6 +33,14 @@ export default () => {
           <a>Login</a>
         </Link>
       </p>
+<<<<<<< HEAD
+    </>
+  );
+};
+
+export default Home;
+=======
     </div>
   );
 };
+>>>>>>> 0eb7c262f8bbc6ab3858d7926e3cda2452af7026

pages/login.tsx

@@ -1,3 +1,17 @@
+<<<<<<< HEAD
+import React, { useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { firebaseClient } from "../firebaseClient";
+
+const Login: any = (_props: any) => {
+  const [email, setEmail] = useState("");
+  const [pass, setPass] = useState("");
+  const router = useRouter();
+
+  return (
+    <>
+=======
 import React, { useState } from 'react';
 import Link from 'next/link';
 import { firebaseClient } from '../firebaseClient';
@@ -7,39 +21,66 @@ export default (_props: any) => {
   const [pass, setPass] = useState('');
   return (
     <div>
+>>>>>>> 0eb7c262f8bbc6ab3858d7926e3cda2452af7026
       <Link href="/">
         <a>Go back to home page</a>
       </Link>
       <br />
       <input
         value={email}
         onChange={(e) => setEmail(e.target.value)}
+<<<<<<< HEAD
+        placeholder={"Email"}
+      />
+      <input
+        type={"password"}
+        value={pass}
+        onChange={(e) => setPass(e.target.value)}
+        placeholder={"Password"}
+=======
         placeholder={'Email'}
       />
       <input
         type={'password'}
         value={pass}
         onChange={(e) => setPass(e.target.value)}
         placeholder={'Password'}
+>>>>>>> 0eb7c262f8bbc6ab3858d7926e3cda2452af7026
       />
       <button
         onClick={async () => {
           await firebaseClient
             .auth()
             .createUserWithEmailAndPassword(email, pass);
+<<<<<<< HEAD
+          router.push("/");
+=======
           window.location.href = '/';
+>>>>>>> 0eb7c262f8bbc6ab3858d7926e3cda2452af7026
         }}
       >
         Create account
       </button>
       <button
         onClick={async () => {
           await firebaseClient.auth().signInWithEmailAndPassword(email, pass);
+<<<<<<< HEAD
+          router.push("/");
+=======
           window.location.href = '/';
+>>>>>>> 0eb7c262f8bbc6ab3858d7926e3cda2452af7026
         }}
       >
         Log in
       </button>
+<<<<<<< HEAD
+    </>
+  );
+};
+
+export default Login;
+=======
     </div>
   );
 };
+>>>>>>> 0eb7c262f8bbc6ab3858d7926e3cda2452af7026

tsconfig.json

@@ -1,11 +1,15 @@
 {
   "compilerOptions": {
     "target": "es5",
+<<<<<<< HEAD
+    "lib": ["dom", "dom.iterable", "esnext"],
+=======
     "lib": [
       "dom",
       "dom.iterable",
       "esnext"
     ],
+>>>>>>> 0eb7c262f8bbc6ab3858d7926e3cda2452af7026
     "allowJs": true,
     // "skipLibCheck": true,
     "strict": true,
@@ -22,6 +26,13 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
+<<<<<<< HEAD
+    "skipLibCheck": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+=======
     "skipLibCheck": true
   },
   "include": [
@@ -32,4 +43,5 @@
   "exclude": [
     "node_modules"
   ]
+>>>>>>> 0eb7c262f8bbc6ab3858d7926e3cda2452af7026
 }