15 déc. 2025
Maxime Gadras
Aujourd’hui, proposer une authentification simple et rapide est devenu un standard pour toute application web.
Les utilisateurs sont de plus en plus réticents à créer un énième mot de passe, à remplir un formulaire long ou à valider leur inscription par email.
Dans ce contexte, le Sign in with Google s’impose comme une solution à la fois efficace, rassurante et largement adoptée.
Bubble permet d’intégrer l’authentification Google à ses applications, sans écrire une seule ligne de code. Encore faut-il comprendre comment fonctionne cette intégration, quelles sont les étapes à respecter côté Bubble et côté Google, et quels sont les points de vigilance à connaître avant de passer en production.
Dans cet article, nous allons voir comment intégrer proprement le Sign in with Google dans une application Bubble, en nous appuyant sur un tutoriel vidéo existant que j'avais publié sur ma chaîne Youtube, enrichi par les bonnes pratiques issues de la documentation officielle Bubble et de Google Cloud.
Sommaire
Pourquoi proposer le Sign in with Google dans une app Bubble
Comment fonctionne l’authentification Google avec Bubble
Version test vs version production : ce qu’il faut comprendre
Installer le plugin Google Sign-In sur Bubble
Créer et configurer un projet dans la Google Cloud Console
Paramétrer l’écran de consentement OAuth
Créer les identifiants OAuth (Client ID et Client Secret)
Configurer le plugin Google dans Bubble
Créer le bouton « Se connecter avec Google »
Mettre en place le workflow de connexion / inscription
Récupérer les données Google de l’utilisateur
Passer l’authentification Google en production
Bonnes pratiques et erreurs fréquentes
Conclusion
1. Pourquoi proposer le Sign in with Google dans une app Bubble
L’authentification via Google apporte un gain immédiat en termes d’expérience utilisateur. En un clic, l’utilisateur peut accéder à l’application sans avoir à créer de mot de passe, ni à se souvenir d’identifiants supplémentaires. Cette simplicité a un impact direct sur le taux d’inscription et sur la rétention.
D’un point de vue produit, le Sign in with Google permet également de s’appuyer sur une identité déjà vérifiée par Google. L’email est fiable, le compte existe réellement, et certaines informations peuvent être récupérées automatiquement, comme le prénom, le nom ou la photo de profil.
Sur Bubble, cette fonctionnalité est particulièrement intéressante, car elle s’intègre parfaitement au système d’utilisateurs natif. Un utilisateur connecté via Google reste un User Bubble classique, stocké dans la base de données, et utilisable dans tous les workflows et règles de confidentialité.
2. Comment fonctionne l’authentification Google avec Bubble
Bubble utilise le protocole OAuth 2.0, qui est le standard d’authentification mis en place par Google et la majorité des grandes plateformes.
Le principe est simple : Bubble délègue l’authentification à Google, qui vérifie l’identité de l’utilisateur, puis renvoie à Bubble un jeton sécurisé contenant les informations du compte.
À aucun moment Bubble n’a accès au mot de passe Google de l’utilisateur. Google se contente de confirmer que l’utilisateur est bien propriétaire de l’adresse email sélectionnée.
Une fois l’authentification validée, Bubble :
crée un nouvel utilisateur si l’email n’existe pas encore,
ou connecte l’utilisateur existant si l’email est déjà présent dans la base.
Pour le reste de l’application, il n’y a aucune différence entre un utilisateur créé via Google et un utilisateur créé via un formulaire classique.
3. Version test vs version production : ce qu’il faut comprendre
Avant d’entrer dans la configuration technique, il est essentiel de comprendre que Google distingue deux modes d’utilisation pour l’authentification OAuth : le mode test et le mode production.
En mode test, l’accès à l’authentification Google est limité à une liste d’adresses email explicitement autorisées. Cela permet de développer et de tester l’intégration sans passer par un processus de validation long et contraignant.
En mode production, l’authentification est ouverte à tous les utilisateurs, mais Google impose une vérification de l’application. Cette vérification nécessite notamment une landing page publique, une politique de confidentialité, des conditions générales d’utilisation, et parfois une revue manuelle.
Dans cet article, nous nous concentrons volontairement sur la mise en place complète en mode test, qui constitue la base indispensable avant tout passage en production.
4. Installer le plugin Google Sign-In sur Bubble
La première étape côté Bubble consiste à installer le plugin officiel Google fourni par Bubble.
Depuis l’éditeur Bubble, rendez-vous dans l’onglet Plugins, puis recherchez le plugin nommé Google, développé par Bubble. Une fois installé, ce plugin ajoute les actions nécessaires pour gérer l’authentification Google dans les workflows.
À ce stade, le plugin demande déjà deux informations : un Client ID et un Client Secret. Ces éléments ne sont pas encore disponibles, car ils doivent être générés depuis la Google Cloud Console. Nous allons donc les configurer dans les étapes suivantes.
5. Créer et configurer un projet dans la Google Cloud Console
Toute intégration Google passe par la création d’un projet dans la Google Cloud Console. Ce projet sert de conteneur pour l’authentification, les API et les identifiants de votre application.
Après vous être rendu sur la Google Cloud Console et connecté avec votre compte Gmail, vous devez créer un nouveau projet. Le nom du projet est principalement interne et peut correspondre au nom de votre application Bubble.
Une fois le projet créé et sélectionné, vous pouvez accéder à l’ensemble des paramètres nécessaires à l’authentification OAuth.
6. Paramétrer l’écran de consentement OAuth
L’écran de consentement OAuth est la page que Google affiche à l’utilisateur lorsqu’il clique sur « Se connecter avec Google ». C’est une étape obligatoire, même en mode test.
Dans la configuration de cet écran, vous devez notamment définir :
le nom de l’application, tel qu’il apparaîtra à l’utilisateur,
une adresse email de support,
le type d’utilisateurs (interne ou externe).
Il est fortement recommandé de choisir External, même pour une application encore en développement. Cela évite d’avoir à recommencer toute la configuration lors du passage en production.
En mode test, vous devez également ajouter explicitement les adresses Gmail autorisées à utiliser l’authentification. Google limite cette liste à 100 utilisateurs tant que l’application n’est pas validée.
7. Créer les identifiants OAuth (Client ID et Client Secret)
Une fois l’écran de consentement configuré, vous pouvez créer les identifiants OAuth.
Dans la section Credentials, vous devez créer un OAuth Client ID de type Web application. Cette étape est particulièrement sensible, car elle nécessite de renseigner des URIs de redirection autorisées.
Ces URIs correspondent aux pages Bubble vers lesquelles l’utilisateur sera redirigé après l’authentification Google. Elles doivent être strictement identiques aux URLs utilisées dans Bubble, caractère par caractère. Une simple différence de slash ou de sous-domaine entraînera un échec de la connexion.
Il est conseillé d’ajouter plusieurs variantes de l’URL pour éviter les erreurs.
Une fois cette étape validée, Google fournit un Client ID et un Client Secret, indispensables pour la suite.
8. Configurer le plugin Google dans Bubble
De retour dans Bubble, vous pouvez maintenant renseigner les identifiants générés par Google dans les paramètres du plugin.
Ces informations permettent à Bubble de communiquer avec Google de manière sécurisée. À partir de ce moment, l’intégration technique est opérationnelle.
9. Créer le bouton « Se connecter avec Google »
Sur votre page de login ou d’inscription, vous pouvez créer un bouton personnalisé pour la connexion Google. Bubble ne fournit pas de bouton natif imposé, ce qui vous laisse une totale liberté sur le design.
Ce bouton peut être un simple groupe contenant une icône Google et un texte explicite. L’important est qu’il soit clairement identifiable par l’utilisateur comme une option de connexion alternative.
10. Mettre en place le workflow de connexion / inscription
Le workflow associé à ce bouton est particulièrement simple. Bubble propose une action unique nommée Sign up / log in with a social network.
En sélectionnant Google comme réseau social, cette action gère à la fois :
la création du compte utilisateur,
et la connexion si l’utilisateur existe déjà.
Cette logique unifiée simplifie grandement le développement, puisqu’il n’est pas nécessaire de distinguer explicitement l’inscription de la connexion.
11. Récupérer les données Google de l’utilisateur
Une fois l’utilisateur authentifié, Bubble met à disposition plusieurs informations renvoyées par Google, comme le prénom, le nom ou la photo de profil.
Il est possible d’utiliser ces données pour enrichir automatiquement le profil utilisateur, par exemple en enregistrant la photo Google comme avatar par défaut. Cela permet d’améliorer l’expérience utilisateur dès la première connexion.
12. Passer l’authentification Google en production
Le passage en production implique une validation par Google. Cette validation repose principalement sur la transparence de l’application vis-à-vis des données utilisateurs.
Google exige généralement :
une page de présentation claire de l’application,
une politique de confidentialité accessible publiquement,
des conditions générales d’utilisation.
Selon les cas, Google peut également demander des informations supplémentaires, voire une démonstration vidéo de l’usage des données.
13. Bonnes pratiques et erreurs fréquentes
L’intégration du Sign in with Google est robuste, mais certaines erreurs reviennent fréquemment. Les plus courantes concernent les URIs de redirection mal configurées, l’oubli d’ajouter son propre email dans les utilisateurs de test, ou encore une confusion entre mode test et production.
Il est également recommandé de toujours proposer une méthode de connexion alternative, afin de ne pas dépendre exclusivement de Google.
14. Conclusion
Intégrer le Sign in with Google dans une application Bubble est aujourd’hui presque indispensable pour proposer une expérience utilisateur moderne et fluide. Bien que la configuration puisse sembler longue au premier abord, elle repose sur des étapes claires et standardisées.
Une fois maîtrisée, cette intégration devient un véritable atout, aussi bien pour les projets personnels que pour les applications développées pour des clients. C’est une compétence clé pour tout développeur Bubble souhaitant livrer des applications professionnelles et abouties.
—-
Si vous n'aimez pas lire, le tuto original publié sur ma chaîne Youtube est disponible ici :
