Google authentication with NextAuth.js

Author: jjjadey

.env.local.sample

@@ -0,0 +1,3 @@
+# Authenticatation
+NEXT_PUBLIC_GOOGLE_ID=
+NEXT_PUBLIC_GOOGLE_SECRET=

firebase.js

@@ -0,0 +1,10 @@
+import firebase from "firebase";
+
+const firebaseConfig = {
+    apiKey: "AIzaSyCyhheT-YLEn3cudCiV3TskTOEH299cl_Q",
+    authDomain: "clone-8e1eb.firebaseapp.com",
+    projectId: "clone-8e1eb",
+    storageBucket: "clone-8e1eb.appspot.com",
+    messagingSenderId: "75306579859",
+    appId: "1:75306579859:web:884d105b9b9af9e4031a66"
+};

package.json

@@ -12,7 +12,9 @@
     "@heroicons/react": "^2.0.13",
     "eslint": "8.28.0",
     "eslint-config-next": "13.0.5",
+    "firebase": "^9.14.0",
     "next": "13.0.5",
+    "next-auth": "^4.18.3",
     "react": "18.2.0",
     "react-currency-formatter": "^1.1.0",
     "react-dom": "18.2.0",

src/components/Header.js

@@ -1,7 +1,13 @@
 import Image from 'next/image';
-import { MagnifyingGlassIcon, ShoppingCartIcon, Bars3Icon } from '@heroicons/react/24/outline'
+import { MagnifyingGlassIcon, ShoppingCartIcon, Bars3Icon } from '@heroicons/react/24/outline';
+import { useSession, signIn, signOut } from "next-auth/react";
 
 function Header() {
+
+    // document -> https://next-auth.js.org/getting-started/client#usesession
+    const { data: session, status } = useSession();
+    console.log('>>> session', session);
+
     return (
         <header>
             <div className="flex items-center bg-amazon_blue p-1 flex-grow py-2">
@@ -11,9 +17,9 @@ function Header() {
                         width={150}
                         height={40}
                         objectFit="contain"
-                        className="cursor-pointer" 
+                        className="cursor-pointer"
                         alt="logo"
-                        />
+                    />
                 </div>
 
                 <div className="hidden sm:flex items-center h-10 rounded-md flex-grow cursor-pointer bg-yellow-400 hover:bg-yellow-500">
@@ -22,8 +28,8 @@ function Header() {
                 </div>
 
                 <div className="text-white flex items-center text-xs space-x-6 mx-6 whitespace-nowrap">
-                    <div className="link">
-                        <p>Hello User A</p>
+                    <div className="link" onClick={signIn}>
+                        <p>{session? `Hello, ${session.user.name}` : 'Sign in'}</p>
                         <p className="font-extrabold md:text-sm">Account & Lists</p>
                     </div>
                     <div className="link">

src/pages/_app.js

@@ -1,7 +1,12 @@
-import '../styles/globals.css'
+import '../styles/globals.css';
+import { SessionProvider } from "next-auth/react"
 
-function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+function MyApp({ Component, pageProps: { session, ...pageProps }, }) {
+  return (
+    <SessionProvider session={session}>
+      <Component {...pageProps} />
+    </SessionProvider>
+  )
 }
 
 export default MyApp

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

@@ -0,0 +1,15 @@
+import NextAuth from "next-auth";
+import GoogleProvider from "next-auth/providers/google";
+
+export const authOptions = {
+  // Configure one or more authentication providers
+  providers: [
+    GoogleProvider({
+      clientId: process.env.NEXT_PUBLIC_GOOGLE_ID,
+      clientSecret: process.env.NEXT_PUBLIC_GOOGLE_SECRET,
+    }),
+    // ...add more providers here
+  ],
+}
+
+export default NextAuth(authOptions)