Lovable-App: Supabase-Login und Deep Links in der App

Im Browser funktioniert der Login Ihrer Lovable-App einwandfrei, doch in der Store-Version landen Nutzer nach dem Google-Login plötzlich im Safari, die Bestätigungsmail öffnet die Website statt der App oder die Sitzung ist nach dem Neustart weg. Das liegt nicht an Supabase, sondern an den Eigenheiten mobiler Plattformen. Wir erklären, wie Authentifizierung, Redirects und Deep Links zusammenspielen und wie Sie die typischen Fehler vermeiden, bevor Apple oder Google sie im Review entdecken.

Was beim Login in der App anders ist

Lovable-Projekte nutzen in der Regel Supabase Auth: E-Mail mit Passwort, Magic Links oder OAuth-Anbieter wie Google und Apple. Im Browser läuft der OAuth-Ablauf als Weiterleitung zum Anbieter und zurück auf eine Redirect-URL. In einer App, die Ihre Web-App in einem WebView anzeigt, bricht diese Kette an zwei Stellen.

Erstens blockiert Google die Anmeldung in eingebetteten WebViews und zeigt einen Fehler wie disallowed_useragent. Der OAuth-Schritt muss deshalb im Systembrowser beziehungsweise in einer sicheren Browser-Sitzung stattfinden. Zweitens muss der Rücksprung nach erfolgreichem Login wieder in der App landen und nicht im Browser. Genau dafür brauchen Sie Deep Links.

Universal Links, App Links und Custom Schemes

Universal Links unter iOS und App Links unter Android verknüpfen Ihre Domain mit der App. Dazu hinterlegen Sie auf Ihrer Domain die Datei apple-app-site-association beziehungsweise assetlinks.json im Ordner .well-known und aktivieren die Associated Domains in der App. Öffnet ein Nutzer dann einen Link auf diese Domain, startet direkt die App mit dem passenden Pfad.

Ein Custom Scheme wie meineapp:// ist einfacher einzurichten, aber weniger robust, weil theoretisch auch andere Apps es registrieren könnten. Für Login-Rücksprünge und Links in E-Mails empfehlen wir deshalb Universal Links und App Links auf einer eigenen Domain, nicht auf der lovable.app-Subdomain, auf deren Dateien Sie keinen Zugriff haben.

Deep Links sind nicht nur für den Login nützlich. Links aus Push-Nachrichten, Einladungen an Teammitglieder oder geteilte Inhalte profitieren genauso davon, wenn sie direkt den richtigen Bildschirm in der App öffnen. Legen Sie deshalb früh eine klare URL-Struktur fest, die in Web und App identisch funktioniert. Dann muss die App lediglich den Pfad an Ihre Lovable-Oberfläche weitergeben, und das bestehende React-Routing übernimmt den Rest.

So richten Sie den Ablauf ein

Für einen stabilen Login in der Store-App gehen Sie in dieser Reihenfolge vor:

1. Verbinden Sie Ihre Lovable-App mit einer eigenen Domain und hinterlegen Sie dort die Verknüpfungsdateien für iOS und Android.
2. Tragen Sie in Supabase unter den Auth-Einstellungen die Site URL und alle erlaubten Redirect-URLs ein, inklusive der Pfade, die die App öffnen sollen.
3. Konfigurieren Sie die App so, dass OAuth-Seiten von Google und Apple im Systembrowser oder einer sicheren Browser-Sitzung geöffnet werden.
4. Sorgen Sie dafür, dass der Rücksprung die Sitzung in der App übernimmt, etwa indem der Callback-Pfad in der App geladen wird und Supabase den Code gegen eine Sitzung tauscht.
5. Testen Sie Registrierung, Passwort-Reset und Magic Link auf echten Geräten, jeweils mit installierter und ohne installierte App.

Sitzungen, Speicher und häufige Fehler

Supabase speichert die Sitzung standardmäßig im localStorage des WebViews. Das funktioniert, solange das Betriebssystem den Speicher nicht leert. Prüfen Sie, ob Ihre App-Hülle Cookies und Web-Speicher dauerhaft hält, und testen Sie gezielt den Neustart nach einigen Tagen. Ein weiterer Klassiker: Bestätigungsmails verweisen auf die Vorschau-URL von Lovable, weil die Site URL nie angepasst wurde.

Bieten Sie Google-Login an, verlangt Apple nach Guideline 4.8 zusätzlich eine gleichwertige datenschutzfreundliche Option wie Sign in with Apple. Planen Sie diese gleich mit ein, statt sie nach einer Ablehnung nachzurüsten.

Hilfreich für die Fehlersuche ist ein kleiner Diagnose-Bildschirm im Testbuild, der aktuelle URL, Sitzungsstatus und Ablaufzeit des Tokens anzeigt. So sehen Sie sofort, an welcher Stelle der Ablauf abreißt.

Hilfe bei Login und Deep Links

WebViewGold unterstützt das Öffnen externer Seiten im Systembrowser sowie Universal Links und App Links, sodass sich der Login-Ablauf ohne eigenen nativen Code abbilden lässt. Wenn Ihre Authentifizierung komplexer ist, etwa mit mehreren Mandanten oder eigenen Rollen, unterstützen unsere AI Code Engineers über neooutput bei der Umsetzung. Klären Sie Ihre Situation in einem kostenlosen 15-Minuten-Erstgespräch.

Häufige Fragen