This sample application shows how to do JWT authentication in Aurelia using the aurelia-auth package. The app uses Auth0's simple NodeJS random quote API which allows us to authenticate and view Chuck Norris quotes if we have a valid JWT. Big thanks to Paul van Bladel for pointers from his sample app repo.
All the Aurelia-related files are in the client directory and all NodeJS files in server. To install, clone this repo to your target folder and then do the following:
- Do
git submodule update --initto pull the NodeJS API into theserverdirectory cdintoserverand donpm install- Run the Node server by doing
node server.js cdintoclientand donpm installfollowed byjspm install- Do
gulp watchto run the Gulp tasks - View the app in your browser at localhost:9000
We need to supply specific configuration for our use of the aurelia-auth package
// client/src/auth-config.js
// Specific settings for our application's
// authentication context. These will override
// the default settings provided by aureliauth
var config = {
// Our Node API is being served from localhost:3001
baseUrl: 'http://localhost:3001',
// The API specifies that new users register at the POST /users enpoint
signupUrl: 'users',
// Logins happen at the POST /sessions/create endpoint
loginUrl: 'sessions/create',
// The API serves its tokens with a key of id_token which differs from
// aureliauth's standard
tokenName: 'id_token',
// Once logged in, we want to redirect the user to the welcome view
loginRedirect: '#/welcome',
}
export default config;We can protect whichever routes we like by setting auth:true in the route configuration
// client/src/router-config.js
...
{ route: 'secret-quote', name: 'secret-quote', moduleId: './secret-quote', nav: true, title:'Super Secret Quote', auth: true },
...With all the configuration in place, we can provide methods for signup, login and logout.
// client/src/signup.js
...
signup() {
// Object to hold the view model values passed into the signup method
var userInfo = { email: this.email, password: this.password }
return this.auth.signup(userInfo)
.then((response) => {
console.log("Signed Up!");
})
.catch(error => {
this.signupError = error.response;
});
};
...// client/src/login.js
...
login() {
return this.auth.login(this.email, this.password)
.then(response => {
console.log("Login response: " + response);
})
.catch(error => {
this.loginError = error.response;
});
};
...//client/src/logout.js
...
activate() {
// When we get to the logout route, the logout
// method on the auth service will be called
// and we will be redirected to the login view
this.authService.logout("#/login")
.then(response => {
console.log("Logged Out");
})
.catch(err => {
console.log("Error Logging Out");
});
};
...Finally, we can fetch a super-secret-quote once we're authenticated.
// client/src/secret-quote.js
...
activate() {
return this.http.get('http://localhost:3001/api/protected/random-quote')
.then(response => {
this.secretQuote = response.content;
}).catch(error => {
console.log('Error getting quote');
});
};
...MIT
Auth0 helps you to:
- Add authentication with multiple authentication sources, either social like Google, Facebook, Microsoft Account, LinkedIn, GitHub, Twitter, Box, Salesforce, amont others, or enterprise identity systems like Windows Azure AD, Google Apps, Active Directory, ADFS or any SAML Identity Provider.
- Add authentication through more traditional username/password databases.
- Add support for linking different user accounts with the same user.
- Support for generating signed Json Web Tokens to call your APIs and flow the user identity securely.
- Analytics of how, when and where users are logging in.
- Pull data from other sources and add it to the user profile, through JavaScript rules.
- Go to Auth0 and click Sign Up.
- Use Google, GitHub or Microsoft Account to login.