Hi Folks,

Do you want to know how to create Native iOS Mobile Apps that help Xero API integration service directly using OAuth 2.0 PKCE?

You are on the right page.

This article shares solutions on PKCE integration implementation with native iOS apps which are coded in SWIFT. I have shared code samples and examples too.

Hope you will enjoy it. If you know the basics of Xero and PKCE then you can skip the first part of the article.

What is Xero ?

Xero is the most popular accounting software for small and medium size businesses across Australia, Newzealand, Uk and some parts of the US too.

What is PKCE?

Proof Key for Code Exchange (abbreviated PKCE, pronounced “pixie”) is an extension to the authorization code flow to prevent CSRF and authorization code injection attacks. The technique involves the client first creating a secret on each authorization request, and then using that secret again when exchanging the authorization code for an access token. This way if the code is intercepted, it will not be useful since the token request relies on the initial secret. ( Ref: https://www.oauth.com/oauth2-servers/pkce/ )

Why do I need to use PKCE flow for iOS app integration with Xero?

According to oAuth official website. PKCE was originally designed to protect the authorization code flow in mobile apps, and was later recommended to be used by single-page apps as well. In later years, it was recognized that its ability to prevent authorization code injection makes it useful for every type of OAuth client, even apps running on a web server that use a client secret. Because of its history in the use of mobile apps and single-page apps, it is sometimes incorrectly thought that PKCE is an alternative to a client secret. However PKCE is not a replacement for a client secret, and PKCE is recommended even if a client is using a client secret, since apps with a client secret are still susceptible to authorization code injection attacks.

Problem:

I wanted to do the XERO OAuth 2.0 integration flow applied in the Native iOS app. So I went over to Xero’s official SDK documentation page and followed the instructions. This was my first integration as an iOS developer with Xero API.

I got stuck in one specific problem, where in the Xero Developer portal, within the Redirect URI field I was asked to provide a redirect parameter. Which I don’t know how a Xero API will redirect users to an iOS app. So I sent an email to the Xero team and I got this reply.

Reply from Xero team

Hi Hardik

Mobile clients should use Claimed HTTPS Scheme URI Redirection to register https redirect URIs. This is supported on both Android and iOS.

Kind regards.

After reading an article given by the Xero support team I tried to enter the Claimed HTTPS Scheme URI in App.

Below is a screenshot of the error when I set Redirect URI.

So the above error became a key problem and blockage for me. I don’t know What’s the correct redirect url of Xero PKCE integration? How to redirect back in the app after xero login?

Solution:

How to integrate XERO in ios APP

1. Follow xero developer document for OAuth flow.The Proof Key for Code Exchange (PKCE) flow | Xero Developer
2. Create a developer account on Xero. After that create an app on xero developer account.
3. Set the redirect url in the application created on xero. In iOS, we use redirect urls such as: “xeroIntegration://xerointegration.satva.solutions”. But in xero, this type of redirect url can’t be accepted.
4. I have changed the redirect url in ios app code which was set in xero application but that still gives the error code 500 (Invalid Redirect URL).

   App Search Programming Guide: Support Universal Links

5. I tried another solution using the above link. Create a universal redirect url for the ios application. And also set Apple-App-Site-Association on the redirect url of the web page but I can’t get back to the app.
6. After that, We found the redirect url solution in the ios application. First we set the URL schema to “xeroIntegration” and create a redirect url like “xeroIntegration://xerointegration.satva.solutions”. In the app side, we have set the redirect url in the official API just like the app developed in the xero account.
7. I talked with one of the expert Xero Developers in my team and we figured out a solution which solves this problem.
8. It is mandatory requirement that a redirect URI has to be an HTTPS URL. so a web developer helped me create a static secure HTTP site which is just a simple html page as below.
   Web Page URL: https://xerointegration.satva.solutions/
   Page Source Code Screenshot:

   Using below javascript code, We are redirect to app.

   Javascript Sample Code:

   let result = window.location.href.replace(“https”, “xeroIntegration”);
window.location.href=result;


9. Please observe a javascript written in a webpage which ensures that before the redirect HTTPS parameter is replaced by iOS URL Schema( in my case it’s xeroIntegration). So the URL which iOS will open in safari browser would look something like below:xeroIntegration://xerointegration.satva.solutions?code=sjdjksdhnksdfh
10. After that, we set the JavaScript code in the redirect url webpage. It will redirect to the application with parameter “code”.
    Code which you write for authenticate by xero login:
11. Once We got “code” parameter from Xero and using “code” parameter, we will get the access token of the Xero account. Code which you write for access token:

Download source code

For reference, You can download the complete Xcode Project at Github.

Still need more hand holding in making Xero app ?

Your 1 hour of consulting is on us! Get Xero App Consulting now