aurelia-authentication-loopback-sample

Aurelia client included as ES6-SystemJs, ES6-Webpack and Typescript-SystemJs versions

This is a skeleton for an Aurelia client using aurelia-authentication for authorized access to a Strongloop loopback api server.

Loopback-component-satellizer is used to handle third-party authentication on the server side.

The aurelia-authentication documentantion you'll find at aurelia-authentication.spoonx.org.

Installation instructions

For ES6-SystemJs and Typescript-SystemJs

For typescript, replace cd client below with cd client-ts.

git clone https://github.com/doktordirk/aurelia-authentication-loopback-sample
cd aurelia-authentication-loopback-sample
npm install
cd client
npm install
jspm install

To run the sample type in the client folder:

gulp watch

This builds the aurelia-client and serves the client and the api server. Browse to localhost:9000 to see it in action. Sign up or use the provided user email: user@example.com / password: `none

For ES6-Webpack

git clone https://github.com/doktordirk/aurelia-authentication-loopback-sample
cd aurelia-authentication-loopback-sample
npm install
cd client-wp
npm install

To run the sample open two shells:

run server in one console from the root folder with: node .
run client in the second console from the client-wp folder with: npm run dev

Browse to localhost:9000 to see it in action. Sign up or use the provided user email: user@example.com / password: none.

Configuration

Third-party login

Included are configuration options for facebook and google+ using loopback-component-satellizer

Facebook

You'll need a facebook developer account (developers.facebook.com). Add a new website app (skip quick start). You'll find your facebook app credentials in Settings->Basic: App ID (which is public) and App Secret (which is private, so don't upload that one on github or alike). Set the website url there to eg http:/localhost. In Settings->Advanced in Client OAuth Settings->Valid OAuth redirect URIs add http:/localhost:9000. That's the default client address in this project.

Copy /server/component-config.local.json.bak to /server/component-config.local.json and add your facebook App Secret. Loopback applies *.local.json and *.local.js setting files after the default *.json or *.js. *.local.json and *.local.js are added to .gitignore as they should not be publicly uploaded.

Open /client/src/authConfig.js and add your public facebook clientId=App ID

What's in it

Loopback server

/server

A loopback api server. Local files are used as database. Have a peek at user-db.json and customer-db.json to gain some insight. JSON web tokens (jwt) are used for authorization.

/common

The user model with with ACL and the related customer model.

user hasMany customers
customer belongsTo user

Unauthorized users only can list the customers. Authorized users can add and manage their own customers. See the models in common/models. Users can signup & login with emails or third-party providers (facebook).

Aurelia client

/client /client-ts /client-wp

An aurelia client app with authorized pages for user profile and customer management and unauthorized pages for login, signup and customer listing.

Details

More information about the loopback server and the aurelia client code are in the ./doc folder.

Support

Aurelia Gitter chat
Spoonx/Dev Gitter Chat for aurelia-api/-auth/-notifications
Loopback Gitter Chat