How to use oAuth or SAML with Hub Authentication

July 24, 2015 Yoav Schwartz

The objective of this article is to illustrate how the Hub Option > Hub Authentication (which allows you to easily protect your Hub with a password) can be converted into any other authentication pattern of your choice: such as oAuth or SAML.

Here is the basic premise:

  1. using custom code (namely CSS and HTML because that's all that can be exposed to the login screen), insert a button to your authentication page and hide the login form.
  2. on your own authentication page/script, upon successful login by your user, grab a one-time token for this Hub using the API method AuthenticateHubUser.
  3. redirect your authenticated user back to the Hub with the token appended as a query string.

Let's dive into the details:

1. In the Custom Code > HTML section, add the following

<div class="oauth">
     <a class="btn" href="">Login with oAuth</a>

You can style this however you like (note: Hubs has Bootstrap 2.0 classes/glyphs available)

Because we only want this button to show on the login page, and because we don't want the password/submit form to display, add the following in the Custom Code > CSS section

/* hide the auth button container by default */

/* show the auth button container only when on the login page */
body.hub-login div.oauth{display:block;}

/* hide the default login form */
body.hub-login .login-form{display:none}

The final step is to make sure you enable Authentication and  Custom HTML and CSS on your Login page from the Hub Authentication settings page. You should avoid adding any passwords for this scenario since the user will never see the login form anyway.

This will convert your login screen from something like 

Again, the styling is totally up to you. The example is more built out than the code sample.

2. [insert your authentication method here]. This part's really up to you. Some examples of how you could authenticate your users include:

  • your own username/password form that's tied to your existing system/database
  • oAuth to any supported service such as Twitter or LinkedIn (i.e. your content's not confidential, you just want people to enter by connecting their social account)
  • SAML/SSO/Google Apps
  • etc.

Once you've authenticated this user, the next step is to get a one-time auth token for this Hub which will give this user access to your Hub for a single session. Once the token is used, it's removed from our database. 

As explained in our API docs you can request this token using your API credentials and your Hub's ID. 

3. The API method will return a token such as 


Simply redirect the user back to your Hub with the token appended in the query string


The wrap-up:

I hope this helps shed light on how flexible Hub Authentication can be using a little bit of dev power. If you have any questions or suggestions on how to make this feature (or this article) more useful - please let me know!



About the Author

Yoav Schwartz

Yoav's the CEO and Founder at Uberflip. When not busy driving the vision and mission behind the world's most marketer-friendly content management platform, he's busy tinkering with front-end code...

Follow on Twitter More Content by Yoav Schwartz
Previous Article
How to Natively Gate a Flipbook With An Embedded CTA
How to Natively Gate a Flipbook With An Embedded CTA

Learn how to gate a Flipbook outside a Hub, using a Hub Form CTA

Next Article
The Secret Weapon to Increase Your Front End Coding Productivity
The Secret Weapon to Increase Your Front End Coding Productivity

Naturally, developers spend a lot of time writing code. How many times have you asked yourself how to write...


Get our latest content delivered straight to your inbox!

First Name
Error - something went wrong!