Add authentication

Itaseoul · Nov 28, 2022 · 24eb64f · 24eb64f
1 parent 58bf2b6
commit 24eb64f
Show file tree

Hide file tree

Showing 11 changed files with 273 additions and 73 deletions.
diff --git a/app/LoginButton.jsx b/app/LoginButton.jsx
@@ -0,0 +1,28 @@
+'use client'
+
+import { useSession, signIn, signOut } from 'next-auth/react'
+
+const LoginButton = () => {
+  const { data: session } = useSession()
+  if (session) {
+    return (
+      <button
+        className='text-sm font-medium tracking-wider uppercase text-stone-500'
+        onClick={() => signOut()}
+      >
+        Sign Out
+      </button>
+    )
+  }
+
+  return (
+    <button
+      className='text-sm font-medium tracking-wider uppercase text-stone-500'
+      onClick={() => signIn()}
+    >
+      Sign In
+    </button>
+  )
+}
+
+export default LoginButton
diff --git a/app/header.jsx b/app/header.jsx
@@ -1,17 +1,23 @@
 import Link from 'next/link'
+import LoginButton from './LoginButton'
 
 const Header = () => {
   return (
     <header className='bg-stone-100 py-12'>
-      <nav className='center'>
-        <ul className='flex justify-center gap-8 text-sm font-medium tracking-wider uppercase text-stone-500'>
+      <nav className='center flex items-center text-sm font-medium tracking-wider uppercase text-stone-500'>
+        <ul className='ml-auto flex justify-center gap-8'>
           <li>
             <Link href='/'>Home</Link>
           </li>
           <li>
             <Link href='/users'>Users</Link>
           </li>
         </ul>
+        <ul className='ml-auto'>
+          <li>
+            <LoginButton />
+          </li>
+        </ul>
       </nav>
     </header>
   )

diff --git a/app/layout.jsx b/app/layout.jsx
@@ -1,15 +1,18 @@
 import './globals.css'
 import Footer from './footer'
 import Header from './header'
+import Provider from './provider'
 
 export default function RootLayout({ children }) {
   return (
     <html lang='en'>
       <head />
       <body>
-        <Header />
-        <main>{children}</main>
-        <Footer />
+        <Provider>
+          <Header />
+          <main>{children}</main>
+          <Footer />
+        </Provider>
       </body>
     </html>
   )

diff --git a/app/provider.jsx b/app/provider.jsx
@@ -0,0 +1,9 @@
+'use client'
+
+import { SessionProvider } from 'next-auth/react'
+
+const Provider = ({ children }) => {
+  return <SessionProvider>{children}</SessionProvider>
+}
+
+export default Provider
diff --git a/app/users/[userId]/user.jsx b/app/users/[userId]/user.jsx
@@ -7,7 +7,7 @@ const User = ({ user }) => {
       <div>
         <div className='relative h-40 w-40 rounded-full'>
           <Image
-            src={user?.imageUrl}
+            src={user?.image}
             alt={user?.name}
             style={{ objectFit: 'cover' }}
             fill

diff --git a/lib/prisma/index.js b/lib/prisma/index.js
@@ -1,4 +1,6 @@
 import { PrismaClient } from '@prisma/client'
 
-const prisma = new PrismaClient()
-export default prisma
+const client = globalThis.prisma || new PrismaClient()
+if (process.env.NODE_ENV !== 'production') globalThis.prisma = client
+
+export default client
diff --git a/next.config.js b/next.config.js
@@ -4,7 +4,7 @@ const nextConfig = {
     appDir: true
   },
   images: {
-    domains: ['github.com']
+    domains: ['github.com', 'lh3.googleusercontent.com']
   }
 }
 

diff --git a/package.json b/package.json
@@ -10,10 +10,12 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.0.13",
+    "@next-auth/prisma-adapter": "^1.0.5",
     "@prisma/client": "^4.6.1",
     "eslint": "8.27.0",
     "eslint-config-next": "13.0.2",
-    "next": "13.0.2",
+    "next": "13.0.5",
+    "next-auth": "^4.17.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "typescript": "^4.8.4"

diff --git a/pages/api/auth/[...nextauth].js b/pages/api/auth/[...nextauth].js
@@ -0,0 +1,22 @@
+import NextAuth from 'next-auth'
+import prisma from '@/lib/prisma'
+import GoogleProvider from 'next-auth/providers/google'
+import { PrismaAdapter } from '@next-auth/prisma-adapter'
+
+export default async function auth(req, res) {
+  return await NextAuth(req, res, {
+    providers: [
+      GoogleProvider({
+        clientId: process.env.GOOGLE_CLIENT_ID,
+        clientSecret: process.env.GOOGLE_CLIENT_SECRET
+      })
+    ],
+    pages: {
+      //   signIn: '/signin'
+    },
+    adapter: PrismaAdapter(prisma),
+    session: {
+      strategy: 'jwt'
+    }
+  })
+}