xero-node | Xero Node SDK for OAuth | REST library

So the error is because the Xero client has not yet been properly initialized.

https://github.com/XeroAPI/xero-node/blob/master/src/XeroClient.ts#L99

As you can see on the code below (linked above) the callbackParams function is a method on the openIdClient ( an oauth2.0 library ) - in order to fully setup they client you will need to call either xero.initialize() or xero.buildConsentUrl() It also looks like you should be passing back the req.url, though the req.body might still work..

Unfortunately, SPAs are not compatible with the Xero API.

You'll need a web server to manage your local session (OAuth flow, storage of Xero API tokens), and for your interactions with the Xero API.

While SPAs are a tempting option (they are convenient from a deployment point of view), there are changes coming to how browsers handle cross-site cookies, which break how SPAs perform session management.

I'd suggest reading https://leastprivilege.com/2020/03/31/spas-are-dead/ for more information and a discussion of the implications. The authors of the article created OIDC Client JS which is a great library for doing PKCE-based SPA auth in the browser, though it's only useful for same-domain applications now thanks to the impending browser cookie changes.

Further to this, the Xero API does not support CORS, so even once you complete the OAuth flow, the browser would be prevented from performing API requests from your Angular SPA.

To answer the specific questions:

1) The user will need to log in to Xero and grant consent for your app the first time they use your application. If you're storing server-side refresh tokens after the initial consent, your user will only need to log in to your local session, either via Xero SSO or another mechanism (user/password).

2) To create the initial Authorisation Request, it's best to use the node.js starter app. It will manage the OAuth redirect flow for you (it uses the excellent openid-client open source package for this).

Which scopes have been added to the access token you are passing through? You can decode your token here https://jwt.io/

Also - you need to pass the ‘tenant.tenantId’ to the function. I believe the tenant.id actually relates to the connection id which is coming back from the /connections endpoint.

My hunch is that is the issue. Also curious how that’s working, as updateTenants() should have the empty function call on the end. Is that working for you?

Here is how you pass state through the OAuth flow using the xero-node SDK:

https://github.com/SerKnight/xero-node-basic-app/blob/master/index.js#L37

Example:

• first generate the consentUrl, then append your custom params.

Currently the xero-node project requires a backend to authenticate.. Is this a react SPA, or you are just setting up the API calls in the component?

Will OAuth 2.0 support desktop/mobile/single-page apps that can’t keep a client secret confidential?

At the moment, we require that your app can keep a client secret confidential. We are currently evaluating the PKCE extension to better support SPAs and mobile apps.

https://developer.xero.com/faq/oauth2/oauth-non-secret

Your Console error looks like its just the Unused vars expression.. Here is some context on what that is ( https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-unused-vars.md )

Your Secondary browser error makes me think that you are using an older version of Node.. We need to add an .npmrc that forces a supported node version - are you using an older Node VSN?