Marionette.js module to manage authentication. Needs a server method that checks credentials returning true or false. Started from this blog post code: http://clintberry.com/2012/backbone-js-apps-authentication-tutorial/

app.coffee

App = new Marionette.Application();

App.addRegions {
  "headerRegion": "#header"
  "topMenuRegion": "#top-menu"
  "mainRegion"  : "#main"
  }

App.on 'initialize:after', ->
  Backbone.history.start()

window.App = App

authenticateModule.coffee

AuthenticationModule = App.module 'AuthenticationModule'

class AuthenticationModule.LoginView extends Marionette.ItemView

  events: {
    "click #loginButton": "login"
  }

  ui: {
    inputEmail: "input#username"
    inputPassword: "input#password"
    loginButton: "button#loginButton"
  }

  initialize: =>
    @template = Handlebars.templates['login-template.html'] # using pre-compilation

  login:  (event) ->
    event.preventDefault() # Don't let this button submit the form
    @onBeforeLogin()
    username = @ui.inputEmail.val()
    password = @ui.inputPassword.val()
    authorized = @onAuthorized
    unauthorized = @onUnauthorized
    @trigger 'authenticate', { username, password, authorized, unauthorized }

  onBeforeLogin: ->
    $('.alert-error').hide(); # Hide any errors on a new submit

  onAuthorized: ->
    window.location.replace('#')

  onUnauthorized: ->
    $('.alert-error').text("Username or password not valid.").show()

class LogoutView extends Marionette.ItemView

  initialize: =>
    @template = Handlebars.templates['logout-template.html'] # using pre-compilation

class AuthenticationModule.Controller extends Marionette.Controller

  initialize: (options) ->
    @region = options.region
    @loginView = options.loginView
    @listenTo @loginView, 'authenticate', (data) =>
      @authenticate data.username, data.password, data.authorized, data.unauthorized

  authenticate: (username, password, authorized, unauthorized ) ->
    url = '/api/login'
    console.log('Loggin in... ')
    formValues = {
      username: username,
      password: password
    }
    $.ajax {
      url:url,
      type:'POST',
      dataType:"json",
      data: formValues,
      success: (ok) ->
        if ok
          authorized()
        else
          unauthorized()
    }

  login: ->
    view = new AuthenticationModule.LoginView()
    @region.show(view)

  logout: ->
    $.get '/api/logout', =>
      view = new LogoutView()
      @region.show(view)

class AuthenticationModule.Router extends Marionette.AppRouter

  appRoutes: {
    'login(/)': 'login'
    'logout(/)': 'logout'
  }

AuthenticationModule.addInitializer ->
  # Tell jQuery to watch for any 401 or 403 errors and handle them appropriately
  $.ajaxSetup {
    statusCode: {
      401: -> window.location.replace('#login')
      403: -> window.location.replace('#denied')
    }
  }  
  @controller = new AuthenticationModule.Controller { region: App.mainRegion, @loginView }
  @router = new AuthenticationModule.Router { @controller }

AuthenticationModule.router = @router
AuthenticationModule.controller = @controller

login-template.html

<h1>Login</h1>
<div class="alert alert-error" style="display:none;">
</div>
<form class="form-horizontal">
    <div class="control-group">
        <label class="control-label" for="username">Username</label>
        <div class="controls">
            <input type="text" id="username" placeholder="Username">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="password">Password</label>
        <div class="controls">
            <input type="password" id="password" placeholder="Password">
        </div>
    </div>
    <div class="control-group">
        <div class="controls">
            <button type="submit" class="btn" id="loginButton">Sign in</button>
        </div>
    </div>
</form>

This is fantastic, thank you.

Agree, this is a great example. Thanks

Nice example, will give it a try. Thank you

this is a piece of cake 👍 ,thanks