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!
No comments:
Post a Comment