Optimiser la gestion des avis clients avec Next.js et Supabase : l'intégration OAuth et l'API Google Reviews

Dans un monde numérique où la réputation en ligne est devenue un actif stratégique pour les entreprises, la gestion efficace des avis clients s'impose comme un levier de croissance incontournable. Chez Platane, nous accompagnons régulièrement des entreprises dans la mise en place de solutions technologiques innovantes pour automatiser et optimiser cette gestion. Aujourd'hui, nous souhaitons partager notre expertise sur l'intégration de l'authentification Google OAuth et de l'API Google Reviews dans une application SaaS construite avec Next.js et Supabase.

Les enjeux de la gestion des avis clients

Avant d'entrer dans les détails techniques, rappelons pourquoi une gestion efficace des avis clients est cruciale :

• Confiance des consommateurs : 93% des consommateurs consultent les avis en ligne avant d'effectuer un achat
• Visibilité en ligne : les avis positifs améliorent votre référencement naturel
• Amélioration continue : les retours clients permettent d'identifier les axes d'amélioration
• Engagement client : répondre aux avis renforce la relation avec vos clients

Pour répondre à ces enjeux, une solution SaaS de gestion d'avis doit permettre de centraliser, analyser et exploiter efficacement les avis provenant de différentes plateformes, notamment Google.

La stack technique idéale pour une solution de gestion d'avis

Pour développer une application SaaS performante dédiée à la gestion des avis clients, nous recommandons la stack technique suivante :

• Next.js 14 : framework React offrant des performances optimales et un excellent SEO
• TypeScript : pour un code robuste et maintenable
• Supabase : solution complète pour la base de données et l'authentification
• NextAuth.js : gestion simplifiée de l'authentification
• API Google My Business : pour récupérer les avis Google

Cette combinaison technologique permet de créer des applications évolutives, sécurisées et faciles à maintenir.

Intégration de l'authentification Google OAuth avec Next.js et Supabase

L'authentification est la première brique essentielle de votre application. Voici comment mettre en place l'authentification Google OAuth avec Next.js et Supabase :

1. Configuration de Supabase et NextAuth.js

Commencez par configurer votre projet Supabase et activez le provider Google dans les paramètres d'authentification. Vous devrez créer un projet dans la Google Cloud Console pour obtenir vos identifiants OAuth.

// pages/api/auth/[...nextauth].ts
import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import { SupabaseAdapter } from "@next-auth/supabase-adapter";

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  adapter: SupabaseAdapter({
    url: process.env.NEXT_PUBLIC_SUPABASE_URL,
    secret: process.env.SUPABASE_SERVICE_ROLE_KEY,
  }),
  callbacks: {
    async session({ session, user }) {
      // Personnalisation de la session
      return session;
    },
  },
});

2. Gestion des sessions et des tokens

La gestion des sessions et des tokens est cruciale pour maintenir l'état d'authentification de vos utilisateurs et sécuriser l'accès à l'API Google.

// hooks/useAuth.ts
import { useSession } from "next-auth/react";
import { useSupabaseClient } from "@supabase/auth-helpers-react";

export function useAuth() {
  const { data: session } = useSession();
  const supabase = useSupabaseClient();

  const getGoogleToken = async () => {
    // Récupération du token Google depuis Supabase
    const { data, error } = await supabase
      .from("accounts")
      .select("access_token, expires_at")
      .eq("user_id", session?.user?.id)
      .eq("provider", "google")
      .single();

    if (error) throw error;

    // Vérification de l'expiration du token
    if (data.expires_at * 1000 < Date.now()) {
      // Logique de rafraîchissement du token
    }

    return data.access_token;
  };

  return { session, getGoogleToken };
}

Chez Platane, nous avons récemment implémenté cette approche pour Epictory, une plateforme qui nécessitait une intégration avec les API Google pour récupérer les données d'activité des utilisateurs. Cette expérience nous a permis d'affiner notre méthodologie et d'optimiser la gestion des tokens.

Intégration de l'API Google Reviews

Une fois l'authentification en place, l'étape suivante consiste à intégrer l'API Google Reviews pour récupérer automatiquement les avis de vos clients.

1. Configuration de l'API Google My Business

Pour accéder à l'API Google My Business (maintenant appelée Business Profile API), vous devez activer cette API dans votre projet Google Cloud et configurer les autorisations appropriées.

2. Récupération des avis Google

Voici un exemple de code pour récupérer les avis Google d'un établissement :

// services/googleReviews.ts
import { google } from "googleapis";

export async function fetchGoogleReviews(accessToken, locationId) {
  const auth = new google.auth.OAuth2();
  auth.setCredentials({ access_token: accessToken });

  const mybusiness = google.mybusiness({
    version: "v4",
    auth,
  });

  try {
    const response = await mybusiness.accounts.locations.reviews.list({
      name: `accounts/${accountId}/locations/${locationId}`,
      pageSize: 50,
    });

    return response.data.reviews || [];
  } catch (error) {
    console.error("Error fetching Google reviews:", error);
    throw error;
  }
}

3. Synchronisation avec Supabase

Pour stocker les avis récupérés dans votre base de données Supabase :

// services/reviewsSync.ts
import { supabase } from "../lib/supabaseClient";

export async function syncReviewsWithDatabase(reviews, businessId) {
  // Transformation des données si nécessaire
  const formattedReviews = reviews.map((review) => ({
    business_id: businessId,
    review_id: review.reviewId,
    reviewer_name: review.reviewer.displayName,
    rating: review.starRating,
    comment: review.comment,
    create_time: review.createTime,
    update_time: review.updateTime,
  }));

  // Insertion ou mise à jour dans Supabase
  const { data, error } = await supabase
    .from("reviews")
    .upsert(formattedReviews, {
      onConflict: "review_id",
      returning: "minimal",
    });

  if (error) throw error;
  return data;
}

4. Mise en place d'un système de rafraîchissement périodique

Pour maintenir votre base de données à jour, il est essentiel de mettre en place un système de rafraîchissement périodique des avis. Vous pouvez utiliser Next.js API Routes avec des webhooks ou des tâches cron :

// pages/api/cron/sync-reviews.ts
import { NextApiRequest, NextApiResponse } from "next";
import { fetchGoogleReviews } from "../../../services/googleReviews";
import { syncReviewsWithDatabase } from "../../../services/reviewsSync";
import { supabase } from "../../../lib/supabaseClient";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  // Vérification de la clé d'API pour sécuriser l'endpoint
  if (req.headers.authorization !== `Bearer ${process.env.CRON_API_KEY}`) {
    return res.status(401).json({ error: "Unauthorized" });
  }

  try {
    // Récupération des entreprises à synchroniser
    const { data: businesses, error } = await supabase
      .from("businesses")
      .select("id, google_location_id, google_account_id");

    if (error) throw error;

    // Pour chaque entreprise, récupérer et synchroniser les avis
    for (const business of businesses) {
      const accessToken = await getAccessTokenForBusiness(business.id);
      const reviews = await fetchGoogleReviews(
        accessToken,
        business.google_location_id
      );
      await syncReviewsWithDatabase(reviews, business.id);
    }

    res.status(200).json({ success: true });
  } catch (error) {
    console.error("Error in sync reviews cron:", error);
    res.status(500).json({ error: "Internal Server Error" });
  }
}

Pour planifier cette tâche, vous pouvez utiliser des services comme Vercel Cron Jobs ou des solutions tierces comme Upstash.

Bonnes pratiques et optimisations

Fort de notre expérience sur des projets comme Dealt (une marketplace nécessitant une gestion fine des avis utilisateurs) et notre propre plateforme de gestion de contenu, nous recommandons les bonnes pratiques suivantes :

1. Gestion des erreurs et des limites d'API

Les API Google ont des quotas et des limites de taux. Implémentez une gestion robuste des erreurs et un système de retry avec backoff exponentiel :

async function fetchWithRetry(fn, maxRetries = 3) {
  let retries = 0;
  while (retries < maxRetries) {
    try {
      return await fn();
    } catch (error) {
      if (error.code === 429 || error.code >= 500) {
        // Attente exponentielle
        const delay = Math.pow(2, retries) * 1000 + Math.random() * 1000;
        await new Promise((resolve) => setTimeout(resolve, delay));
        retries++;
      } else {
        throw error;
      }
    }
  }
  throw new Error("Max retries reached");
}

2. Mise en cache des résultats

Pour optimiser les performances et réduire les appels API :

import { Redis } from "@upstash/redis";

const redis = new Redis({
  url: process.env.UPSTASH_REDIS_URL,
  token: process.env.UPSTASH_REDIS_TOKEN,
});

async function getCachedReviews(businessId) {
  const cacheKey = `reviews:${businessId}`;
  const cachedData = await redis.get(cacheKey);
  
  if (cachedData) return JSON.parse(cachedData);
  
  // Si pas en cache, récupérer depuis l'API
  const reviews = await fetchReviewsFromAPI(businessId);
  
  // Stocker en cache pour 1 heure
  await redis.set(cacheKey, JSON.stringify(reviews), { ex: 3600 });
  
  return reviews;
}

3. Architecture évolutive

Concevez votre système pour qu'il puisse évoluer avec votre entreprise :

• Utilisez une architecture modulaire
• Implémentez des files d'attente pour les tâches intensives
• Prévoyez des mécanismes de scaling horizontal

Conclusion

L'intégration de l'authentification Google OAuth et de l'API Google Reviews dans une application Next.js avec Supabase offre une solution puissante pour la gestion des avis clients. Cette approche permet d'automatiser la collecte des avis, de centraliser leur gestion et d'exploiter pleinement leur potentiel pour améliorer votre réputation en ligne.

Chez Platane, nous avons développé une expertise pointue dans ce domaine grâce à nos différents projets. Notre approche combine technologies de pointe et méthodologies éprouvées pour créer des solutions sur mesure qui répondent précisément aux besoins de nos clients.

Vous avez un projet de gestion d'avis clients ou souhaitez intégrer des fonctionnalités similaires dans votre application existante ? N'hésitez pas à nous contacter via notre formulaire de contact pour échanger sur votre projet. Notre équipe d'experts sera ravie de vous accompagner dans la conception et le développement d'une solution adaptée à vos besoins spécifiques.

Collaborer avec Platane, c'est bénéficier d'une expertise technique de haut niveau, d'une approche créative et innovante, et d'un engagement total pour la réussite de votre projet. Prenez rendez-vous dès aujourd'hui et transformez votre vision en réalité !