SSO V1 Implementation Using WordPress & Cloudflare Access (ZTNA)

Introduction 

THIS IS NOT A TUTORIAL, NO DETAILED STEPS WILL BE GIVEN

Single sign-on is an authentication scheme that allows a user to log in with a single ID and password to any of several related, yet independent, software systems. True single sign-on allows the user to log in once and access services without re-entering authentication factors.

-Wikipedia

As we can see above, the underlying concept of SSO is to login once, and they will have access to all apps under the organization. 

Single Sign-On (SSO) is an efficient authentication method that allows users to log in to multiple applications using a single set of credentials. In this post, we’ll explore how I implemented SSO using WordPress and Cloudflare Access for two systems – HOD portal and TMS.

Please ignore what HOD portal or TMS means, and what they do as it is not relevant to understanding this post.

SSO Implementation & Flow

To start, I selected several login plugins for WordPress as thr SSO provider. This plugin offers support for multiple identity providers, including Google and Auth0, and it’s free to use. With this plugin installed on the WordPress site, I configured it to allow users to log in using Google or Auth0. This involved creating an application on the Google Developer Console and configuring the Auth0 at their portal. This is done by setting up the Client ID Client secret, the authorization_endpoint URL, token_endpoint and the jwks_uri endpoint of the SSO to allow the SSO keys to sign the tokens

Next, I configured the HOD portal and TMS systems to recognize the plugin as an SSO provider. This involved setting up a trust relationship between the two systems and configuring them to accept SSO tokens generated by the plugin. 

With the SSO infrastructure in place, I set up the login flow for users. If a user tried to access any of the systems directly by entering the URL in a browser and was not logged in, they were redirected to the SSO page. On the SSO page, the user was prompted to log in using Google or Auth0. I used a Bootstrap-based popup for this prompt, customized with code to ensure it met the specific design requirements.

Cloudflare Access

I also implemented Cloudflare Access, which uses SAML to connect with the SSO. When a user attempts to access either system’s URL, Cloudflare Access checks if the user is logged in via SSO. If the user is not logged in, they are automatically redirected to the SSO page to log in. When the user is logged in, Cloudflare Access checks whether the user’s identity matches the policy set for the system. If the identity matches, the user is granted access.

SSO Visual

To make the login process even smoother, I customized the code so that the login process was triggered by clicking on a button, rather than using the login button provided by the plugin. The button provided by the plugin has different design for Google and Auth0, and this makes it look ugly. Custom code button allowed me to create a more visually appealing and streamlined login process. I had a look at the source code how the login will trigger, created an HTML button with an “onclick” event to trigger the login just like the normal login button by the plugin.

Once the SSO infrastructure was in place, I developed a custom plugin that welcomed users to the system with a message such as “Hi there, akmalhakim,” displaying the user’s username. Although there are other plugins that can do this, this custom plugin’s code was designed to be lightweight and responsive to ensure the SSO system’s smooth functioning. The plugin only has few lines of code.

Login Trigger

The HOD portal system is connected to the SSO via SAML. However, I encountered an issue where the HOD portal could not log in automatically when accessed via SSO. I addressed this issue by implementing an “onload” custom code that triggers SAML login when the user lands on the HOD portal homepage. Once authenticated, the user can access the portal without having to click on anything.

As I used an older version of database for the TMS, it could not support SAML authentication (InnoDB). As a result, the TMS system could only be connected via OAuth. When a user accesses the TMS system, they can log in by clicking on the “login using SSO” button. The system then connects to SSO in the background to get the access. This approach streamlines the login process for users, requiring only one click to access the system.

It is to be reminded that users cannot access both system if they are not logged in at SSO first, as they will be checked using Cloudflare Access.