Depuis mes débuts en développement, j’ai souvent vu des applications proposer une authentification via Google, GitHub ou Facebook dans une **fenêtre popup**. Je trouvais ça élégant, mais je ne l’avais jamais mis en place moi-même. Je me contentais toujours du **flow classique par redirection**. Récemment, j’ai franchi le pas et je l’ai implémenté dans un vrai projet : **PulseSend** ([pulse-send.jiordiviera.me](https://pulse-send.jiordiviera.me)). Résultat : l’expérience utilisateur est nettement plus fluide et moderne. Cet article partage mon retour d’expérience et un guide pratique pour mettre en place ce flow en combinant **Laravel (Passport + Socialite)** côté backend et **Next.js** côté frontend. --- ## Pourquoi choisir le flow en popup ? * Expérience fluide : l’utilisateur reste sur la page en cours, sans interruption. * Maintien du contexte : parfait si un formulaire ou une action est en cours. * Support multi-providers : Google, GitHub, X, Facebook, etc. * Sécurité solide : basé sur OAuth 2.0 Authorization Code + PKCE, géré via Passport et Socialite. --- ## Architecture globale 1. **Next.js** ouvre un **popup** pointant vers `/oauth/{provider}/redirect`. 2. L’utilisateur s’authentifie via le provider. 3. Le provider redirige vers `/oauth/{provider}/callback` côté Laravel. 4. Le callback crée/charge l’utilisateur, émet un token (Passport) et renvoie une mini-page qui notifie le parent via `postMessage`. 5. La popup se ferme automatiquement. 6. La page principale Next.js reçoit le message, récupère la session et met à jour l’UI. --- ## Côté Laravel (API) ### Installer Socialite ```bash composer require laravel/socialite ``` ### Configurer les providers `config/services.php` : ```php 'google' => [ 'client_id' => env('GOOGLE_CLIENT_ID'), 'client_secret' => env('GOOGLE_CLIENT_SECRET'), 'redirect' => env('APP_URL').'/oauth/google/callback', ], 'github' => [ 'client_id' => env('GITHUB_CLIENT_ID'), 'client_secret' => env('GITHUB_CLIENT_SECRET'), 'redirect' => env('APP_URL').'/oauth/github/callback', ], ``` `.env` : ```env APP_URL=https://api.pulse-send.jiordiviera.me FRONT_APP_URL=https://pulse-send.jiordiviera.me GOOGLE_CLIENT_ID=xxx GOOGLE_CLIENT_SECRET=xxx GITHUB_CLIENT_ID=xxx GITHUB_CLIENT_SECRET=xxx ``` ### Routes ```php // routes/web.php use App\Http\Controllers\Auth\SocialiteController; Route::get('/oauth/{provider}/redirect', [SocialiteController::class, 'redirect']); Route::get('/oauth/{provider}/callback', [SocialiteController::class, 'callback']); ``` ### Contrôleur ```php // app/Http/Controllers/Auth/SocialiteController.php namespace App\Http\Controllers\Auth; use App\Http\Controllers\Controller; use App\Models\User; use Laravel\Socialite\Facades\Socialite; class SocialiteController extends Controller { public function redirect(string $provider) { return Socialite::driver($provider)->redirect(); } public function callback(string $provider) { $socialUser = Socialite::driver($provider)->user(); $user = User::firstOrCreate( ['email' => $socialUser->getEmail()], [ 'name' => $socialUser->getName() ?: $socialUser->getNickname(), 'password' => bcrypt(str()->random(32)), ] ); // Passport: créer un token d’accès $token = $user->createToken('authToken')->accessToken; $origin = config('app.front_url') ?? env('FRONT_APP_URL'); return response()->view('auth.popup-close', [ 'origin' => $origin, 'payload' => [ 'type' => 'oauth:done', 'success' => true, 'token' => $token, ], ]); } } ``` ### Vue popup-close `resources/views/auth/popup-close.blade.php` : ```html ``` --- ## Côté Next.js (Frontend) ### Bouton de connexion ```tsx "use client"; import { useEffect } from "react"; import {Button} from "@/component/ui/button"; export default function LoginButton() { function loginWithPopup(provider: "google" | "github") { const w = window.open( `${process.env.NEXT_PUBLIC_API_URL}/oauth/${provider}/redirect`, "oauth_popup", "width=520,height=720" ); const onMessage = (e: MessageEvent) => { const expectedOrigin = new URL(process.env.NEXT_PUBLIC_API_URL!).origin; if (e.origin !== expectedOrigin) return; if (e.data?.type === "oauth:done" && e.data.success) { localStorage.setItem("token", e.data.token); window.location.reload(); } }; window.addEventListener("message", onMessage, { once: true }); const timer = setInterval(() => { if (w && w.closed) { clearInterval(timer); window.removeEventListener("message", onMessage); } }, 500); } return (

); } ``` --- ## Points de sécurité * Utiliser le paramètre `state` de Socialite pour éviter les attaques CSRF. * Toujours vérifier l’`origin` dans `postMessage`. * Configurer Passport pour gérer la rotation des refresh tokens si nécessaire. * Utiliser `SameSite=None; Secure` pour les cookies si tu travailles sur des sous-domaines. --- ## FAQ rapide **Que faire si la popup est bloquée par le navigateur ?** Toujours ouvrir la popup en réponse directe à un clic utilisateur (`onClick`). Sinon, la plupart des navigateurs bloquent la fenêtre. **Puis-je utiliser ce flow avec d’autres providers (Facebook, X, LinkedIn) ?** Oui, tant que le provider supporte OAuth 2.0, Socialite peut s’intégrer. Le flow reste identique. **Et si je préfère utiliser des cookies plutôt que des tokens ?** C’est possible si ton frontend et ton API partagent le même domaine ou un sous-domaine commun. Passport gère bien les cookies, mais sur des domaines séparés, un token est souvent plus simple. **Comment gérer le rafraîchissement de session ?** Avec Passport, utilise le mécanisme de refresh tokens. Sinon, mets en place un endpoint `/refresh` côté Laravel et stocke un refresh token sécurisé côté serveur. **Est-ce compatible avec NextAuth ou d’autres solutions clés en main ?** Oui, mais l’avantage ici est la maîtrise complète du flow et la flexibilité d’adapter Passport et Socialite selon tes besoins. --- ## Conclusion Mettre en place un login social en **popup** n’est pas si complexe. Avec **Laravel Passport + Socialite** pour la partie serveur et un peu de logique côté **Next.js**, on obtient un flow moderne, sécurisé et agréable à utiliser. Sur **PulseSend** ([pulse-send.jiordiviera.me](https://pulse-send.jiordiviera.me)), ce mécanisme fonctionne déjà et améliore clairement l’expérience utilisateur. C’est le genre de détail qui donne une impression de finition et de professionnalisme à une application.