Tilføj Google login til din web app på 10 minutter

Victor Staalkjaer
3 Min. Læst
Log ind med google (Google Login flow)


Gør din SaaS mere professionel – og fjern friktion i signup

Du kender det.

Du har lige bygget dit super seje SaaS tool.
Det kan være et SEO tool, et dashboard, et internt værktøj – whatever.

Men når folk klikker Get started, ender de på den klassiske:

  • skriv din e-mail
  • skriv dit password

Det virker… men det føles ærligt talt lidt gammeldags.

De gode tools i dag har:
👉 Login med Google

Det er hurtigere, nemmere og føles bare mere professionelt.

Så i dag kigger vi på, hvordan du sætter Google login op på cirka 10 minutter, så brugeren:

  • klikker “Login med Google”
  • godkender
  • og lander direkte i dashboardet – logget ind

🎥 Se youtube-videoen her:
https://www.youtube.com/watch?v=fBiJFlggUi4

Først: spørg lovable.dev (så du slipper for at google dig ihjel)


Start med at skrive et prompt i chatten i stil med:

“Jeg vil gerne oprette muligheden for at signe up og signe ind med Google.
Når man er færdig, skal man sendes direkte til dashboardet og være logget ind.”

Når du gør det i Lovable, får du typisk en ret fin step-by-step plan.

Det handler basically om to ting:

  1. Opsæt Google OAuth i Google Cloud Console
  2. Sæt Client ID + Secret ind i dit backend setup i Lovable

Trin 1: Opret et projekt i Google Cloud Console


Gå ind i Google Cloud Console og lav et nyt projekt.

I eksemplet her:

  • projekt: "SEO Sheet"

Når projektet er oprettet, skal du ind i:

  • APIs & Services
  • Credentials

Det er her du laver dit OAuth login.


Google beder dig først opsætte “consent screen” – altså det, brugeren ser, når de logger ind.

Du vælger typisk:

  • App name (fx SEO Sheet)
  • User support email
  • Audience: External (medmindre du kun bruger det internt)
  • Developer contact email

Klik dig igennem og tryk finish.

Det er ikke her magien sker, det er bare nødvendigt for at komme videre.

Trin 3: Opret en OAuth Client (Web application)


Nu skal du oprette selve login-klienten.

Vælg:

  • Create credentials
  • OAuth client ID
  • Application type: Web application

Giv den et navn (fx SEO Sheet igen).

Trin 4: Udfyld “Authorized origins” og “Redirect URL”


Det vigtigste her er, at dine URLs matcher din app.

Du skal typisk udfylde to ting:

Authorized JavaScript origins

Det er dit domæne / origin.

Authorized redirect URIs

Det er den URL Google sender brugeren tilbage til efter login.

Når du har indsat dem korrekt, klikker du Create.

Og nu får du to ting:

  • Client ID
  • Client Secret

De her skal du ikke dele offentligt. Specielt ikke secret.

Trin 5: Indsæt Client ID + Secret i Lovable


Nu hopper du tilbage i Lovable.

Gå ind i backend / cloud settings og find Google login settings.

I din tekst var flowet:

  • Cloud
  • Users
  • Auth settings
  • Google settings

Indsæt:

  • Client ID
  • Client Secret

Tryk Save.

Done.

Trin 6: Test det (og husk test-mode fælden)


Nu kan du teste.

Husk: klik preview app.

Derefter klik:

  • Login
  • Login with Google

Hvis alt er sat rigtigt op, bliver du sendt gennem Google-flowet og lander i dit dashboard bagefter.

Det føles instant mere “rigtigt”.

Men! Test mode kan snyde dig


Når du tester Google OAuth, er det ofte begrænset til:

  • din egen e-mail
  • testbrugere du manuelt har tilføjet

Så hvis en anden konto prøver at logge ind og den fejler eller ser mærkelig ud:
Det er typisk fordi du stadig er i test-mode.

Løsning:

  • tilføj testbrugere i consent screen
  • eller “publish” / gå live, når du er klar

Hvorfor Google login er værd at gøre


Det her er ikke bare en “nice-to-have”.

Google login:

  • fjerner friktion
  • øger signup conversion
  • føles mere professionelt
  • giver brugeren en tryg loginoplevelse

Og vigtigst:
👉 Det gør det lettere at gå fra “nysgerrig besøgende” til “aktiv bruger”.

Konklusion


Så hvis du lige har bygget dit SaaS tool og tænker:
“Okay, nu skal det føles som et rigtigt produkt”

… så er Google login et af de hurtigste wins.

Skriv til maskinen:

  • “hjælp mig med Google login”
  • følg Google Cloud steps
  • sæt Client ID + Secret ind i Lovable
  • test
  • ship

Og hvis noget driller, så skriv — så kigger vi på det.


Code&Go hjælper virksomheder med at bygge stærke digitale produkter i en tid hvor AI ændrer spillereglerne for innovation, udvikling og vækst. Vi arbejder sammen med teams der vil skabe smartere løsninger, validere idéer hurtigere og bygge forretninger der kan skalere.

Har du brug for sparring eller hjælp til at løfte dit næste produkt eller AI projekt, så er du velkommen til at kontakte os på codego.dk og høre hvordan vi kan støtte din rejse.