# Set up Sign in with Lovable

Put a Lovable button on your sign-in page. Register a Web server OAuth client in your Lovable workspace and paste its client ID and secret into BuildBase.

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.

> **Note:**

- A Lovable account that is an **owner or admin** of a Lovable workspace. Only they can register an OAuth client.
- An app in the BuildBase console, on the **Settings** tab of **Authentication**. Here it is **Acme Analytics**.
- Room on your plan. Lovable counts toward your plan's limit of social sign-in providers.

## What goes where

| Copy this     | From                                                                     | Paste it into                                 |
| ------------- | ------------------------------------------------------------------------ | --------------------------------------------- |
| Client ID     | Lovable, **Workspace settings**, **API keys & OAuth**, **OAuth clients** | BuildBase, **Client ID**                      |
| Client secret | Lovable, shown when you register a **Web server** client                 | BuildBase, **Client secret**                  |
| Redirect URL  | BuildBase, after you press **Create**                                    | Lovable, the OAuth client's **redirect URIs** |

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](https://docs.lovable.dev/integrations/sign-in-with-lovable).

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:

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

It starts with your BuildBase server, [https://api.console.buildbase.app](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](/sign-in-setup/two-step) 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](/sign-in-setup/sign-up-access).
- **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](/sign-in-setup/account-security-screens).

```tsx
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

| What you see                                                                                                                        | Why                                                                                                    | What to do                                                                     |
| ----------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ |
| Lovable's page says the redirect URI is not registered                                                                              | The redirect URL is not in the client's redirect URIs, or differs by a character                       | Copy it again from the console and add it to the client in Lovable.            |
| Sign-in with that provider did not finish. Please try again.                                                                        | The person declined at Lovable (`access_denied`), or Lovable answered with an error (`provider_error`) | Try again.                                                                     |
| Sign-in with that provider failed. Please try again.                                                                                | BuildBase could not finish with Lovable: most often a wrong client secret (`provider_failed`)          | Copy the client secret again and paste it in.                                  |
| This email is already registered. Sign in the way you did before, then connect this provider from your account's security settings. | An account has this address, and Lovable did not say it is verified (`email_unverified`)               | The person signs in as before, then connects Lovable from the Security screen. |
| This provider did not share an email address, so an account cannot be created. Allow access to your email address and try again.    | The `email` scope was removed (`email_missing`)                                                        | Clear the **Scopes** box to go back to the defaults.                           |
| This app is not taking new sign-ups right now.                                                                                      | Your plan's end-user limit is reached (`signup_unavailable`)                                           | Upgrade, or remove users you no longer need.                                   |
| In the console: Your plan includes 2 social sign-in providers. Upgrade for more, or remove one.                                     | Your plan's social provider limit is reached; the number is your plan's                                | Upgrade, or delete a provider you no longer use.                               |

## Next steps

- [Social providers](/authentication/social-providers#lovable) - the reference for every provider.
- [Vercel](/sign-in-setup/vercel) - the same steps for Sign in with Vercel.
- [Account security screens](/sign-in-setup/account-security-screens) - connected accounts inside your app.
- [Set up sign-in, step by step](/sign-in-setup/overview) - every sign-in guide, and the order to set them up in.