# Set up Sign in with Vercel

Put a Vercel button on your sign-in page. Create an App in your Vercel team settings, turn on openid, email and profile, and paste its keys into BuildBase.

Sign in with Vercel puts a **Vercel** button on your hosted sign-in page. The person approves your app on Vercel's consent page and comes back to your app signed in, with their name and email address. It suits apps for people who build and ship with Vercel or v0: they sign up with one click. Vercel signs people in with OpenID Connect (the standard way one site confirms who someone is for another). You create an App in your Vercel team's settings, copy its two keys into BuildBase, and give Vercel one address from BuildBase.

> **Note:**

- A Vercel account in a team where you can change the team's **Settings**.
- An app in the BuildBase console, on the **Settings** tab of **Authentication**. Here it is **Acme Analytics**.
- Room on your plan. Vercel counts toward your plan's limit of social sign-in providers.

## What goes where

| Copy this     | From                                                | Paste it into                                      |
| ------------- | --------------------------------------------------- | -------------------------------------------------- |
| Client ID     | Vercel, your App's **Manage** page                  | BuildBase, **Client ID**                           |
| Client secret | Vercel, the same page, after you press **Generate** | BuildBase, **Client secret**                       |
| Redirect URL  | BuildBase, after you press **Create**               | Vercel, **Authorization Callback URLs** on the App |

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

## 1. Create the App on Vercel

These are the steps the console shows under **How to get your Vercel keys**, from Vercel's guide to [managing Sign in with Vercel from the dashboard](https://vercel.com/docs/sign-in-with-vercel/manage-from-dashboard).

1. In Vercel, open your team's **Settings**, choose **Apps** and press **Create**. Give the App a name, such as `Acme Analytics`: it is what people see on Vercel's consent page.
2. On the App's **Permissions** page, turn on `openid`, `email` and `profile`, and save. Vercel leaves out of a sign-in any scope the App does not have.
3. On the App's **Manage** page, copy the client ID, and press **Generate** to make a client secret. Copy it. Keep the page open for the redirect URL.

## 2. Add Vercel 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 **Vercel**. The dialog opens **How to get your Vercel 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 Vercel.
   - **Client ID** and **Client secret**: the two values from Vercel.
   - **Scopes**: keep `openid profile email`.
4. Press **Create**. The dialog says **One step left** and shows the **Redirect URL**. Press **Copy**, then **Done**.
5. On the App's **Manage** page in Vercel, scroll to **Authorization Callback URLs**, paste the URL and press **Add**.

The redirect URL has this shape:

```text
https://api.console.buildbase.app/api/v1/auth/social/vercel/<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. 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 **Vercel** and press **Update**.

## 4. What people see

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

Pressing it opens Vercel, which the first time asks the person to allow your app to use their name, username, picture and email address. Vercel 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 Vercel user ID first, then by their email address when Vercel 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**: Vercel's ID token names the person but does not say whether the address is verified, so BuildBase asks Vercel's user info endpoint, which answers `email_verified`. Only an address it marks verified connects Vercel to an account the person made another way, or gives a new account a verified address. An address it does not mark verified never signs into an account that already exists.
- **The name** on a new account is the one on their Vercel account.

BuildBase checks the ID token's signature against Vercel's published keys, that it was issued by Vercel for your client ID, and that it answers this sign-in (its `nonce`), and that the user info names the same person, before it reads anything from them.

## In your app

Nothing changes in your code. People connect and remove Vercel 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 App has `openid`, `email` and `profile` on its **Permissions** page.
- [ ] The redirect URL is under **Authorization Callback URLs**, exactly as the console shows it.
- [ ] **Vercel** is ticked on your app, and **Open the live page** shows the button.
- [ ] Signing in with a Vercel account creates a user, and signing in again reaches the same one.

## Things to watch out for

- **Turn on the scopes on the App.** Vercel drops a scope the App does not have from the sign-in, so without `email` no address comes back and no account can be made.
- **Sign-In Access decides who may use it.** By default anyone with a Vercel account can sign in. Set the App's **Sign-In Access** to members of your team only if that is what you want; Vercel then refuses everyone else.
- **Rotate the secret without downtime.** Vercel keeps up to two client secrets at a time: generate a new one, paste it into BuildBase, then revoke the old one.
- **PKCE is always on.** Vercel requires it, and BuildBase sends it on every sign-in, so there is nothing to turn on.
- **Finish at Vercel within 10 minutes.** A sign-in left open on Vercel'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                                                                    |
| ----------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
| Vercel's page says the redirect URI is not allowed                                                                                  | The redirect URL is not under **Authorization Callback URLs**, or differs by a character                | Copy it again from the console and add it on the App's **Manage** page.       |
| Sign-in with that provider did not finish. Please try again.                                                                        | The person declined, Sign-In Access refused them (`access_denied`), or Vercel answered with an error    | Try again, or check the App's **Sign-In Access**.                             |
| Sign-in with that provider failed. Please try again.                                                                                | BuildBase could not finish with Vercel: most often a wrong or revoked client secret (`provider_failed`) | Generate a new secret on the App 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 Vercel did not say it is verified (`email_unverified`)                 | The person signs in as before, then connects Vercel 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 App has no `email` permission, or the scope was removed (`email_missing`)                           | Turn on `email` on the App, and clear the **Scopes** box.                     |
| 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#vercel) - the reference for every provider.
- [Lovable](/sign-in-setup/lovable) - the same steps for Sign in with Lovable.
- [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.