Secure, Passwordless Authentication Using Auth0

In this article, you'll learn how to set up passwordless authentication using the Auth0 service. Auth0 allows you to outsource authentication features for your app.

What Is Auth0?

Auth0 is an authentication-as-a-service tool that makes implementation of authentication-related features for your app or site a breeze. If you've built an app and you want to just outsource the authentication and authorization features, a service like Auth0 is something you should consider.

Let me quickly summarize what Auth0 has to offer:

  • single sign-on
  • multi-factor authentication
  • passwordless logins
  • user management
  • and much more!

Initial Setup

In this section, we'll go through the initial setup in preparation for setting up the passwordless authentication.

Before moving ahead, make sure to install Composer as that will be used to install actual Auth0 SDKs using the composer.json file. Also, if you want to follow along with the examples in this article, go ahead and get yourself a free account with Auth0.

Let's start by grabbing a clone of the sample project.

git clone https://github.com/auth0-samples/auth0-php-web-app.git .

Install Dependencies

Go ahead the run the composer install command to install the dependencies.

cd 00-Starter-Seed
composer install

According to the composer.json file, you should have installed the vlucas/phpdotenv and auth0/auth0-php packages.

{
    "name": "auth0/basic-webapp-sample",
    "description": "Basic sample for securing a WebApp with Auth0",
    "require": {
         "vlucas/phpdotenv": "2.4.0",
         "auth0/auth0-php": "~5.0"
    },
    "license": "MIT",
    "authors": [
        {
            "name": "Martin Gontovnikas",
            "email": "martin@gon.to"
        },
        {
            "name": "Germán Lena",
            "email": "german.lena@gmail.com"
        }
    ]
}

The vlucas/phpdotenv library is used to initialize environment variables from the .env file. Thus, it allows you to separate configuration from the code that changes between environments.

On the other hand, the auth0/auth0-php package is the one which will help us set up authorization in our app.

Configure the Environment Variables

Next, let's set up the configuration for our app in the .env file. Go ahead and create the .env file by copying it from the .env.example file.

cp .env.example .env

It contains configuration values which will be used by the Auth0 library.

AUTH0_CLIENT_ID={CLIENT_ID}
AUTH0_DOMAIN={DOMAIN_NAME}
AUTH0_CLIENT_SECRET={CLIENT_SECRET}
AUTH0_CALLBACK_URL={CALLBACK_URL}
AUTH0_AUDIENCE=

You should be able to find most of the settings under Applications > Default App > Settings on the Auth0 dashboard. Please note that I'm using the default application created by the system. Of course, you could go ahead and create a new application if you want to do so.

The AUTH0_CALLBACK_URL is the URL of your app where Auth0 will redirect users after login and logout. The value that you set in this field must be configured under Allowed Callback URLs in the application settings on the Auth0 dashboard.

Passwordless Login Using Email

To enable passwordless login using email, go to Connections > Passwordless on the Auth0 dashboard and enable the Email option.

In most cases, the default configuration settings under Email just work out of the box. Of course, if you want to change any settings, go ahead and do that. Don't forget to enable the apps for which you want passwordless authentication at Connections > Passwordless > Email > Applications.

With the initial setup in place, we can go ahead and create a file which implements the passwordless login using email.

Implement Passwordless Login

Go ahead and create the email_auth_example.php file with the following contents.

<?php
  // Require composer autoloader
  require __DIR__ . '/vendor/autoload.php';

  require __DIR__ . '/dotenv-loader.php';

  use Auth0\SDK\Auth0;

  $domain        = getenv('AUTH0_DOMAIN');
  $client_id     = getenv('AUTH0_CLIENT_ID');
  $client_secret = getenv('AUTH0_CLIENT_SECRET');
  $redirect_uri  = getenv('AUTH0_CALLBACK_URL');
  $audience      = getenv('AUTH0_AUDIENCE');

  if($audience == ''){
    $audience = 'https://' . $domain . '/userinfo';
  }

  $auth0 = new Auth0([
    'domain' => $domain,
    'client_id' => $client_id,
    'client_secret' => $client_secret,
    'redirect_uri' => $redirect_uri,
    'audience' => $audience,
    'scope' => 'openid profile',
    'persist_id_token' => true,
    'persist_access_token' => true,
    'persist_refresh_token' => true,
  ]);

  $userInfo = $auth0->getUser();
?>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script>

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- font awesome from BootstrapCDN -->
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
        <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">

        <link href="public/app.css" rel="stylesheet">
    </head>
    <body class="home">
        <div class="container">
            <div class="login-page clearfix">
              <?php if(!$userInfo): ?>
                <script src="https://cdn.auth0.com/js/lock/11.6.1/lock.min.js"></script>
                <script type="text/javascript">
                  function login() {
                    var lock = new Auth0LockPasswordless('<?php echo $client_id; ?>', '<?php echo $domain; ?>', {
                      allowedConnections: ['email'],           // Should match the Email connection name, it defaults to 'email'     
                      passwordlessMethod: 'code',              // If not specified, defaults to 'code'
                      auth: {
                        redirectUrl: '<?php echo $redirect_uri; ?>',
                        responseType: 'code'
                      }
                    });

                    lock.show();
                  }
                </script>

                <a href="javascript:login()">Passwordless Login Using Email</a>
              <?php else: ?>
                <div class="logged-in-box auth0-box logged-in">
                  <h1 id="logo"><img src="//cdn.auth0.com/samples/auth0_logo_final_blue_RGB.png" /></h1>
                  <img class="avatar" src="<?php echo $userInfo['picture'] ?>"/>
                  <h2>Welcome <span class="nickname"><?php echo $userInfo['nickname'] ?></span></h2>
                  <a class="btn btn-warning btn-logout" href="/logout.php">Logout</a>
                </div>
              <?php endif ?>
            </div>
        </div>
    </body>
</html>

At the beginning, we have included auto loaders which are responsible for loading the Auth0 and environment variable related classes.

Following that, we initialize configuration variables from the .env file using the getenv function.

Next, we have called the getUser method on the Auth0 object to check if any active session is present. Based on that, we display the SignIn link if there's no active session. Otherwise, the username of the logged-in user with the Logout link is displayed.

Go ahead and run the email_auth_example.php file to test your app!

Passwordless Login Using SMS

To enable passwordless login using SMS, go to Connections > Passwordless on the Auth0 dashboard and enable the SMS option. By default, Auth0 uses the Twilio service to send messages. So go ahead and get yourself a Twilio account.

From the Twilio dashboard, get your ACCOUNT SID and AUTH TOKEN and enter those values in the Twilio SID and Twilio AuthToken fields at Connections > Passwordless > SMS > Settings on the Auth0 dashboard.

Also, you need to create a new messaging service at SMS > Messaging Services on your Twilio dashboard. After successful creation of the service, you'll get the Service ID, and that's what you will need to enter in the Copilot SID field at Connections > Passwordless > SMS > Settings.

Finally, let's take a peek at how passwordless login using SMS works. Create the sms_auth_example.php file. The contents are the same as email_auth_example.php, except the login() function, which is as follows.

  function login() {
    var lock = new Auth0LockPasswordless('<?php echo $client_id; ?>', '<?php echo $domain; ?>', {
      allowedConnections: ['sms'],             // Should match the SMS connection name  
        auth: {
          redirectUrl: '<?php echo $redirect_uri; ?>',
          responseType: 'code'
        }
      });
    lock.show();
  };

Everything is pretty much the same, except that we have provided sms instead of email in the allowedConnections property.

Go ahead and run the sms_auth_example.php file to test your app!

Conclusion

Today, we looked at passwordless login with the Auth0 service. Among the possible methods available, we implemented the email and SMS methods with code examples.

Feel free to leave any thoughts or questions using the feed below!



from Envato Tuts+ Tutorials

Comments

Post a Comment

Popular posts from this blog

How to Build Self-Confidence: 10+ Steps to Improve Your Self-Esteem

Image
Do you have friends who can walk up to someone at a party and they’d instantly hit it off? These are the people who often get free drinks, invites to cool events, and make new friends whenever they go out. You can gain confidence in yourself and improve different aspects of your life. (Image source:  Envato Elements ) Meanwhile, there are people who feel anxious in almost every social encounter. Their first day on a job, a big company meeting, and even a housewarming party all make them feel vulnerable and unsure of themselves. Questions like the following often spring to mind during these events:  “ What will I say? ”  “Who do I talk to?” “ What will I do if there’s an awkward silence? ”  While social awkwardness is common, it’s not a lifetime thing. You can learn how to build self-confidence that doesn’t feel forced or unnatural. You can still be yourself and have the self-confidence to try new things, meet new people, and all the benefits that come with...
Read more

Best of 2020: Great Landing Pages for Design Inspiration (Showcase Examples)

Image
A great landing page design is crucial when it comes to announcing new products or services as well as the launch of your company. Great landing pages help visitors focus on a singular action. That makes them great for driving conversions and signups. Zimed is one of our best landing page design examples on Envato Elements. Nowadays, you don’t have to be a web design expert to create a landing page. There's no shortage of  quality landing page samples on various marketplaces so all you need to do is find the one you like, buy it, and set it up. That's why we've set up this landing page showcase. In today's post, we'll share our best landing page examples from Envato Elements and ThemeForest. Find Great Landing Page Design Examples on Envato Elements for 2020 Envato Elements is a great starting point when it comes to the best  landing page design . Envato Elements is a subscription-based marketplace with dozens of landing page templates. When you start bro...
Read more

18+ Best Free PowerPoint Puzzle Pieces Templates (Infographic PPT Slides)

Image
Many people are visual learners. The population of visual learners is why it helps to use visual infographics to explain an idea in your PowerPoint presentation.  One of the best examples is using a PowerPoint puzzle pieces template.  Each piece of the puzzle can fit together into a singular idea. Templates like the premium  PANDAWA  template have all the PowerPoint puzzle pieces you need to explain a complex idea. Using a PowerPoint puzzle pieces will help you explain concepts more clearly. You can quickly and easily change professionally designed PowerPoint puzzles to fit your needs. This round-up will show you some of the best free PowerPoint puzzle templates. You'll also see top PowerPoint puzzle pieces templates from Envato Elements, and more puzzle pieces templates from GraphicRiver. Download the Best PowerPoint Puzzle Templates From Envato Elements Later in this tutorial, you'll see free template options. But for now, let's focus on the bes...
Read more