Lovable Auth Starter

Deployable Lovable React authentication starter for Tuurio ID with exact preview and production origins, OIDC, and PKCE.

Generated from Tuurio/auth_samples/auth_samples_lovable. Submit implementation fixes upstream so they are not replaced by the next synchronized release.

What you get

• Standards-based OpenID Connect authentication with framework-native integration.
• Exact redirect and post-logout redirect handling.
• Protected-route and logout examples.
• A reviewed, pinned Tuurio provisioning workflow.

Quickstart

1. Create a repository with Use this template or clone this repository.
2. Follow the framework-specific prerequisites below.
3. Review and run this pinned provisioning command:

npx manage-tuurio-id@1.1.6 init --framework react --project-dir . --auth browser --yes --output json --campaign github_lovable --no-open --no-wait

4. Approve the exact command, then complete the secure browser handoff yourself.
5. Run the build and verify one real sign-in and sign-out.

Never paste credentials, client secrets, authorization codes, tokens, session cookies, or environment-file contents into an agent chat. Browser and native applications are public clients and must not contain a client secret.

Runtime and verification

• Runtime: Node.js 20+
• Package manager: npm
• Verification: npm ci && npm run typecheck && npm run build

Security model

This starter uses OpenID Connect Authorization Code flow. Browser and native clients use PKCE S256 and contain no client secret. Redirect and post-logout redirect URIs must match exactly. Identity comes from the established OIDC integration or an authenticated UserInfo request; decoded JWT payloads are never treated as validation. Keep generated local environment files ignored and never commit tokens or credentials.

Framework instructions

Tuurio ID Lovable / React sample

A React + Vite reference implementation for adding Tuurio ID to a Lovable app with OAuth 2.0 / OpenID Connect Authorization Code flow and PKCE.

Integration guide

• Lovable guide and copy-paste prompt: Tuurio ID for Lovable
• General developer docs: Tuurio ID developers

Use with Lovable

Paste this prompt into your Lovable project:

Add EU-hosted Tuurio ID login to this React/Vite app using OIDC Authorization Code with PKCE.

First identify both exact HTTPS origins:
- `LOVABLE_DEPLOYMENT_ORIGIN`: the stable standalone preview, published app, or custom-domain origin users can open outside the editor. This is the primary deployment target.
- `LOVABLE_EDITOR_PREVIEW_ORIGIN`: the embedded editor preview origin, normally `https://<project-id>.lovableproject.com`.

Never use Lovable's internal dev-server URL or localhost as the deployment origin. If the stable origin is not available yet, stop and ask me to publish the app or provide it.

After replacing both placeholders, run this non-interactive setup command exactly:
npx manage-tuurio-id@1.1.6 init --framework react --project-dir . --base-url LOVABLE_DEPLOYMENT_ORIGIN --redirect-uri LOVABLE_DEPLOYMENT_ORIGIN/auth/callback --post-logout-redirect-uri LOVABLE_DEPLOYMENT_ORIGIN/logout/callback --additional-origin LOVABLE_EDITOR_PREVIEW_ORIGIN --public-config src/tuurio.public.json --auth browser --yes --output json --campaign lovable_starter --no-open --no-wait

Run the approved command once. Show me `verificationUriComplete` from its `authorization_required` JSON result. After I complete the browser handoff, rerun the exact same command unchanged until it returns `configured`. Never overlap runs, delete saved handoff state, or add `--fresh-handoff` automatically. Then use auth_samples_lovable in https://github.com/Tuurio/auth_samples as the implementation reference. Import the generated `src/tuurio.public.json`, select only the target whose exact `deploymentBaseUrl` origin equals `window.location.origin`, and fail closed if none or more than one matches. Add sign-in, /auth/callback, authenticated state, sign-out, and /logout/callback. Never create, request, or expose a client secret. Never deploy `.env.local`.

Lovable currently creates projects inside Lovable and can export them to GitHub. This sample is a reference implementation for the agent; it is not intended to be imported into Lovable as an existing repository.

Run locally

Requires Node.js 20.19 or newer.

1. Install dependencies:

npm install

2. For a local-only test, provision a public Tuurio ID client and replace the checked-in placeholder config:

npx manage-tuurio-id@1.1.6 init \
  --framework react \
  --project-dir . \
  --base-url http://localhost:5173 \
  --public-config src/tuurio.public.json \
  --overwrite-public-config \
  --auth browser \
  --yes \
  --output json \
  --campaign lovable_starter \
  --no-open \
  --no-wait

3. Complete the browser handoff, rerun the exact same command until it returns configured, then start the app:

npm run typecheck
npm run dev

Open http://localhost:5173 and verify sign-in, callback handling, authenticated state, and sign-out.

Required client URLs

Redirect URI: http://localhost:5173/auth/callback
Post-logout Redirect URI: http://localhost:5173/logout/callback

Deployable public-client configuration

src/tuurio.public.json contains the issuer, public client ID, scope, and every exact deployment/preview target. It is deliberately safe to commit and deploy. Runtime selection is based on an exact window.location.origin match; there is no wildcard or fallback to another target.

This is a public SPA client. Never add a client secret to browser code, configuration, a prompt, or a commit. Keep redirect URIs exact and use HTTPS outside local development. .env.local remains local-only and must never be deployed as an alternative production configuration.

License

Licensed under the Apache License, Version 2.0. See LICENSE.