Docs

Connect your app to Xero

about 20 minBuildingchecked 21h agoOfficial page

The short version

Connect your Lovable app to Xero to work with your accounting data like contacts, invoices, and financial reports. This lets you build tools for finance dashboards, invoicing, and internal operations using live Xero information.

Anyone who needs to build apps that interact with Xero accounting data needs this guide.

Do this, in order

1
Sign in to the Xero developer portal and create a new app, naming it something like 'Lovable integration'.
This creates a dedicated application within Xero that Lovable will use to securely access your data.
2
Set the redirect URI for your Xero app to 'https://api.lovable.dev/workspaces/connectors/standard/oauth/callback'.
This specific address is where Xero sends information back to Lovable after you authorize the connection, ensuring the process works correctly.
3
On your Xero app's configuration page, enable all the data permissions (scopes) you plan to use in Lovable.
Lovable can only request data that your Xero app is explicitly allowed to access, so enabling them here prevents errors during connection.
4
Copy your Xero app's Client ID and generate and copy its Client Secret.
These are like a username and password for your Xero app, needed by Lovable to identify and authenticate with Xero.
5
In Lovable, go to 'Connectors', select 'Xero', and click 'Add connection'.
This starts the process of setting up the connection within your Lovable workspace.
6
Give your connection a display name (e.g., 'Xero Prod'), then paste the Client ID and Client Secret you copied from Xero.
The display name helps you identify this connection in Lovable, and the credentials link Lovable to your specific Xero app.
7
Review and select the data permissions (scopes) you want this Lovable connection to have, making sure they match what you enabled in your Xero app.
This fine-tunes what kind of Xero data your Lovable apps can access, and consistency with your Xero app settings prevents authorization errors.
8
Decide who in your Lovable workspace can use this connection, either keeping it private or sharing it with others.
This controls access to the Xero data through this connection for other people in your team.
9
Click 'Connect', and when the Xero authorization window appears, sign in, choose the Xero organization, and authorize the app.
This is the final step where you grant Lovable permission to access your Xero data through the Xero app you created.

Paste this into your project

Use Xero and build a dashboard that shows open invoices, overdue balances, and aged receivables by customer.

Words decoded

Client ID: A unique identifier for your Xero app, like a public username.
Client Secret: A confidential key for your Xero app, like a password, used to prove its identity.
Redirect URI: A specific web address that Xero sends information back to after you've given permission for an app to access your data.
Scopes: Specific permissions that define what kind of data (like contacts or invoices) your Lovable app can read or change in Xero.

Where people get stuck

Using a Redirect URI in your Xero app that doesn't exactly match 'https://api.lovable.dev/workspaces/connectors/standard/oauth/callback' will cause an 'Invalid redirect_uri' error.
Not enabling all the required data permissions (scopes) in your Xero app that you select in Lovable will result in a 'Requested wrong apps scopes' error.
Sharing your Client Secret publicly or not storing it securely can compromise your Xero account.
Not having permission to create connections in your Lovable workspace will prevent you from setting up Xero integration.

The short version, steps, decoder and prompt on this page are written automatically from Lovable's own documentation and can lag or misread it. The official page is always the authority.