A better way to implement Oauth2 using Auth0

I have been researching the best way to incorporate multiple Oauth2 authentications into a single-page application. So in my application, I want to offer a choice of how a user is able to authenticate, and not be restricted into just one method, for example, Google-Gmail.

The Node community has this issue covered very well by using the excellent Grant-Npm package and is actively supported by the author, Simov (his Github name).

However, the PHP community is not so fortunate. There is [was?] a project by ThePhpLeague to address this very issue, but the modules do not seem to be maintained anymore. And I was never able to get the FaceBook option successfully working.

Perhaps a better approach would be to get a free account at https://Auth0.com and let Auth0.com maintain everything. It turns out to be extraordinarily easy to get this working successfully. There are other for-profit groups doing something similar, but Auth0.com may be the best option because the examples are so unbelievably short, and easy to implement.

To demonstrate this, you will need the following:

An SSL enabled server that runs PHP (If I get enough requests, I will blog of an easy way to create a temporary SSL server)
A domain name that points to the SSL server
An account with https://Auth0.com

I always like to start out with creating a one-line script:


&lt;?php phpinfo();

and perhaps name it something special like “phpinfo.php”, then open the page using the https:// option and confirm PHP and your webserver is working correctly, and optionally verify your certifications using https://ssllabs.com/ssltest/analyze.html.

First, use composer to install the dependencies:

composer require auth0/auth0-php:"~5.0"

This is the entire program you will need to enter into your server:


session_start();

require 'vendor/autoload.php';

use Auth0\SDK\Auth0;



$auth0 = new Auth0([

  'domain' =&gt; 'dev-y-YOUR-AUTH-DOMAIN-PREFIX.auth0.com',

  'client_id' =&gt; 'YOUR-CLIENT-ID',

  'client_secret' =&gt; 'YOUR-CLIENT-SECRET',

  'redirect_uri' =&gt; 'https://YOUR-DOMAIN-NAME/index.php',

  'scope' =&gt; 'openid profile email name nickname picture',

]);



$userInfo = $auth0-&gt;getUser();



if (!$userInfo) {

        $auth0-&gt;login();

} else {

        var_dump($userInfo);

}

Editors Note: the ‘scope’ key/value is not currently documented in most of the PHP examples. Indeed, it was actually missing from most of them. This is not required for logging into Auth0 and Gmail, but it is critical for most of the other authentication methods. A special thanks to Thomas Osborn of Auth0.com for determining this solution for me. Hopefully, this issue will be addressed soon.

You are probably asking the same question I did: “That’s too easy! Where is the rest of it”? Nope, that’s all you need on the PHP server end. All you need is the following three values from Auth0.com:

Domain
Client Id
Client Secret

and replace the ‘redirect_uri’ in your app with whatever the name of your script is. This same value is also to be used in your apps “Allowed Callback URLs” and must match whatever you specified in your “redirect_uri’ value.

And that’s it! You are finished. Six lines of actual code containing logic (with less than 100 characters) that will demonstrate PHP oauth2 login!

Side-note: the results of this short script are NOT intended to be pretty, but rather just a quick demonstration. But if you insist on “pretty results”, just do a right-click “inspect-element” and view the results in your console window. Here are my results:

array(11) { ["sub"]=> string(35) "google-oauth2|1141234347134" ["given_name"]=> string(4) "Mark" ["family_name"]=> string(7) "Edwards" ["nickname"]=> string(4) "mark" ["name"]=> string(12) "Mark Edwards" ["picture"]=> string(83) "https://lh3.googleusercontent.com/a-/AAuE7mAXXX" ["gender"]=> string(5) "other" ["locale"]=> string(2) "en" ["updated_at"]=> string(24) "2019-11-08T17:46:15.548Z" ["email"]=> string(20) "[email protected]" ["email_verified"]=> bool(true) }

Note that for brevity’s sake, I have omitted a logout option. It is recommended that you only run this example in Chrome’s incognito mode for testing. Otherwise, you will either need to flush your cache to test alternative login methods or include an actual logout method, which is very well documented in the Auth0.com app ‘Quick Start’ section under PHP. Strangely enough, opening the chrome-console page and doing “Empty cache and Hard Reload” does not log you out. You could just do a complete cache-flush, but that can be very inconvenient if you have multiple tabs open. Its easier to just run the example in a chrome incognito window, at least during your testing phase.

This would be a very short article if we left it at that, but let’s add in a couple more authentication methods. Certainly, we could require our user to create an account with Auth0.com, but probably all of your users already have an existing Gmail, Facebook, GitHub, and some for whatever reason (sentimentality?) still cling to MSN. At the time of this writing, I was unable to get Yahoo working. Thank you, Marissa Mayer.

Now comes the most important section, how to add multiple ways to authenticate rather than be locked into just one. The instructions for every Oauth2 source is pretty much the same:

Go to Connections–>Social and slide the green slider to the right to enable
Click on the Oauth2 authority you wish to use, example “Google”
Go to the developer website (example: https://console.developers.google.com/apis/credentials) and create an app.
Enter the URI callback value using your domain from your settings; example: https://dev-x-aaaa.auth0.com/login/callback
Cut/paste your new Client-Id into the Auth0 Settings Client Id field
Cut/paste your new Client-secret into the Auth0 Client-Secret field
Click “Save” at the bottom of the page
Optional – Click “Try” above the green slider to ensure all your settings are correct

Here are the images of what you will see when you log into your Auth0.com account:

Here are the images of what you will see when authorizing an Oauth2 Google login:

The procedure is very similar if not identical to most of the other common Oauth2 methods. I have tried Facebook, MSN, and GitHub as well with great results.