Set up Sign in with Lovable

Sign in with Lovable puts a Lovable button on your hosted sign-in page. The person approves your app on Lovable's own consent screen and comes back to your app signed in, with their name and email address. It suits apps for people who build with Lovable: they sign up with one click. Lovable signs people in with OpenID Connect (the standard way one site confirms who someone is for another), and offers it on every Lovable plan. You register an OAuth client in your Lovable workspace, copy its two keys into BuildBase, and give Lovable one address from BuildBase.

What goes where

The client ID is not secret. The client secret is.

1. Register the client on Lovable

These are the steps the console shows under How to get your Lovable keys, from Lovable's Sign in with Lovable guide.

1. Sign in to Lovable as an owner or admin of the workspace that should own the client.
2. Open Workspace settings, then API keys & OAuth, then OAuth clients, and register a new client.
3. Choose Web server as its application type. A Web server client gets a client secret, which BuildBase needs; Lovable does not let you change the type later.
4. Turn on the scopes openid, profile and email. Lovable refuses a sign-in that asks for a scope the client was not registered with.
5. Copy the client ID and the client secret. Keep the page open for the redirect URL.

2. Add Lovable in the BuildBase console

1. In the console, open User management, then Authentication under Access, and the Methods tab.
2. Press Add auth method and choose Lovable. The dialog opens How to get your Lovable keys, the steps above.
3. Fill in the form:
   • Title: your own name for the method, shown in the console only. The button always says Lovable.
   • Client ID and Client secret: the two values from Lovable.
   • Scopes: keep openid profile email.
4. Press Create. The dialog says One step left and shows the Redirect URL. Press Copy, then Done.
5. In Lovable, add the URL to the OAuth client's redirect URIs and save.

The redirect URL has this shape:

https://api.console.buildbase.app/api/v1/auth/social/lovable/<orgId>/<methodId>/callback

It starts with your BuildBase server, https://api.console.buildbase.app on BuildBase's cloud. Copy it rather than typing it: Lovable matches it exactly against the list you registered. It never changes while the method exists.

The secret is write-only in BuildBase: when you edit the method later, its box is empty and shows only the saved secret's first and last five characters. Leave it empty to keep it.

3. Attach it to your app

1. Open the Settings tab and press Edit on Acme Analytics.
2. Under Methods, tick Lovable and press Update.

4. What people see

The hosted sign-in and register pages now have a Lovable button, with Lovable's mark beside its name.

Pressing it opens Lovable, which the first time asks the person to allow your app to use their name, picture and email address. Lovable then sends them back, and the sign-in page carries on as after any sign-in: a second step if your two-step policy asks social sign-ins for one, Trust this device?, and the passkey offer if your app offers passkeys.

The first sign-in

• Finding the account: by the person's Lovable user ID first, then by their email address when Lovable says it is verified, then as a new account if sign-up is open to them and your plan has room. See who can sign up.
• A verified address is one Lovable marks email_verified: true on the signed ID token. It connects Lovable to an account the person made another way, and gives a new account a verified address, so no code is emailed. An address Lovable does not mark verified never signs into an account that already exists.
• The name on a new account is the one on their Lovable account.

BuildBase checks the ID token's signature against Lovable's published keys, that it was issued by Lovable for your client ID, and that it answers this sign-in (its nonce), before it reads anything from it.

In your app

Nothing changes in your code. People connect and remove Lovable on the SDK's Security screen: see Account security screens.

import { useSaaSAuth } from '@buildbase/sdk/react';

export function SecurityButton() {
  const { openWorkspaceSettings } = useSaaSAuth();
  return (
    <button onClick={() => openWorkspaceSettings('security')}>Security</button>
  );
}

Check it works

• The Lovable client is a Web server client with openid, profile and email.
• The redirect URL is in the client's redirect URIs, exactly as the console shows it.
• Lovable is ticked on your app, and Open the live page shows the button.
• Signing in with a Lovable account creates a user, and signing in again reaches the same one.

Things to watch out for

• Register a Web server client. A Single-page app client has no secret, and Lovable does not let you change a client's type once it is registered: register a new one.
• Only a workspace owner or admin can register the client. Ask one to do it, and keep the client in a workspace your team will keep.
• The redirect URL must match exactly. Lovable compares it letter for letter with the registered list, and accepts only https:// addresses, apart from http://localhost while you test.
• PKCE is always on. Lovable requires it of every client, and BuildBase sends it on every sign-in, so there is nothing to turn on.
• Finish at Lovable within 10 minutes. A sign-in left open on Lovable's page for more than 10 minutes cannot finish: BuildBase sends the browser to your sign-in page, with a note that the sign-in expired.

If something goes wrong

Next steps

• Social providers - the reference for every provider.
• Vercel - the same steps for Sign in with Vercel.
• Account security screens - connected accounts inside your app.
• Set up sign-in, step by step - every sign-in guide, and the order to set them up in.