formio / formio-auth0

Example application on how to integrate Form.io with Auth0

This repository is now considered legacy and no longer supported. Please take a look at our recent repositories and help documentation at the following links.

• https://help.form.io
• https://github.com/formio/formio.js
• https://github.com/formio/formio
• https://github.com/formio/react
• https://github.com/formio/angular
• https://github.com/formio/vue

Form.io Auth0 Integration

This example shows how to add Login/SignUp to your application using the Lock widget.

You can read a quickstart for this sample Angular 1.x Quickstart.

Getting Started

To run this quickstart you can fork and clone this repo.

Be sure to set the correct values for your Auth0 application in the config.js file.

To run the application:

# Install the dependencies
bower install

# Install simple web server
npm install -g serve

# Run
serve

Important Snippets

1. Add the module dependencies and configure the service

// app.js
(function () {

  'use strict';

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

  config.$inject = ['$stateProvider', 'lockProvider', '$urlRouterProvider', 'FormioProvider'];

  function config($stateProvider, lockProvider, $urlRouterProvider, FormioProvider) {
    FormioProvider.setAppUrl(FORMIO_APP_URL);
    FormioProvider.setApiUrl(FORMIO_API_URL);
    $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'
      });

    lockProvider.init({
      clientID: AUTH0_CLIENT_ID,
      domain: AUTH0_DOMAIN
    });

    $urlRouterProvider.otherwise('/home');
  }

})();

// app.run.js
(function () {

  'use strict';

  angular
    .module('app')
    .run(run);

  run.$inject = ['$rootScope', 'authService', 'lock'];

  function run($rootScope, authService, lock) {
    // Put the authService on $rootScope so its methods
    // can be accessed from the nav bar
    $rootScope.authService = authService;

    // Register the authentication listener that is
    // set up in auth.service.js
    authService.registerAuthenticationListener();

    // Register the synchronous hash parser
    lock.interceptHash();
  }

})();

2. Implement the auth service

// components/auth/auth.service.js
(function () {

  'use strict';

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

  authService.$inject = ['lock', 'authManager', 'Formio'];

  function authService(lock, authManager, Formio) {

    function login() {
      lock.show();
    }

    // Logging out just requires removing the user's
    // id_token and profile
    function logout() {
      localStorage.removeItem('id_token');
      localStorage.removeItem('profile');
      authManager.unauthenticate();
    }

    // Set up the logic for when a user authenticates
    // This method is called from app.run.js
    function registerAuthenticationListener() {
      lock.on('authenticated', function (authResult) {
        localStorage.setItem('id_token', authResult.idToken);
        lock.getProfile(authResult.idToken, function (error, profile) {

          // Here we will set the token in the Formio provider, which will retrieve
          // the user object within Form.io
          Formio.setToken(profile.user_metadata.formio.token);
          authManager.authenticate();
        });
      });
    }

    return {
      login: login,
      logout: logout,
      registerAuthenticationListener: registerAuthenticationListener
    }
  }
})();

3. Implement the login controller

// components/login/login.controller.js
(function () {
  'use strict';

  angular
    .module('app')
    .controller('LoginController', LoginController);

  LoginController.$inject = ['authService'];

  function LoginController(authService) {

    var vm = this;
    vm.authService = authService;

  }

}());

4. Add the login view

<!-- components/login/login.html -->
<div class="jumbotron">
  <h2 class="text-center"><img src="https://cdn.auth0.com/styleguide/1.0.0/img/badge.svg"></h2>
  <h2 class="text-center">Login</h2>
  <div class="text-center">
    <button class="btn btn-primary" ng-click="vm.authService.login()">Log In</button>
  </div>
</div>

5. Update the home controller

// components/home/home.controller.js
(function () {

  'use strict';

  angular
    .module('app')
    .controller('HomeController', HomeController);

  HomeController.$inject = ['authService'];

  function HomeController(authService) {

    var vm = this;
    vm.authService = authService;

  }

}());

6. Update the home view

<!-- components/home/home.html -->
<div class="jumbotron">
  <h2 class="text-center"><img src="https://cdn.auth0.com/styleguide/1.0.0/img/badge.svg"></h2>
  <h2 class="text-center">Home</h2>
  <div class="text-center" ng-if="!isAuthenticated">
    <p>You are not yet authenticated. <a href="#/login">Log in.</a></p>
  </div>
  <div class="text-center" ng-if="isAuthenticated">
    <p>Thank you for logging in! <a href="javascript:;" ng-click="vm.authService.logout()">Log out.</a></p>
  </div>
</div>

formio-auth0's Issues

Angular 2+ example??

Can this get updated to show how to use auth0 using angular 2+ / typescript? angular 1.x examples are less than helpful...