feat: add sso login

app/login/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Button, Input } from '@nextui-org/react';
-import { signIn } from 'next-auth/react';
+import { getSession, signIn } from 'next-auth/react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 
@@ -15,60 +15,86 @@ export default function LoginPage() {
     event.preventDefault();
     const res = await signIn('credentials', { username, password, redirect: false });
     if (res?.ok) {
-      router.replace('/');
+      const session = await getSession();
+      const roles = session?.user?.roles ?? [];
+
+      if (roles.includes('wcfm_vendor') || roles.includes('administrator')) {
+        window.location.href = `${process.env.NEXT_PUBLIC_WOOCOMMERCE}/sso-login?sso_token=${session!.user.token}`;
+      } else {
+        router.replace('/');
+      }
     } else {
       setError('Invalid username or password');
     }
   };
 
   return (
-    <section className="mx-auto mt-4 grid max-w-screen-2xl justify-center gap-4 px-4 pb-4">
+    <section className="mx-auto mt-10 max-w-screen-xl px-4 pb-10">
-      <h1 className="text-2xl font-bold">Login</h1>
+      <h1 className="mb-12 text-center text-4xl font-bold">Login</h1>
-      <div className="flex w-full max-w-md flex-col">
+      <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
-        {error && <p className="text-red-500">{error}</p>}
+        <div className="flex flex-col items-center justify-center rounded-xl bg-gray-50 p-8 shadow-md dark:bg-gray-900">
-        <form onSubmit={handleLogin} className="flex flex-col">
+          <h2 className="mb-4 text-2xl font-semibold text-gray-800 dark:text-gray-100">
-          <div className="mt-4">
+            Sei un cliente?
-            <Input
+          </h2>
-              type="text"
+          <div className="w-full max-w-md">
-              id="username"
+            {error && <p className="mb-2 text-red-500">{error}</p>}
-              label="Username"
+            <form onSubmit={handleLogin} className="flex flex-col">
-              labelPlacement="outside"
+              <div className="mt-2">
-              placeholder="Insert username"
+                <Input
-              size="lg"
+                  type="text"
-              value={username}
+                  id="username"
-              onChange={(e) => setUsername(e.target.value)}
+                  label="Username"
-              required
+                  labelPlacement="outside"
-            />
+                  placeholder="Insert username"
-          </div>
+                  size="lg"
-          <div className="mt-6">
+                  value={username}
-            <Input
+                  onChange={(e) => setUsername(e.target.value)}
-              type="password"
+                  required
-              id="password"
+                />
-              label="Password"
+              </div>
-              labelPlacement="outside"
+              <div className="mt-6">
-              placeholder="Insert password"
+                <Input
-              size="lg"
+                  type="password"
-              value={password}
+                  id="password"
-              onChange={(e) => setPassword(e.target.value)}
+                  label="Password"
-              required
+                  labelPlacement="outside"
-            />
+                  placeholder="Insert password"
-          </div>
+                  size="lg"
-          <div className="mt-6">
+                  value={password}
-            <Button
+                  onChange={(e) => setPassword(e.target.value)}
-              type="submit"
+                  required
-              className="flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-3 text-lg font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                />
-            >
+              </div>
-              Login
+              <div className="mt-6">
-            </Button>
+                <Button
+                  type="submit"
+                  className="w-full bg-indigo-600 text-white hover:bg-indigo-700"
+                >
+                  Login
+                </Button>
+              </div>
+              <span className="mt-6 block text-center text-sm text-gray-600 dark:text-gray-300">
+                Don't have an account?{' '}
+                <a href="/signup" className="text-indigo-600 hover:underline">
+                  Sign up
+                </a>
+              </span>
+            </form>
           </div>
+        </div>
 
-          <span className="mt-6 block text-center text-sm text-gray-600 dark:text-gray-300">
+        {/* Box Venditore */}
-            Don't have an account?{' '}
+        <div className="flex flex-col items-center rounded-xl bg-gray-50 p-8 shadow-md dark:bg-gray-900">
-            <a href="/signup" className="text-indigo-600 hover:underline">
+          <h2 className="mb-4 text-2xl font-semibold text-gray-800 dark:text-gray-100">
-              Sign up
+            Sei un venditore?
-            </a>
+          </h2>
-          </span>
+          <p className="mb-6 text-center text-gray-600 dark:text-gray-300">
-        </form>
+            Accedi alla tua area riservata per gestire i tuoi prodotti e ordini.
+          </p>
+          <a href={process.env.NEXT_PUBLIC_WOOCOMMERCE} target="_blank" rel="noopener noreferrer">
+            <Button className="w-full bg-indigo-600 text-white hover:bg-indigo-700">Accedi</Button>
+          </a>
+        </div>
       </div>
     </section>
   );

app/page.tsx

@@ -21,7 +21,7 @@ import Bg2 from '../assets/images/slide-bg-02.webp';
 async function Products({ category }: { category: Category }) {
   const products: Product[] = await woocommerce.get('products', {
     category: category.id.toString(),
-    author: 1, // Use admin user to get all products
+    author: 1 // Use admin user to get all products
   });
 
   return <ThreeItemGrid products={products} />;

app/profile/@user/page.tsx

@@ -1,63 +1,33 @@
-'use server';
-
 import { authOptions } from 'lib/auth/config';
 import { woocommerce } from 'lib/woocomerce/woocommerce';
 import { getServerSession } from 'next-auth';
 import { getTranslations } from 'next-intl/server';
+import VendorArea from './vendor-area';
 
 export default async function PersonalArea() {
   const session = await getServerSession(authOptions);
   const t = await getTranslations('ProfilePage');
+
   if (!session?.user?.customer_id) {
     return { status: 401, body: { error: 'User not logged' } };
   }
 
-  const customer = await woocommerce.get('customers', { id: session?.user.customer_id });
+  const user = session.user;
+  const { first_name, last_name, email } = await woocommerce.get('customers', {
+    id: user.customer_id
+  });
 
   return (
     <section className="mt-4 grid max-w-screen-2xl gap-4 px-4 pb-4">
       <h1 className="text-2xl font-bold">{t('area')}</h1>
       <div className="flex flex-col">
-        <label
+        {user.roles.includes('wcfm_vendor') && <VendorArea token={user.token} />}
-          htmlFor="name"
+        <label className="mt-4 text-sm font-medium">First Name</label>
-          className="block text-sm font-medium text-gray-700 dark:text-gray-300"
+        <input value={first_name} disabled />
-        >
+        <label className="mt-2 text-sm font-medium">Last Name</label>
-          First Name
+        <input value={last_name} disabled />
-        </label>
+        <label className="mt-2 text-sm font-medium">Email</label>
-        <input
+        <input value={email} disabled />
-          type="text"
-          id="name"
-          name="name"
-          className="mt-1 block w-full rounded-md border-gray-300 py-3 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
-          value={customer.first_name}
-          disabled
-        />
-        <label
-          htmlFor="last_name"
-          className="mt-2 block text-sm font-medium text-gray-700 dark:text-gray-300"
-        >
-          Last Name
-        </label>
-        <input
-          type="text"
-          id="last_name"
-          className="mt-1 block w-full rounded-md border-gray-300 py-3 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
-          value={customer.last_name}
-          disabled
-        />
-        <label
-          htmlFor="email"
-          className="mt-2 block text-sm font-medium text-gray-700 dark:text-gray-300"
-        >
-          Email
-        </label>
-        <input
-          type="email"
-          id="email"
-          className="mt-1 block w-full rounded-md border-gray-300 py-3 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
-          value={customer.email}
-          disabled
-        />
       </div>
     </section>
   );

app/profile/@user/vendor-area.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { Button } from '@headlessui/react';
+
+export default function VendorArea({ token }: { token: string }) {
+  const handleClick = () => {
+    window.open(`${process.env.NEXT_PUBLIC_WOOCOMMERCE}/sso-login?sso_token=${token}`);
+  };
+
+  return (
+    <div className="flex flex-col">
+      <h2 className="mb-4 text-2xl font-semibold">Sei un venditore</h2>
+      <p className="mb-6 text-center">
+        Accedi alla tua area riservata per gestire i tuoi prodotti e ordini.
+      </p>
+      <Button className="w-full bg-indigo-600 text-white hover:bg-indigo-700" onClick={handleClick}>
+        Accedi
+      </Button>
+    </div>
+  );
+}

lib/woocomerce/storeApi.ts

@@ -45,7 +45,7 @@ function createStoreApiClient({
         method,
         url: baseURL + url,
         data,
-        headers,
+        headers
       });
 
       return response;

types/next-auth.d.ts

@@ -9,6 +9,7 @@ declare module 'next-auth' {
       user_email: string;
       user_nicename: string;
       user_display_name: string;
+      roles: string[];
     };
   }
 
@@ -18,6 +19,7 @@ declare module 'next-auth' {
     user_email: string;
     user_nicename: string;
     user_display_name: string;
+    roles: string[];
   }
 }
 
@@ -29,6 +31,7 @@ declare module 'next-auth/jwt' {
       user_email: string;
       user_nicename: string;
       user_display_name: string;
+      roles: string[];
     };
   }
 }