🔐 Google Authentication Integration with NextAuth — Secure Login

.gitignore

@@ -39,3 +39,4 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+.env.local

README.md

@@ -30,20 +30,48 @@ This project is a smart e-commerce support chatbot built with **Next.js**, **Goo
    ```
 
 3. **Set Up Environment Variables**
-   Create a `.env` file in the root of your project and add your Google Gemini API key:
+   Create a `.env.local` file in the root of your project and add the following:
    ```bash
+   # Google Gemini API key
    GEMINI_API=your-google-gemini-api-key
+
+   # Google Authentication credentials
+   GOOGLE_CLIENT_ID=your-google-client-id
+   GOOGLE_CLIENT_SECRET=your-google-client-secret
+   NEXTAUTH_URL=http://localhost:3000
+   NEXTAUTH_SECRET=your-nextauth-secret
    ```
 
-4. **Run the Application**
+4. **Set Up Google Authentication**
+   - Go to the [Google Cloud Console](https://console.cloud.google.com/)
+   - Create a new project or select an existing one
+   - Navigate to "APIs & Services" > "Credentials"
+   - Click "Create Credentials" > "OAuth client ID"
+   - Select "Web application" as the application type
+   - Add a name for your OAuth client
+   - Add authorized JavaScript origins: `http://localhost:3000`
+   - Add authorized redirect URIs:
+     - `http://localhost:3000/api/auth/callback/google`
+     - `http://localhost:3000/auth/signin`
+   - Click "Create" and note your Client ID and Client Secret
+   - Add these credentials to your `.env.local` file
+
+5. **Generate NextAuth Secret**
+   Generate a secure random string for NEXTAUTH_SECRET:
+   ```bash
+   openssl rand -base64 32
+   ```
+   Add this to your `.env.local` file.
+
+6. **Run the Application**
    Start the development server:
    ```bash
    npm run dev
    # or
    yarn dev
    ```
 
-5. **Open in Browser**
+7. **Open in Browser**
    Navigate to [http://localhost:3000](http://localhost:3000) to view the application.
 
 ---

app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,34 @@
+import NextAuth from "next-auth";
+import GoogleProvider from "next-auth/providers/google";
+
+const handler = NextAuth({
+  providers: [
+    GoogleProvider({
+      clientId: process.env.GOOGLE_CLIENT_ID as string,
+      clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
+      authorization: {
+        params: {
+          prompt: "consent",
+          access_type: "offline",
+          response_type: "code"
+        }
+      }
+    }),
+  ],
+  pages: {
+    signIn: "/auth/signin",
+  },
+  callbacks: {
+    async session({ session, token }) {
+      return session;
+    },
+    async jwt({ token, user }) {
+      if (user) {
+        token.id = user.id;
+      }
+      return token;
+    },
+  },
+});
+
+export { handler as GET, handler as POST };

app/auth/signin/page.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { signIn } from "next-auth/react";
+import { Button } from "@/components/ui/button";
+import { FcGoogle } from "react-icons/fc";
+
+export default function SignIn() {
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center p-4">
+      <div className="w-full max-w-md space-y-8 rounded-lg border bg-white p-6 shadow-md">
+        <div className="text-center">
+          <h1 className="text-2xl font-bold">Sign In</h1>
+          <p className="mt-2 text-gray-600">Sign in to access your account</p>
+        </div>
+
+        <div className="mt-8 space-y-4">
+          <Button
+            className="flex w-full items-center justify-center gap-3 bg-white text-black hover:bg-gray-100"
+            variant="outline"
+            onClick={() => signIn("google", { callbackUrl: "/" })}
+          >
+            <FcGoogle className="h-5 w-5" />
+            Sign in with Google
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

app/layout.tsx

@@ -6,6 +6,7 @@ import './globals.css'
 import Header from '../components/Header'
 import { ToastProvider } from '@radix-ui/react-toast'
 import DisableInspect from '@/components/DisableInspect'
+import { Providers } from './providers'
 
 const inter = Inter({ subsets: ['latin'] })
 
@@ -24,13 +25,15 @@ export default function RootLayout({
     <html lang="en">
       <ToastProvider>
         <body className={inter.className}>
-          <div className="flex flex-col min-h-screen">
-            <Header />
-            <DisableInspect />
-            <Analytics />
-            <main className="flex-grow">{children}</main>
-            {/* <Footer /> */}
-          </div>
+          <Providers>
+            <div className="flex flex-col min-h-screen">
+              <Header />
+              <DisableInspect />
+              <Analytics />
+              <main className="flex-grow">{children}</main>
+              {/* <Footer /> */}
+            </div>
+          </Providers>
         </body>
       </ToastProvider>
     </html>

app/providers.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import { SessionProvider } from "next-auth/react";
+import { ReactNode } from "react";
+
+export function Providers({ children }: { children: ReactNode }) {
+  return <SessionProvider>{children}</SessionProvider>;
+}

components/Header.tsx

@@ -1,14 +1,20 @@
+"use client";
+
 import Link from 'next/link'
 import { Button } from '@/components/ui/button'
+import { useAuth } from '@/hooks/useAuth'
+import { FcGoogle } from "react-icons/fc";
 
 export default function Header() {
+  const { isAuthenticated, isLoading, user, signIn, signOut } = useAuth();
+
   return (
     <header className="bg-white shadow-sm">
       <nav className="mx-auto px-4 py-4 flex justify-between items-center">
         <Link href="/" className="text-2xl font-bold">
           LA_LIT
         </Link>
-        <div className="space-x-4">
+        <div className="flex items-center space-x-4">
           <Button variant="ghost" asChild>
             <Link href="/">Home</Link>
           </Button>
@@ -24,6 +30,28 @@ export default function Header() {
           {/* <Button variant="ghost" asChild>
             <Link href="/contact">Contact</Link>
           </Button> */}
+
+          {isLoading ? (
+            <Button disabled variant="outline">Loading...</Button>
+          ) : isAuthenticated ? (
+            <div className="flex items-center gap-4">
+              <span className="text-sm font-medium">
+                {user?.name || user?.email}
+              </span>
+              <Button onClick={() => signOut()} variant="outline">
+                Sign Out
+              </Button>
+            </div>
+          ) : (
+            <Button 
+              onClick={() => signIn()} 
+              variant="outline"
+              className="flex items-center gap-2"
+            >
+              <FcGoogle className="h-4 w-4" />
+              Sign In
+            </Button>
+          )}
         </div>
       </nav>
     </header>

hooks/useAuth.ts

@@ -0,0 +1,20 @@
+"use client";
+
+import { useSession, signIn, signOut } from "next-auth/react";
+
+export function useAuth() {
+  const { data: session, status } = useSession();
+
+  const isAuthenticated = status === "authenticated";
+  const isLoading = status === "loading";
+
+  return {
+    session,
+    status,
+    isAuthenticated,
+    isLoading,
+    signIn: () => signIn("google"),
+    signOut: () => signOut(),
+    user: session?.user
+  };
+}