Full Code of auth0/angularjs-jwt-authentication-tutorial for AI

Repository: auth0/angularjs-jwt-authentication-tutorial
Branch: master
Commit: 0c56d9b00c36
Files: 30
Total size: 21.6 KB

Directory structure:
gitextract_gmjicxed/

├── README.md
├── backend/
│   ├── .gitignore
│   ├── README.md
│   ├── anonymous-routes.js
│   ├── config.json
│   ├── package.json
│   ├── protected-routes.js
│   ├── quoter.js
│   ├── quotes.json
│   ├── server.js
│   ├── statusError.js
│   └── user-routes.js
└── frontend/
    ├── .bowerrc
    ├── .editorconfig
    ├── .gitignore
    ├── README.md
    ├── app.css
    ├── app.js
    ├── auth0-variables.js
    ├── bower.json
    ├── home/
    │   ├── home.css
    │   ├── home.html
    │   └── home.js
    ├── index.html
    ├── login/
    │   ├── login.css
    │   ├── login.html
    │   └── login.js
    └── signup/
        ├── signup.css
        ├── signup.html
        └── signup.js

================================================
FILE CONTENTS
================================================

================================================
FILE: README.md
================================================
# Authentication on AngularJS with JWTs

In this demo we'll show step by step how to add Authentication to your AngularJS app with an API that uses JWTs.

## Running the example

This application has an AngularJS Frontend and a NodeJS backend

### Frontend

In order to run the the AngularJS app, all you need to do is to start a server at that folder. I recommend using `serve` for that. Just run:

* `npm install -g serve`
* `bower install`
* `serve`

Then go to [http://localhost:3000](http://localhost:3000) and see the Frontend app running

### Backend

The backend is made with `node`, so you must have `node` and `npm` installed.

Then, just run `node server.js` to start the server on the port `3001`.

## Branches

In this repository you'll find several branches. Each of the branches represents one step taken to implement the Authentication.

### 1 - Start Branch

This is the starting point for the application.

If you go to [http://localhost:3000/#/](http://localhost:3000/#/) you'll see the main page of the demo.

In there, you'll see 2 buttons to do 2 API calls:

* The first one, does an API call that **doesn't** require Authentication
* The second one does an API call that **does** require authentication

Try clicking both to see what happens.

### 2 - Authentication implemented in the Backend and UI in the FrontEnd

In this branch, we've added the UI for both the [Signup](https://github.com/auth0/ngeurope-demo/tree/2-user-on-front-ui/frontend/signup) and [Login](https://github.com/auth0/ngeurope-demo/tree/2-user-on-front-ui/frontend/login). 

Also, we've implemented the [Login](https://github.com/auth0/ngeurope-demo/blob/2-user-on-front-ui/backend/user-routes.js#L37-L54) and [Signup](https://github.com/auth0/ngeurope-demo/blob/2-user-on-front-ui/backend/user-routes.js#L19-L35) on the Backend. It returns the [JWT](https://docs.auth0.com/jwt) to the user.

### 3 - User Authentication Finished

In this branch, user Authentication works in the Frontend. You can see the [Login](https://github.com/auth0/ngeurope-demo/blob/3-user-signin-finished/frontend/login/login.js) and [Signup](https://github.com/auth0/ngeurope-demo/blob/3-user-signin-finished/frontend/signup/signup.js) implemented and working.

Go to [http://localhost:3000/#/login](http://localhost:3000/#/login) to see the Login page and login. You'll see that if you click on the `Call secure API` button, it'll still throw an error. That's because we need to send the `JWT` on the `Authorization` header. Let's do that!

### 4 - Sending JWTs on requests

Now, we've implemented sending the JWT on the `Authorization` header on every request. Check it out [here](https://github.com/auth0/ngeurope-demo/blob/4-sending-jwt-on-requests/frontend/app.js#L10-L14)

Now, before logging in, try going to [http://localhost:3000/#/](http://localhost:3000/#/). You should still see this page even though you're not logged in. Try clicking on the `Call secure API` button and check that you still get the Unauthorized error. Now, go to the [Login page](http://localhost:3000/#/login) and log in. Try clicking again on `Call secure API`. Check that it's not returning a correct response since the `Authorization` header is sent in every request.

### 5 - Restrict access to routes

In this section, we've restricted access to routes that require authentintication for anonymous users. Go to [http://localhost:3000/#/](http://localhost:3000/#/) without being logged in and you'll see that you're redirected to the Login page. You can see the implementation for that [here](https://github.com/auth0/ngeurope-demo/blob/5-restrict-access-to-routes/frontend/app.js#L18-L25).


================================================
FILE: backend/.gitignore
================================================
node_modules/
.env

================================================
FILE: backend/README.md
================================================
# NODE TODO API

This is a NodeJS full API that you can use to test with your SPAs or Mobile apps.

## How to use it

This service is deployed in Heroku and saves the TODOs in memory, so once the dyno dies, all the todos are removed.

It's deployed on [http://auth0-todo-test-api.herokuapp.com/](http://auth0-todo-test-api.herokuapp.com/)

## Available APIs

### Open API

The Open API lets anyone do CRUD operation on a set of TODOs. This means that you can add a TODO and then John Doe can delete it.

Available methods:

* **POST /api/open/todos**: Adds a new TODO
* **PUT /api/open/todos/:id**: Updates the TODO with id `id`
* **GET /api/open/todos/:id**: Returns the TODO with id `id`
* **DELETE /api/open/todos/:id**: Deletes the TODO with id `id`
* **GET /api/open/todos**: Gets all fo the TODOs

### User based API

You can use this API to save TODO items for a particular user. For that, you need to use Auth0 to get the `id_token` (JWT) and send it in every request as part of the `Authorization` header.

This server validates JWT from the following account:

* **Domain**: `samples.auth0.com`
* **ClientID**: `BUIJSW9x60sIHBw8Kd9EmCbj8eDIFxDC`

Available methods:

* **POST /api/todos**: Adds a new TODO
* **PUT /api/todos/:id**: Updates the TODO with id `id`
* **GET /api/todos/:id**: Returns the TODO with id `id`
* **DELETE /api/todos/:id**: Deletes the TODO with id `id`
* **GET /api/todos**: Gets all fo the TODOs

## Running this for your Auth0 account

If you want, you can run this server for YOUR Auth0 account. For that, you just need to create a `.env` file and set the `AUTH0_CLIENT_ID` and `AUTH0_CLIENT_SECRET` variables with the information from your account:

````bash
AUTH0_CLIENT_ID=YourClientId
AUTH0_CLIENT_SECRET=YourClientSecret
````



================================================
FILE: backend/anonymous-routes.js
================================================
var express = require('express'),
    quoter  = require('./quoter');

var app = module.exports = express.Router();

app.get('/api/random-quote', function(req, res) {
  res.status(200).send(quoter.getRandomOne());
});


================================================
FILE: backend/config.json
================================================
{
  "secret": "ngEurope rocks!"
}


================================================
FILE: backend/package.json
================================================
{
  "name": "in-memory-todo",
  "version": "0.1.0",
  "description": "An In memory todo for Logged in and not Logged in users",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/auth0/in-memory-todo.git"
  },
  "keywords": [
    "todo",
    "in",
    "memory",
    "jwt",
    "auth0"
  ],
  "author": "Martin Gontovnikas",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/auth0/in-memory-todo/issues"
  },
  "homepage": "https://github.com/auth0/in-memory-todo",
  "dependencies": {
    "body-parser": "^1.6.5",
    "compression": "^1.0.11",
    "cors": "^2.4.1",
    "dotenv": "^0.4.0",
    "errorhandler": "^1.1.1",
    "express": "^4.8.5",
    "express-jwt": "^0.3.1",
    "jsonwebtoken": "^1.1.2",
    "lodash": "^2.4.1",
    "morgan": "^1.2.3"
  }
}


================================================
FILE: backend/protected-routes.js
================================================
var express = require('express'),
    jwt     = require('express-jwt'),
    config  = require('./config'),
    quoter  = require('./quoter');

var app = module.exports = express.Router();

var jwtCheck = jwt({
  secret: config.secret
});

app.use('/api/protected', jwtCheck);

app.get('/api/protected/random-quote', function(req, res) {
  res.status(200).send(quoter.getRandomOne());
});


================================================
FILE: backend/quoter.js
================================================
var quotes = require('./quotes.json');

exports.getRandomOne = function() {
  var totalAmount = quotes.length;
  var rand = Math.ceil(Math.random() * totalAmount);
  return quotes[rand];
}


================================================
FILE: backend/quotes.json
================================================
["Chuck Norris doesn't call the wrong number. You answer the wrong phone.",
"Chuck Norris has already been to Mars; that's why there are no signs of life.",
"Chuck Norris and Superman once fought each other on a bet. The loser had to start wearing his underwear on the outside of his pants.",
"Some magicans can walk on water, Chuck Norris can swim through land.",
"Chuck Norris once urinated in a semi truck's gas tank as a joke....that truck is now known as Optimus Prime.",
"Chuck Norris doesn't flush the toilet, he scares the sh*t out of it",
"Chuck Norris counted to infinity - twice.",
"Chuck Norris can cut through a hot knife with butter",
"Chuck Norris is the reason why Waldo is hiding.",
"Death once had a near-Chuck Norris experience",
"When the Boogeyman goes to sleep every night, he checks his closet for Chuck Norris.",
"Chuck Norris can slam a revolving door.",
"Chuck Norris once kicked a horse in the chin. Its decendants are known today as Giraffes.",
"Chuck Norris will never have a heart attack. His heart isn't nearly foolish enough to attack him.",
"Chuck Norris once got bit by a rattle snake........ After three days of pain and agony ..................the rattle snake died",
"Chuck Norris can win a game of Connect Four in only three moves.",
"When Chuck Norris does a pushup, he isn't lifting himself up, he's pushing the Earth down.",
"There is no theory of evolution. Just a list of animals Chuck Norris allows to live.",
"Chuck Norris can light a fire by rubbing two ice-cubes together.",
"Chuck Norris doesn’t wear a watch. HE decides what time it is.",
"The original title for Alien vs. Predator was Alien and Predator vs Chuck Norris.",
"The film was cancelled shortly after going into preproduction. No one would pay nine dollars to see a movie fourteen seconds long.",
"Chuck Norris doesn't read books. He stares them down until he gets the information he wants.",
"Chuck Norris made a Happy Meal cry.",
"Outer space exists because it's afraid to be on the same planet with Chuck Norris.",
"If you spell Chuck Norris in Scrabble, you win. Forever.",
"Chuck Norris can make snow angels on a concrete slab.",
"Chuck Norris destroyed the periodic table, because Chuck Norris only recognizes the element of surprise.",
"Chuck Norris has to use a stunt double when he does crying scenes.",
"Chuck Norris' hand is the only hand that can beat a Royal Flush.",
"There is no theory of evolution. Just a list of creatures Chuck Norris has allowed to live.",
"Chuck Norris does not sleep. He waits.",
"Chuck Norris tells a GPS which way to go.",
"Some people wear Superman pajamas. Superman wears Chuck Norris pajamas.",
"Chuck Norris's tears cure cancer ..... to bad he has never cried",
"Chuck Norris doesn't breathe, he holds air hostage.",
"Chuck Norris had a staring contest with Medusa, and won.",
"When life hands Chuck Norris lemons, he makes orange juice.",
"When Chuck Norris goes on a picnic, the ants bring him food.",
"Chuck Norris gives Freddy Krueger nightmares.",
"They once made a Chuck Norris toilet paper, but there was a problem: It wouldn't take shit from anybody.",
"Chuck Norris can punch a cyclops between the eyes.",
"Chuck Norris doesn't mow his lawn, he stands on the porch and dares it to grow",
"Chuck Norris put out a forest fire. using only gasoline",
"Chuck Norris CAN believe it's not butter.",
"Custom t-shirts provided by Spreadshirt"]


================================================
FILE: backend/server.js
================================================
var logger          = require('morgan'),
    cors            = require('cors'),
    http            = require('http'),
    express         = require('express'),
    errorhandler    = require('errorhandler'),
    dotenv          = require('dotenv'),
    bodyParser      = require('body-parser');

var app = express();

dotenv.load();

// Parsers
// old version of line
// app.use(bodyParser.urlencoded());
// new version of line
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(cors());

app.use(function(err, req, res, next) {
  if (err.name === 'StatusError') {
    res.send(err.status, err.message);
  } else {
    next(err);
  }
});

if (process.env.NODE_ENV === 'development') {
  app.use(express.logger('dev'));
  app.use(errorhandler())
}

app.use(require('./anonymous-routes'));
app.use(require('./protected-routes'));
app.use(require('./user-routes'));

var port = process.env.PORT || 3001;

http.createServer(app).listen(port, function (err) {
  console.log('listening in http://localhost:' + port);
});



================================================
FILE: backend/statusError.js
================================================
function StatusError(msg, status) {
    var err = Error.call(this, msg);
    err.status = status;
    err.name = 'StatusError';
    return err;
}


StatusError.prototype = Object.create(Error.prototype, {
  constructor: { value: StatusError }
});

module.exports = StatusError;



================================================
FILE: backend/user-routes.js
================================================
var express = require('express'),
    _       = require('lodash'),
    config  = require('./config'),
    jwt     = require('jsonwebtoken');

var app = module.exports = express.Router();

// XXX: This should be a database of users :).
var users = [{
  id: 1,
  username: 'gonto',
  password: 'gonto'
}];

function createToken(user) {
  return jwt.sign(_.omit(user, 'password'), config.secret, { expiresInMinutes: 60*5 });
}

app.post('/users', function(req, res) {
  if (!req.body.username || !req.body.password) {
    return res.status(400).send("You must send the username and the password");
  }
  if (_.find(users, {username: req.body.username})) {
   return res.status(400).send("A user with that username already exists");
  }

  var profile = _.pick(req.body, 'username', 'password', 'extra');
  profile.id = _.max(users, 'id').id + 1;

  users.push(profile);

  res.status(201).send({
    id_token: createToken(profile)
  });
});

app.post('/sessions/create', function(req, res) {
  if (!req.body.username || !req.body.password) {
    return res.status(400).send("You must send the username and the password");
  }

  var user = _.find(users, {username: req.body.username});
  if (!user) {
    return res.status(401).send("The username or password don't match");
  }

  if (!user.password === req.body.password) {
    return res.status(401).send("The username or password don't match");
  }

  res.status(201).send({
    id_token: createToken(user)
  });
});


================================================
FILE: frontend/.bowerrc
================================================
{
  "directory": "vendor"
}


================================================
FILE: frontend/.editorconfig
================================================
# http://editorconfig.org
root = true

[*]
indent_style = space
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false


================================================
FILE: frontend/.gitignore
================================================
._*
.~lock.*
.buildpath
.DS_Store
.idea
.project
.settings

# Ignore node stuff
node_modules/
npm-debug.log
libpeerconnection.log

# OS-specific
.DS_Store

# Bower components
vendor


================================================
FILE: frontend/README.md
================================================
# Auth0 + AngularJS + API Seed

This is the seed project you need to use if you're going to create an AngularJS app that will use Auth0 and an API that you're going to be developing. That API can be in any language.

If you want to connect to a third party API like Firebase or Amazon, please check [this other seed](https://github.com/auth0/auth0-angular/tree/master/examples/widget-with-thirdparty-api).

## Running the example

In order to run the example you need to just start a server. What we suggest is doing the following:

1. Install node
1. run npm install -g serve
1. run serve in the directory of this project.

Go to [http://localhost:3000](http://localhost:3000) and you'll see the app running :).


================================================
FILE: frontend/app.css
================================================


================================================
FILE: frontend/app.js
================================================
angular.module( 'sample', [
  'sample.home',
  'sample.login',
  'sample.signup',
  'angular-jwt',
  'angular-storage'
])
.config( function myAppConfig ($urlRouterProvider, jwtInterceptorProvider, $httpProvider) {
  $urlRouterProvider.otherwise('/');

  jwtInterceptorProvider.tokenGetter = function(store) {
    return store.get('jwt');
  }

  $httpProvider.interceptors.push('jwtInterceptor');
})
.run(function($rootScope, $state, store, jwtHelper) {
  $rootScope.$on('$stateChangeStart', function(e, to) {
    if (to.data && to.data.requiresLogin) {
      if (!store.get('jwt') || jwtHelper.isTokenExpired(store.get('jwt'))) {
        e.preventDefault();
        $state.go('login');
      }
    }
  });
})
.controller( 'AppCtrl', function AppCtrl ( $scope, $location ) {
  $scope.$on('$routeChangeSuccess', function(e, nextRoute){
    if ( nextRoute.$$route && angular.isDefined( nextRoute.$$route.pageTitle ) ) {
      $scope.pageTitle = nextRoute.$$route.pageTitle + ' | ngEurope Sample' ;
    }
  });
})

;



================================================
FILE: frontend/auth0-variables.js
================================================
var AUTH0_CLIENT_ID='BUIJSW9x60sIHBw8Kd9EmCbj8eDIFxDC';
var AUTH0_DOMAIN='samples.auth0.com';


================================================
FILE: frontend/bower.json
================================================
{
  "name": "ngEurope",
  "version": "0.0.0",
  "homepage": "https://github.com/auth0/ngeurope-demo",
  "authors": [
    "Martin Gontovnikas <martin@gon.to>"
  ],
  "description": "ngEurope Auth0 sample",
  "main": "app.js",
  "keywords": [
    "ngEurope",
    "sample",
    "angular"
  ],
  "license": "MIT",
  "dependencies": {
    "angularjs": "~1.3",
    "bootstrap": "~3.2.0",
    "font-awesome": "~4.2.0",
    "ui-router": "~0.2.11",
    "angular-jwt": "~0.0.4",
    "a0-angular-storage": "~0.0.6",
    "typekit-load": "~0.1.2",
    "angular-ui-router": "~0.2.11"
  },
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "vendor",
    "test",
    "tests"
  ]
}


================================================
FILE: frontend/home/home.css
================================================
.red {
  color: red;
}


================================================
FILE: frontend/home/home.html
================================================
<div class="home">
  <div class="jumbotron centered">
    <h1>Welcome to the ngEurope sample!</h1>
    <h2 ng-show="jwt">Your JWT is:</h2>
    <pre ng-show="jwt" class="jwt"><code>{{jwt}}</code></pre>
    <pre ng-show="jwt" class="jwt"><code>{{decodedJwt | json}}</code></pre>
    <p>Click any of the buttons to call an API and get a response</p>
    <p><a class="btn btn-primary btn-lg" role="button" ng-click="callAnonymousApi()">Call Anonymous API</a></p>
    <p><a class="btn btn-primary btn-lg" role="button" ng-click="callSecuredApi()">Call Secure API</a></p>
    <h2 ng-show="response">The response of calling the <span class="red">{{api}}</span> API is:</h2>
    <h3 ng-show="response">{{response}}</h3>
  </div>



</div>


================================================
FILE: frontend/home/home.js
================================================
angular.module( 'sample.home', [
  'ui.router',
  'angular-storage',
  'angular-jwt'
])
.config(function($stateProvider) {
  $stateProvider.state('home', {
    url: '/',
    controller: 'HomeCtrl',
    templateUrl: 'home/home.html',
    data: {
      requiresLogin: true
    }
  });
})
.controller( 'HomeCtrl', function HomeController( $scope, $http, store, jwtHelper) {

  $scope.jwt = store.get('jwt');
  $scope.decodedJwt = $scope.jwt && jwtHelper.decodeToken($scope.jwt);

  $scope.callAnonymousApi = function() {
    // Just call the API as you'd do using $http
    callApi('Anonymous', 'http://localhost:3001/api/random-quote');
  }

  $scope.callSecuredApi = function() {
    callApi('Secured', 'http://localhost:3001/api/protected/random-quote');
  }

  function callApi(type, url) {
    $scope.response = null;
    $scope.api = type;
    $http({
      url: url,
      method: 'GET'
    }).then(function(quote) {
      $scope.response = quote.data;
    }, function(error) {
      $scope.response = error.data;
    });
  }

});


================================================
FILE: frontend/index.html
================================================
<!DOCTYPE html>
<html ng-app="sample" ng-controller="AppCtrl">
  <head>
    <title ng-bind="pageTitle"></title>

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

    <!-- font awesome from BootstrapCDN -->
    <link href="vendor/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
    <link href="vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="app.css">
    <link rel="stylesheet" type="text/css" href="home/home.css">
    <link rel="stylesheet" type="text/css" href="signup/signup.css">
    <link rel="stylesheet" type="text/css" href="login/login.css">

    <script type="text/javascript" src="vendor/angularjs/angular.js"></script>
    <script type="text/javascript" src="vendor/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="vendor/a0-angular-storage/dist/angular-storage.js" type="text/javascript"> </script>
    <script src="vendor/angular-jwt/dist/angular-jwt.js" type="text/javascript"> </script>

    <script type="text/javascript" src="app.js"></script>
    <script type="text/javascript" src="home/home.js"></script>
    <script type="text/javascript" src="login/login.js"></script>
    <script type="text/javascript" src="signup/signup.js"></script>

  </head>
  <body>
    <div class="container" ui-view></div>
  </body>
</html>


================================================
FILE: frontend/login/login.css
================================================
.login {
  width: 40%;
}


================================================
FILE: frontend/login/login.html
================================================
<div class="login jumbotron center-block">
  <h1>Login</h1>
  <form role="form">
  <div class="form-group">
    <label for="username">Username</label>
    <input type="text" class="form-control" ng-model="user.username" id="username" placeholder="Username">
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" class="form-control" id="password" ng-model="user.password" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default" ng-click="login()">Submit</button>
</form>
<a ui-sref="signup()">Click here to Signup</a>
</div>


================================================
FILE: frontend/login/login.js
================================================
angular.module( 'sample.login', [
  'ui.router',
  'angular-storage'
])
.config(function($stateProvider) {
  $stateProvider.state('login', {
    url: '/login',
    controller: 'LoginCtrl',
    templateUrl: 'login/login.html'
  });
})
.controller( 'LoginCtrl', function LoginController( $scope, $http, store, $state) {

  $scope.user = {};

  $scope.login = function() {
    $http({
      url: 'http://localhost:3001/sessions/create',
      method: 'POST',
      data: $scope.user
    }).then(function(response) {
      store.set('jwt', response.data.id_token);
      $state.go('home');
    }, function(error) {
      alert(error.data);
    });
  }

});


================================================
FILE: frontend/signup/signup.css
================================================
.signup {
  width: 40%;
}


================================================
FILE: frontend/signup/signup.html
================================================

<div class="signup center-block jumbotron">
  <form role="form">
  <h1>Signup</h1>
  <div class="form-group">
    <label for="username">Username</label>
    <input type="text" class="form-control" id="username" ng-model="user.username" placeholder="Username">
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" class="form-control" id="password" ng-model="user.password" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="extra">Extra</label>
    <input type="text" class="form-control" id="extra" ng-model="user.extra" placeholder="Extra Information">
  </div>
  <button type="submit" class="btn btn-default" ng-click="createUser()">Submit</button>
</form>
<a ui-sref="login()">Click here to Login</a>
</div>


================================================
FILE: frontend/signup/signup.js
================================================
angular.module( 'sample.signup', [
  'ui.router',
  'angular-storage'
])
.config(function($stateProvider) {
  $stateProvider.state('signup', {
    url: '/signup',
    controller: 'SignupCtrl',
    templateUrl: 'signup/signup.html'
  });
})
.controller( 'SignupCtrl', function SignupController( $scope, $http, store, $state) {

  $scope.user = {};

  $scope.createUser = function() {
    $http({
      url: 'http://localhost:3001/users',
      method: 'POST',
      data: $scope.user
    }).then(function(response) {
      store.set('jwt', response.data.id_token);
      $state.go('home');
    }, function(error) {
      alert(error.data);
    });
  }

});