Comment ajouter la connexion au compte Google avec Supabase auto-hébergé

Dernièrement je vous parlais d'un de mes projets où j'utilise Supabase en tant que backend pour la base de données, les edge functions et en front j'utilise Vitejs React Typescript.

Aujourd'hui, je vais vous expliquer comment ajouter la connexion Google lorsque vous auto-hébergez votre Supabase.

Avant de commencer ce tuto, vous devriez avoir déjà ajouté un reverse proxy Nginx qui arrive à resolve votre API Supabase depuis une URL du genre: https://supabase-api.mondomaine.com .

Sur Google Cloud Platform

Connectez-vous et sélectionnez votre projet.

Allez dans API & Services > Identifiants:

Maintenant, allez dans Créer un ID client OAuth:

Choisissez Application Web en Type d'application:

Dans Origines JavaScript autorisées, ajoutez:

- http://localhost:5173
- https://votredomaine.com

Oui ☝ localhost aussi afin de vous permettre de travailler en local (pour vos tests).

Dans URI de redirection autorisés:

- http://localhost:54321/auth/v1/callback
- http://127.0.0.1:54321/auth/v1/callback
- https://supabase-api.votredomaine.com/auth/v1/callback

Côté code et config

Sur votre serveur, vous devriez avoir un fichier config.toml pour votre Supabase, et si ce n'est pas le cas, faîtes un:

npx supabase init

Une fois que vous l'avez fait, vous avez un dossier supabase/ et un fichier config.toml à l'intérieur, on va ajouter la rubrique suivante:

[auth.external.google]
enabled = true
client_id = "VOTRE_CLIENT_ID_GOOGLE_OAUTH"
secret = "env(SUPABASE_AUTH_EXTERNAL_GOOGLE_SECRET)"
redirect_uri = "https://supabase-api.votredomaine.com/auth/v1/callback"
skip_nonce_check = false

Ici, redirect_uri n'est pas obligatoire en localhost, car il va rediriger par défaut sur http://127.0.0.1:54321/auth/v1/callback , vous pouvez supprimer cette ligne en local.

Vous devriez avoir l'arborescence suivante:

/
|_ .env # Votre fichier de config
|_/supabase/
   |
   |_ config.toml
   |_ ...

Dans le fichier .env, il faudra ajouter cette ligne:

SUPABASE_AUTH_EXTERNAL_GOOGLE_SECRET="VOTRE_SECRET_KEY_GOOGLE_OAUTH"

Pour que Supabase prennent en compte votre configuration, positionnez vous au niveau du fichier .env (un niveau au dessus de supabase/) et faîtes:

npx supabase stop && npx supabase start

Supabase va redémarrer avec votre config.

Vous n'avez plus qu'à mettre votre bouton login sur votre formulaire:

<button
  type="button"
  onClick={() => supabase.auth.signInWithOAuth({ provider: 'google' })}
  className="cursor-pointer w-full bg-white border border-gray-300 py-3 px-4 rounded-lg hover:bg-gray-50 transition-colors shadow-sm flex items-center justify-center font-medium"
>
  <svg className="w-5 h-5 mr-2" viewBox="0 0 24 24">
    <path
      fill="#4285F4"
      d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
    />
    <path
      fill="#34A853"
      d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
    />
    <path
      fill="#FBBC05"
      d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
    />
    <path
      fill="#EA4335"
      d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
    />
    <path fill="none" d="M1 1h22v22H1z" />
  </svg>
  Continue with Google
</button>

On est bon 🙌: