Connect apps to Lovable with OAuth

1. 1

   Go to your Lovable workspace settings, find 'API keys & OAuth', and then 'Login with Lovable'.

   This is where you manage connections for apps that use Lovable accounts.

2. 2

   Click 'New OAuth client' and give your app a clear name.

   This name helps users recognize your app when they are asked to grant it access.

3. 3

   Add the 'Redirect URI' (callback URL) that your app uses to receive information after a user logs in.

   Lovable sends users back to this specific address in your app after they approve access, so it must be correct.

4. 4

   Choose only the permissions (scopes) your app truly needs from the list.

   Selecting fewer permissions is more secure and helps users feel comfortable granting access. Sensitive permissions require a Business or Enterprise plan.

5. 5

   Click 'Register client' and immediately copy both the 'Client ID' and 'Client secret'.

   These are like your app's username and password for Lovable; the secret is shown only once and is crucial for your app to securely connect.

6. 6

   If your app needs sensitive permissions, request verification from Lovable by clicking 'Request approval' on the client's details page.

   This removes a warning message users see when authorizing your app, making them more likely to trust it.

Hey Lovable, I'm building an app that needs to let users log in with their Lovable accounts and manage their projects. Can you help me set up an OAuth client for it? I need to register a new client, define its name as 'Project Manager App', set the redirect URI to 'https://myapp.com/oauth/callback', and request the 'openid', 'profile', 'email', 'projects:read', 'projects:write', and 'offline' scopes. Please provide the Client ID and Client secret after registration.

OAuth client

This is your app's official registration with Lovable, defining its name, where users are sent after logging in, and what permissions it can ask for.

Client ID

A public identifier for your app, like a username, that Lovable uses to recognize it.

Client secret

A confidential password for your app that only your app and Lovable should know, used to prove your app's identity when exchanging authorization codes for access tokens.

Scopes

Specific permissions your app can request, such as 'read user profile' or 'write to projects'. Users must agree to these permissions.

Redirect URI (Callback URL)

The specific web address in your app where Lovable sends the user after they successfully log in and grant permissions.

Authorization code flow with PKCE using S256

A secure method for your app to get permission from a user. It involves a temporary code that your app exchanges for a special access token, with extra security steps (PKCE) to prevent misuse.

Access token

A temporary key your app uses to access a user's Lovable data or perform actions on their behalf, without needing their password.

Refresh token

A special token that allows your app to get new access tokens without asking the user to log in again, useful for maintaining long-term access.

• Losing your client secret, as it's only shown once and is critical for your app's security.
• Not configuring your app to use the authorization code flow with PKCE using S256, which is required for security.
• Requesting more permissions (scopes) than your app actually needs, which can deter users and complicate verification.
• Forgetting to include the 'offline' scope if your app needs to maintain access after the initial login without the user re-authenticating.
• Not having the owner or admin role in the workspace, which prevents you from managing OAuth clients.
• Not having a Business or Enterprise plan if your app requires sensitive scopes like 'projects:write' or 'workspaces:write'.