Playframework authentication && user management sample

The goal of this project is to have starter project that covers basic authentication && user management functionality.

This is a Scala Playframework application that utilizes Silhouette as authentication library and Vuejs for frontend.

Demo app

See Demo on Heroku. Loading can take a while because it uses Heroku free dyno which is turned on/off every time if there is no activity for some time.

Brief description of functionality:

Sign up
Sign in
Email activation
Reset password
Change password
Authentication via social providers Facebook, Google, Twitter
SPA
Basic user management functionality (admin page, user roles)
ReCaptcha integration (signup form)
Password brute force protection (Default is 5 tries per 30 minutes, but can be configured)
User can link multiple sources (credentials, social providers) to his account

Backend technical details:

PlayFramework (Scala)
Silhouette authentication library
PlayFramework + VueJs integration (dev hot reload && prod static assets)
Sending emails via SendGrid
Postgres DB
Ready to deploy to Heroku

Frontend technical details:

VueJs
Vue JWT integration
Vue page access restriction for routes
Vue validation using vuelidate
Bulma
Buefy
Vuex for storing user data in local storage

Although this project uses VueJs on frontend it's easy to port to Angular/ReactJs/etc because frontend part it fully decoupled. Just replace code in vue directory for anything you like and it will work.

VueJs && PlayFramework integration [also applicable to Angular/React/ect]

On running application in prod mode, all frontend sources are compiled and moved to public directory where PlayFramework treats them as static assets.

On running application in dev mode, all frontend sources are proxied from Webpack server by PlayFramework, so hot reloading and other stuff work without magic.

How to run the project locally in dev mode

Make sure you have sbt and npm installed
Create devEnv.conf file in <project_root>/conf directory and specify there your keys. See example below

play.filters.headers.contentSecurityPolicy = "*"

silhouette {
  csrfStateItemHandler.signer.key="..."
  oauth1TokenSecretProvider.signer.key="..."
  oauth1TokenSecretProvider.crypter.key="..."
  authenticator.sharedSecret="..."
}

sendgrid.api.key = "..."

play.crypto.secret="..."

recaptcha.secretKey = "..."

Run backend sbt run
Make sure you have RECAPTCHA_SITEKEY environment variable or export it export RECAPTCHA_SITEKEY="..."
Install frontend dependencies and run frontend cd vui && npm install && npm run serve
Open your http://localhost:9000/ in your browser. That's PlayFramework bakend server which proxies all frontend assets so Hot

Running in production

Build frontend code npm run build
Compile play application for production sbt compile stage (frontend resources will be copied)
Make sure you have all ENV params specified in application.conf such as JDBC_DATABASE_URL, DATABASE_USER, DATABASE_PWD, SENDGRID_API_KEY, RECAPTCHA_SECRETKEY, etc before running the app.

SunPj/silhouette-vuejs-app