Auth Pocketbase OAuth Google : tutoriel pratique 2026

L’authentification « social login » via OAuth Google est devenue un standard d’UX en 2026 : les utilisateurs détestent créer des comptes et préfèrent cliquer sur « Continuer avec Google ». Pocketbase intègre nativement les flows OAuth pour Google, GitHub, Apple, Facebook, Microsoft et bien d’autres. Voici le tutoriel pour activer Google OAuth dans une app Pocketbase + frontend (web ou mobile) en 2026.

Voir le guide complet Pocketbase pour les bases.

Étape 1 — Créer un projet Google Cloud

1. Aller sur console.cloud.google.com
2. Créer un nouveau projet (ex : monapp-prod)
3. APIs & Services → OAuth consent screen → External
4. Renseigner nom de l’app, email support, logo, domaine, scopes (email, profile)
5. Ajouter les domaines autorisés : api.exemple.sn, app.exemple.sn
6. APIs & Services → Credentials → Create Credentials → OAuth client ID → Web application
7. Authorized redirect URIs : https://api.exemple.sn/api/oauth2-redirect
8. Récupérer Client ID et Client Secret

Étape 2 — Configurer Pocketbase

1. Dashboard admin Pocketbase → Settings → Auth providers → Google
2. Cocher « Enable »
3. Coller Client ID et Client Secret obtenus à l’étape 1
4. Save

Étape 3 — Frontend JS

import PocketBase from "pocketbase";
const pb = new PocketBase("https://api.exemple.sn");

// Récupérer la liste des providers configurés
const methods = await pb.collection("users").listAuthMethods();
const googleProvider = methods.authProviders.find((p) => p.name === "google");

// Construire l'URL d'autorisation
const redirectUrl = "https://app.exemple.sn/oauth-callback";
const authUrl = googleProvider.authUrl + redirectUrl;

// Rediriger l'utilisateur
window.location.href = authUrl;

Étape 4 — Page de callback

// /oauth-callback page
import PocketBase from "pocketbase";
const pb = new PocketBase("https://api.exemple.sn");

const params = new URLSearchParams(window.location.search);
const code = params.get("code");
const state = params.get("state");

// Récupérer le provider Google
const methods = await pb.collection("users").listAuthMethods();
const provider = methods.authProviders.find((p) => p.name === "google");

// Échanger le code contre une session
const authData = await pb.collection("users").authWithOAuth2Code(
  "google",
  code,
  provider.codeVerifier,
  "https://app.exemple.sn/oauth-callback",
);

console.log("Connecté :", authData.record);
window.location.href = "/dashboard";

Étape 5 — Flow simplifié authWithOAuth2

Pour un flow encore plus simple en frontend SPA, le SDK propose authWithOAuth2 qui ouvre un popup et gère tout :

const authData = await pb.collection("users").authWithOAuth2({
  provider: "google",
});

if (authData) {
  console.log("Connecté :", pb.authStore.model);
}

Étape 6 — Apps mobiles (React Native, Flutter)

Pour les apps mobiles, utilisez un deep link comme redirect URL (monapp://oauth) et un browser tab in-app pour le flow OAuth. Le SDK Pocketbase Flutter et React Native gère ça nativement.

Étape 7 — Email de l’utilisateur

Par défaut Pocketbase crée automatiquement un compte users avec l’email Google de l’utilisateur. Il considère que cet email est déjà vérifié (Google le valide déjà), donc pas d’envoi de mail de vérification.

Si vous avez déjà un compte créé manuellement avec le même email, Pocketbase associe automatiquement les deux à la première connexion OAuth.

Adaptation Afrique de l’Ouest

Le Sign-in with Google fonctionne identiquement depuis tous pays CEDEAO. Pour vos utilisateurs sénégalais ou ivoiriens, c’est même particulièrement utile car beaucoup ont un compte Gmail ou Workspace mais pas forcément un compte dédié à votre app.

Erreurs fréquentes

Pour aller plus loin

• Guide complet Pocketbase
• Déployer Pocketbase Coolify
• Hooks Go Pocketbase