Google Login in Lovable einrichten – SSO & Auth Schritt für Schritt

Warum Google Login?

Niemand will sich noch ein Passwort merken. Sign in with Google ist der De-facto-Standard für Web-Apps – schnell, sicher und vertraut. In Lovable brauchst du dafür weder Backend-Code noch OAuth-Libraries manuell einzurichten.

Dieser Guide zeigt dir den kompletten Weg: Von der Google Cloud Console über die Lovable-Konfiguration bis zur fertigen Login-Seite.

Voraussetzungen

• Ein Lovable-Account mit aktivem Projekt
• Ein Google Cloud-Account (kostenlos)
• Ca. 15 Minuten Zeit

Architektur-Überblick

So funktioniert Google OAuth mit Lovable unter der Haube:

User klickt "Sign in with Google"
        ↓
Browser leitet zu Google OAuth weiter
        ↓
User autorisiert die App
        ↓
Google sendet Token an Lovable Cloud
        ↓
Lovable Cloud erstellt/verknüpft User-Account
        ↓
User ist eingeloggt → App-Zugriff

Lovable Cloud übernimmt das gesamte Token-Handling, Session-Management und die User-Erstellung. Du musst dich nur um die Google Cloud Console und die Lovable-Konfiguration kümmern.

Schritt 1: Lovable Cloud aktivieren

Bevor du Authentication nutzen kannst, muss Lovable Cloud aktiv sein:

1. Öffne dein Projekt in Lovable
2. Klicke auf das Cloud-Symbol in der linken Seitenleiste
3. Aktiviere Lovable Cloud

💡 Lovable Cloud bietet dir Datenbank, Auth, Storage und Edge Functions – alles ohne externen Account.

Schritt 2: Google Cloud Projekt erstellen

2.1 – Neues Projekt anlegen

1. Öffne die Google Cloud Console
2. Klicke oben auf das Projekt-Dropdown → „Neues Projekt"
3. Gib einen Namen ein, z. B. „Meine Lovable App"
4. Klicke „Erstellen"

2.2 – OAuth-Zustimmungsbildschirm konfigurieren

1. Navigiere zu APIs & Dienste → OAuth-Zustimmungsbildschirm
2. Wähle „Extern" als User Type (damit sich jeder mit einem Google-Konto anmelden kann)
3. Fülle die Pflichtfelder aus:
   • App-Name: Dein Projektname
   • Support-E-Mail: Deine E-Mail-Adresse
   • Entwickler-Kontakt: Deine E-Mail-Adresse
4. Klicke „Speichern und fortfahren"

2.3 – Scopes festlegen

Für ein Standard-Login brauchst du nur die Basis-Scopes:

• email – E-Mail-Adresse des Users
• profile – Name und Profilbild
• openid – OpenID Connect Standard

Diese sind standardmäßig bereits ausgewählt. Klicke einfach auf „Speichern und fortfahren".

2.4 – OAuth Client-ID erstellen

1. Navigiere zu APIs & Dienste → Anmeldedaten
2. Klicke „Anmeldedaten erstellen" → „OAuth-Client-ID"
3. Wähle als Anwendungstyp: Webanwendung
4. Gib einen Namen ein, z. B. „Lovable App Login"
5. Unter „Autorisierte Weiterleitungs-URIs" fügst du folgende URL hinzu:

https://<DEINE-PROJEKT-ID>.supabase.co/auth/v1/callback

⚠️ Wichtig: Die Projekt-ID findest du in Lovable unter Cloud → Settings. Die vollständige Redirect-URL hat das Format oben. Ersetze <DEINE-PROJEKT-ID> mit deiner tatsächlichen Supabase-Projekt-ID.

6. Klicke „Erstellen"
7. Kopiere die Client-ID und das Client-Secret – du brauchst beides im nächsten Schritt

Schritt 3: Google Provider in Lovable aktivieren

1. Öffne dein Lovable-Projekt
2. Gehe zu Cloud → Authentication → Providers
3. Suche Google in der Provider-Liste
4. Aktiviere den Google Provider
5. Füge ein:
   • Client ID: Die ID aus Schritt 2.4
   • Client Secret: Das Secret aus Schritt 2.4
6. Speichere die Einstellungen

Schritt 4: Login-Seite erstellen

Jetzt kommt der einfache Teil – sag Lovable im Chat einfach, was du brauchst:

Füge eine Login-Seite hinzu mit einem "Sign in with Google"-Button.
Nur eingeloggte User sollen die App nutzen können.
Füge einen Logout-Button in die Navigation ein.

Lovable generiert automatisch:

• Eine Login-Seite mit Google-Button
• Route-Protection für authentifizierte Bereiche
• Session-Management
• Logout-Funktionalität

Beispiel: Manueller Google Sign-In Button

Falls du den Button lieber selbst einbauen willst, hier der Code:

import { supabase } from '@/integrations/supabase/client';

const handleGoogleLogin = async () => {
  const { error } = await supabase.auth.signInWithOAuth({
    provider: 'google',
    options: {
      redirectTo: window.location.origin,
    },
  });
  
  if (error) {
    console.error('Login fehlgeschlagen:', error.message);
  }
};

<button 
  onClick={handleGoogleLogin}
  className="flex items-center gap-3 px-6 py-3 bg-white text-gray-700 
             border border-gray-300 rounded-lg hover:bg-gray-50 
             transition-colors font-medium"
>
  <svg viewBox="0 0 24 24" width="20" height="20">
    <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"/>
    <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"/>
  </svg>
  Mit Google anmelden
</button>

Schritt 5: Testen

1. Öffne die Live-Vorschau in Lovable
2. Klicke auf „Sign in with Google"
3. Wähle dein Google-Konto
4. Du wirst zurück zur App geleitet – eingeloggt!

💡 Tipp: Im Entwicklungsmodus kannst du dich mit jedem Google-Konto anmelden. Für die Produktion solltest du die App in der Google Cloud Console verifizieren lassen, um die „Nicht verifiziert"-Warnung zu entfernen.

Schritt 6: User-Daten nutzen

Nach dem Login hast du Zugriff auf die Google-Profildaten des Users:

import { supabase } from '@/integrations/supabase/client';

// Aktuellen User abrufen
const { data: { user } } = await supabase.auth.getUser();

console.log(user?.email);                    // E-Mail
console.log(user?.user_metadata?.full_name); // Voller Name
console.log(user?.user_metadata?.avatar_url); // Profilbild-URL

Auth-State überwachen

Um auf Login/Logout-Events zu reagieren:

import { useEffect, useState } from 'react';
import { supabase } from '@/integrations/supabase/client';
import type { User } from '@supabase/supabase-js';

function useAuth() {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Listener ZUERST registrieren
    const { data: { subscription } } = supabase.auth.onAuthStateChange(
      (_event, session) => {
        setUser(session?.user ?? null);
        setLoading(false);
      }
    );

    // Dann initiale Session holen
    supabase.auth.getSession().then(({ data: { session } }) => {
      setUser(session?.user ?? null);
      setLoading(false);
    });

    return () => subscription.unsubscribe();
  }, []);

  return { user, loading };
}

Häufige Fehler & Troubleshooting

„redirect_uri_mismatch"

Ursache: Die Redirect-URI in der Google Console stimmt nicht mit der tatsächlichen URL überein.

Lösung: Prüfe die URI unter Google Cloud → APIs & Dienste → Anmeldedaten → Dein OAuth Client. Sie muss exakt so aussehen:

https://<PROJEKT-ID>.supabase.co/auth/v1/callback

„Access blocked: App not verified"

Ursache: Deine App ist noch nicht von Google verifiziert.

Lösung: Für Entwicklung und Tests ist das kein Problem – klicke auf „Erweitert" → „Trotzdem fortfahren". Für Produktion reiche die App zur Verifizierung ein unter OAuth-Zustimmungsbildschirm → Veröffentlichungsstatus.

Login funktioniert, aber User wird nicht erstellt

Ursache: Der Auth-Provider ist in Lovable Cloud nicht korrekt aktiviert.

Lösung: Prüfe unter Cloud → Authentication → Providers, ob Google aktiviert ist und Client-ID + Secret korrekt eingetragen sind.

Session geht nach Reload verloren

Ursache: onAuthStateChange wird nicht korrekt eingerichtet.

Lösung: Stelle sicher, dass der Listener vor getSession() registriert wird (siehe Code-Beispiel oben).

Sicherheits-Tipps

Maßnahme	Beschreibung
RLS aktivieren	Row Level Security auf allen Tabellen, die User-Daten enthalten
Client Secret schützen	Niemals im Frontend-Code – nur in der Lovable Cloud Konfiguration
Redirect-URIs einschränken	Nur die tatsächlich genutzten URIs in der Google Console eintragen
Scopes minimieren	Nur email, profile und openid – nicht mehr anfragen als nötig
App verifizieren	Für Produktion die Google-Verifizierung durchlaufen

Nächste Schritte

• Rollen & Berechtigungen: Erstelle eine user_roles-Tabelle für Admin/User-Unterscheidung
• Profile-Seite: Zeige Google-Profilbild und Name in einer User-Profilseite
• Weitere Provider: Füge Apple, GitHub oder Microsoft als zusätzliche Login-Optionen hinzu
• Protected Routes: Schütze sensible Bereiche mit einem Auth-Guard-Component

Fazit

Google SSO in Lovable einzurichten dauert keine 15 Minuten. Der größte Aufwand liegt in der Google Cloud Console – die Lovable-seitige Integration ist dank Lovable Cloud trivial. Einmal eingerichtet, haben deine User ein nahtloses Login-Erlebnis ohne Passwort-Frust.

Starte jetzt dein Projekt mit Google Auth →