add nextauth & google login

Pinned typeorm version to work around issue nextauthjs/next-auth#833

Components/SignIn.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { useSession, signin, signout } from "next-auth/client";
+
+export default function SignIn() {
+  const [session, loading] = useSession();
+
+  return (
+    <p>
+      {!session && (
+        <>
+          Not signed in <br />
+          <button onClick={signin}>Sign in</button>
+        </>
+      )}
+      {session && (
+        <>
+          Signed in as {session.user.email} <br />
+          <button onClick={signout}>Sign out</button>
+        </>
+      )}
+    </p>
+  );
+}

README.md

@@ -8,6 +8,8 @@ First, run the development server:
 npm run dev
 # or
 yarn dev
+# or
+vercel dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

package.json

@@ -12,6 +12,7 @@
     "@material-ui/core": "^4.11.2",
     "mongodb": "^3.6.3",
     "next": "10.0.3",
+    "next-auth": "^3.1.0",
     "react": "17.0.1",
     "react-dom": "17.0.1"
   },
@@ -22,6 +23,9 @@
     "babel-jest": "^26.6.3",
     "jest": "^26.6.3"
   },
+  "resolutions": {
+    "typeorm": "0.2.28"
+  },
   "jest": {
     "testPathIgnorePatterns": [
       "<rootDir>/.next/",

pages/api/auth/[...nextauth].js

@@ -0,0 +1,18 @@
+import NextAuth from "next-auth";
+import Providers from "next-auth/providers";
+
+const options = {
+  // Configure one or more authentication providers
+  providers: [
+    Providers.Google({
+      clientId: process.env.GOOGLE_ID,
+      clientSecret: process.env.GOOGLE_SECRET,
+    }),
+    // ...add more providers here
+  ],
+
+  // A database is optional, but required to persist accounts in a database
+  database: process.env.MONGODB_URI,
+};
+
+export default (req, res) => NextAuth(req, res, options);

pages/index.jsx

@@ -1,5 +1,6 @@
-import Head from 'next/head'
-import styles from '../styles/Home.module.css'
+import Head from "next/head";
+import styles from "../styles/Home.module.css";
+import SignIn from "../Components/SignIn";
 
 export default function Home() {
   return (
@@ -13,9 +14,10 @@ export default function Home() {
         <h1 className={styles.title}>
           Welcome to <a href="https://nextjs.org">Next.js!</a>
         </h1>
+        <SignIn />
 
         <p className={styles.description}>
-          Get started by editing{' '}
+          Get started by editing{" "}
           <code className={styles.code}>pages/index.js</code>
         </p>
 
@@ -58,10 +60,10 @@ export default function Home() {
           target="_blank"
           rel="noopener noreferrer"
         >
-          Powered by{' '}
+          Powered by{" "}
           <img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
         </a>
       </footer>
     </div>
-  )
+  );
 }