Angular 1.x Passwordless

Sample Project

Download this sample project configured with your Auth0 API Keys.

Passwordless Authentication

Passwordless connections in Auth0 allow users to log in without the need to remember a password.

Without passwords, your application will not need to implement a password-reset procedure and users avoid the insecure practice of using the same password for many different applications.

Configuration

Start by enabling a passwordless authentication connection in your Auth0 dashboard by navigating to Connections > Passwordless.

Update References

Install and reference the necessary libraries.

bower install angular-lock-passwordless
<!-- index.html -->

<!-- Auth0 Lock-passwordless -->
<script type="text/javascript" src="bower_components/auth0-lock-passwordless/build/lock-passwordless.js"></script>
<!-- lock-passwordless-angular -->
<script type="text/javascript" src="bower_components/angular-lock-passwordless/dist/angular-lock-passwordless.js"></script>
<!-- angular-jwt -->
<script type="text/javascript" src="bower_components/angular-jwt/dist/angular-jwt.js"></script>

Add the Module Dependencies and Configure the Service

// app.js

(function () {

  'use strict';

  angular
    .module('app', ['auth0.lockPasswordless', 'angular-jwt', 'ui.router'])
    .config(config);

  function config($stateProvider, lockPasswordlessProvider) {

    $stateProvider
      .state('home', {
        url: '/home',
        controller: 'HomeController',
        templateUrl: 'components/home/home.html',
        controllerAs: 'vm'
      })
      .state('login', {
        url: '/login',
        controller: 'LoginController',
        templateUrl: 'components/login/login.html',
        controllerAs: 'vm'
      });

    lockPasswordlessProvider.init({
      clientID: 'YOUR_CLIENT_ID',
      domain: 'YOUR_AUTH0_DOMAIN'
    });
  }

})();

Implement the login Method

// components/auth/auth.service.js

(function () {

  'use strict';

  angular
    .module('app')
    .service('authService', authService);

  function authService(lockPasswordless, authManager, $q, $state) {

    function login() {
      lockPasswordless.emailcode(function(error, profile, id_token) {
        if (error) {
          alert("Error: " + error);
          return;
        }
        localStorage.setItem('id_token', id_token);
        authManager.authenticate();
        localStorage.setItem('profile', JSON.stringify(profile));

        deferredProfile.resolve(profile);
        $state.go('home');
        lockPasswordless.close();
      });
    }

    return {
      login: login
    }
  }

})();
Previous Tutorial
12. Single Sign-On
Use Auth0 for FREECreate free Account