Adding Sign in with Xero to Auth0

How to integrate Xero identity to your Auth0 login, step by step.

In this day and age, no developer should need to reinvent the wheel and build a login system from scratch. “Never build auth again” is the motto of Auth0, they provide reliable and secure out-of-box tools to build or integrate authentication and user management. If you are already using Auth0, I have good news for you. Sign in with Xero (or Xero single sign on) can work seamlessly with Auth0!

This article provides a step by step guide on how to accomplish this integration by using the Auth0 social login connection in a Python flask application.

Prerequisites

In order to follow along and have a working example, you must have:

• Python 3.5+ & Pip installed (follow instructions here)
• An Auth0 account created (click here to signup)
• An Xero OAuth 2.0 app created (follow step 1 of the guide here)

I am using the following versions:

Python 3.9.0
Pip 20.3.1

The Sample app

The sample app is a demo application provided in the Auth0 quick start guide for Python. It redirects users to Auth0 login which allows an option called “Sign in with Xero”. The user can use their Xero credential to sign in.

Step by step guide

Step 1: Create an Auth0 application

In your Auth0 dashboard, navigate to the Application section and click on “+ CREATE APPLICATION”.

Selected the Regular Web Application and created the app.

In Settings of the Auth0 application, note the following.

• Domain
• Client ID
• Client Secret

You will need these to configure your authlib SDK with them.

In the Allowed Callback URLs and Allowed Logout URLs, fill in http://localhost:5000/callback and http//localhost:5000/ respectively.

Now save and you are all set with an Auth0 application.

Step 2: Create a custom social connection for Xero identity on Auth0

So you have the Auth0 app created, but it will only use email and password login. To enable sign in with Xero, you will need to go to the Connections -> Social and click on “+ CREATE CONNECTION”.

Scroll to the bottom and click on Create Custom to manually configure Xero identity.

Fill in the connection details as the following:

• Connection Name — Xero
• Authorization URL — https://login.xero.com/identity/connect/authorize
• Token URL — https://identity.xero.com/connect/token
• Scope — openid email profile
• Client ID — your Xero OAuth 2.0 app Client ID
• Client Secret — your Xero OAuth 2.0 app Client Secret

In Fetch User Profile Script, you will need to populate the following script so that the Xero id_token (JWT) attributes are mapped to the Auth0 user profile.

Complete code snippet:

Click on CREATE. Then go to the Applications tab, make sure your Auth0 app is enabled.

You are all set for Auth0 configurations.

Step 3: Update redirect uri in Xero developer portal

In OAuth 2.0 flow, if the redirect uri sent on initial request is not the same one you use later, it will cause an error. We must update the Xero app redirect uri to point to Auth0 so Auth0 can intercept the callback and exchange the id_token for us.

Head to developer.xero.com/myapp. Under your OAuth 2.0 application fill in the following as your redirect uri:

 https:// {your_auth0_domain} /login/callback

Notice that you will need to use your Auth0 application domain + “/login/callback”.

Step 4: Start a new Auth0 quick start Python app

First, in the project folder, create a requirements.txt file with dependencies declared.

flask
python-dotenv
requests
authlib
six

Then create the virtual environment by:

 $ python3 -m venv venv

Go to the virtual environment by:

$ source venv/bin/activate

Use pip to install all of the dependencies:

$ python3 -m pip install -r requirements.txt

Create a new file called server.py to host the main code block, declare the dependencies and create an auth0 variable with the client credential configuration and the urls.

Add a require_auth function and create a root “/” route handler.

You will also need to add a “/callback” handler to complete the OAuth 2.0 flow:

/login should direct people to the auth0 login screen with redirect_uri set to http://localhost:5000/callback. /Dashboard will render the dashboard.html template. /logout will clear the Auth0 session and send the user to the home template.

The templates allow us to display the front-end of the application. The dashboard.html sits in the “templates” directory under root. It renders a simple HTML page with {{userinfo[‘name’]}} and {{userinfo_pretty}} binding with the flask session variables. The logout button will call /logout method.

Take it for a spin

Fire up the application:

$ python3 server.py

Using the python3 to run server.py, the application should be listening on https://localhost:5000. One click on “login” should take you to the Auth0 hosted login screen. Along with the email sign in, an option called “Sign in with Xero” should also be available. This will lead you straight to Xero login if you haven’t already, get the user details from Xero login and create a profile in Auth0. Now the user is recognised as both Auth0 and Xero user.

At the end of the sign up/sign in process, the user will be taken to the dashboard where we display the user information to show the authentication occurred successfully.

Upon clicking logout, the user should be signed out from Auth0 sessions and leave the Xero login session on.

Summary

Integrating sign in with Xero to Auth0 is looking very easy with the help of Auth0 custom social sign in. I hope this article helps you to save your precious development time so you can focus on building beautiful integrations for Xero users.

Over 2 million businesses use Xero for accounting. Partner with us and join the 70k+ users of our developer platform to build awesome integration and apps for the Xero ecosystem.