Vibe code met Lovable AI en Logto om snel je app te bouwen en inlogflows te regelen
Lovable is een AI-aangedreven codeeragent die je helpt om full-stack apps te bouwen met natuurlijke taal: frontend, backend, database en deployment, allemaal op één plek. Met de ondersteuning van Logto kun je nu moeiteloos veilige login, gebruikersbeheer en authenticatieprocessen toevoegen.
Product & Design
Van algemene agents tot taakgerichte copilots: ontwikkelaars zien een fundamentele verschuiving in hoe software wordt gemaakt. Maar van alle agent categorieën steekt er één met kop en schouders bovenuit als de spannendste en meest dynamische: codeeragents.
Tools zoals Lovable, Cursor, Windsurf en Replit halen het nieuws door natuurlijke taal direct om te zetten in echte, werkende software. Geen installatie. Geen boilerplate. Alleen puur resultaat.
Vandaag verschijnt er een nieuwe term op het toneel: Vibe Coding.
Geïntroduceerd door Lovable is vibe coding een nieuwe manier om apps te bouwen door met AI te chatten. In dit artikel laten we precies zien wat vibe coding inhoudt, onderzoeken we hoe Lovable werkt als toonaangevende codeeragent, en lopen we stap voor stap door het bouwen van een full-stack app — compleet met aanmelden, inloggen, gebruikers- en identiteitsbeheer in enkele minuten.
Wat is Lovable AI?
Lovable is een chat-gebaseerd ontwikkelplatform waar je ideeën direct worden omgezet in werkende code, layouts, en zelfs gehoste apps. Je schrijft geen traditionele code : je beschrijft wat je wilt:
"Ik heb een eenvoudig dashboard nodig met twee diagrammen en een zijbalk."
En de AI genereert in enkele seconden een live preview en bewerkbare broncode.
Onder de motorkap gebruikt Lovable moderne frameworks zoals React en Tailwind, en je kunt je project exporteren, zelf hosten, of direct online zetten.
Wat zijn de kernfuncties van Lovable AI
Hier volgt een gedetailleerde tabel gebaseerd op de 9 belangrijkste functies van het Lovable-platform:
| # | Functie | Omschrijving | Waarde |
|---|---|---|---|
| 1 | Door natuurlijke taal aangedreven Full‑stack app | Beschrijf in gewoon Engels wat je wilt en krijg een werkende app met frontend, backend, DB en authenticatie, allemaal direct gegenereerd. | Vermindert de ontwikkeltijd drastisch en haalt de drempel van boilerplate setup weg. |
| 2 | AI code-intelligentie & debuggen | Ingebouwde assistent die code automatisch aanvult, bugs oplost en helpt bij het navigeren door bestanden, logs en API's via een chatgesprek. | Verhoogt de productiviteit en versnelt de leercurve voor niet-expert ontwikkelaars. |
| 3 | Echte code-eigendom & GitHub-synchronisatie | Levert productieklare code (React, Node, etc.) en synchroniseert twee kanten op met GitHub. | Zorgt dat je volledig eigenaar bent van je code en voorkomt vendor lock-in. |
| 4 | Backend-integraties | Native ondersteuning voor Supabase, Stripe en andere backendservices. | Koppel eenvoudig aan databases, opslag, betalingen en authenticatie zonder boilerplate te schrijven. |
| 5 | Visueel bewerken & Tekening-naar-code | Upload schetsen of screenshots (bijv. handgetekende UI's of Figma exports) om echte UI-code te genereren. Inclusief visuele bewerkingsmodus. | Biedt flexibiliteit voor designers en niet-coders om direct aan de UI te werken. |
| 6 | Deployment & eigen domeinen | Ingebouwde deployment pipeline met hostingondersteuning en opzetten van eigen domeinen. | Publiceren van apps wordt moeiteloos – geen gedoe met meerdere diensten. |
| 7 | Samenwerken & real-time synchronisatie | Teamleden kunnen realtime samenwerken, direct wijzigingen zien en versies beheren. | Maakt pair programming, review workflows en teamvriendelijke omgevingen mogelijk. |
| 8 | Veiligheidsscans | Ingebouwde veiligheidscontroles tijdens het publiceren, vooral bij gebruik van Supabase. | Spoort kwetsbaarheden op voor livegang en vergroot het vertrouwen van gebruikers. |
| 9 | Learning-ecosysteem & Templates | Biedt tutorials, promptlibraries, voorgemaakte templates en leermiddelen. | Verlaagt de leercurve en verbetert onboarding van ontwikkelaars. |
Belangrijkste voordelen van Lovable voor app-ontwikkeling
Lovable zet vraagtekens bij veel aannames die in de meeste ontwikkelworkflows zitten ingebakken:
- Dat je een leeg VS Code-venster nodig hebt om te beginnen.
- Dat je Figma-mockups nodig hebt vóór het layouten.
- Dat je tickets nodig hebt vóór de logica.
In plaats daarvan biedt Lovable een werkende omgeving waar natuurlijke taal de primaire UX is — niet alleen voor coderen, maar voor het bouwen van complete producten.
Dit heeft grote gevolgen voor:
- Prototyping: Geen statische mockups meer: test echte UX-ideeën in uren.
- Onboarding: Nieuwe teamleden kunnen code en functies verkennen via een gesprek.
- Toegankelijkheid: Designers en PM's kunnen bijdragen zonder te hoeven coderen.
Voor wie geen professionele softwareontwikkelaar is, geeft Lovable een nieuw niveau van creatieve vrijheid. Zolang je weet wat je wilt bouwen, kun je door "vibe coding" je ideeën omzetten in werkende apps zonder de gebruikelijke blokkades.
Wat we van Lovable kunnen leren
De interface is de nieuwe IDE
Lovable laat zien dat "coderen" niet altijd typen betekent. Het kan ook prompten, bewerken via dialoog en itereren op intentie zijn.
Dit opent veel deuren voor meer inclusieve samenwerking, vooral bij kleine teams of solo-projecten.
Snelle loops winnen van volledige specs
Wanneer je kunt bouwen, testen en verbeteren zonder tools te wisselen of boilerplate te schrijven, krijg je snellere iteraties en meer ruimte voor creativiteit.
Zelfs ervaren ontwikkelaars profiteren van minder contextswitches en kortere feedbackloops.
AI-native apps vragen om AI-native tooling
Net zoals GitHub Copilot logisch was in VS Code, is Lovable logisch voor de nieuwe generatie agent-gedreven, prompt-native apps — waar structuur, logica en user flows niet meer hard gecodeerd zijn, maar dynamisch gedefinieerd worden.
Bouw een fotogalerij-app met Logto als authenticatie
Geef allereerst gewoon een simpele prompt zoals “Maak een fotogalerij-app” en er wordt meteen een basis, maar fraai vormgegeven website voor je gemaakt.
Integreer Logto Auth in Lovable
Daarna vroeg ik Lovable om Logto te gebruiken voor authenticatie. Hoewel Lovable een sterke samenwerking lijkt te hebben met Supabase voor auth, is Supabase geen professionele CIAM-oplossing. In dit geval koos ik voor Logto — een open-source en professioneel CIAM-product.
Volgens de instructies moest ik het volgende aanleveren:
- Logto endpoint
- App-ID
Omdat het een React single-page app is, is er geen app-geheim vereist. De AI regelde alles soepel — het installeerde automatisch de nieuwste Logto React SDK en maakte de benodigde authenticatiecomponenten aan.
Voor de endpoints ging ik gewoon naar Logto Cloud en maakte een nieuwe React-app aan. Op de applicatiedetailpagina vond ik de benodigde endpoints en kopieerde die naar Lovable. Lovable werkte daarna automatisch de code en configuratiebestanden bij.
Je moet ook de Redirect-URI en Post-Sign-out URL van je app invullen.
Het lastige stuk: omdat Lovable je ontwikkelomgeving in de cloud host, kun je niet zoiets als http://localhost:3000/callback gebruiken als redirect URI. Je moet juist de live-URL van je Lovable-project gebruiken en dit bijwerken in de Logto Cloud-console.
Stappen:
- Ga naar je Logto Cloud tenant
- Zoek je app
- Vervang de URL's door:
-
Redirect-URI's:
https://preview--snap-show-gallery-time.lovable.app/callback -
Post Sign-out Redirect URI's:
https://preview--snap-show-gallery-time.lovable.app/
Na een paar chatprompts en iteraties heb je nu een beveiligde website: alleen ingelogde gebruikers kunnen de inhoud zien.
Let op: omdat dit soort codeeragents iframes in de previewmodus gebruiken, kun je bij een klik in de previewmodus niet de inlogpagina openen.
Test de inlogflow
Als je op "Sign in" klikt, opent de Logto-loginpagina. Je kunt de volledige authenticatieflow testen — standaard gebruikt Logto e-mail + wachtwoord als inlogmethode. Doorloop simpelweg het e-mailverificatieproces en kijk dan in de Logto Console of de gebruiker succesvol geregistreerd is.
Zoals je kunt zien, verschijnt je gebruiker nu in de Logto Cloud-console — dat bevestigt dat de authenticatieflow werkte en de gebruiker veilig via je app is ingeschreven.
Nu heb je een compleet werkende app met geïntegreerde loginflows — en kun je je gebruikers rechtstreeks via de Logto Cloud-console beheren.
Logto’s komende update zal AI-aangedreven authentificatie-integratie ondersteunen
Dit was slechts een simpel voorbeeld. Logto ontwikkelt actief MCP-servers die direct in je IDE draaien, waardoor je kunt werken met de Logto Console en Management API — allemaal zonder je ontwikkelomgeving te verlaten. Hiermee kun je straks onder andere:
- Gebruikers maken en beheren
- Logboeken raadplegen
- Inlogflows configureren en beheren
- Autorisatie ontwerpen en onderhouden (bijv. API-resources, permissies, rollen)
- Applicaties en resources beheren
- En nog veel meer
Met de gecombineerde kracht van AI en de solide Logto-infrastructuur is authenticatie integreren geen complexe taak meer.