Giter Site home page Giter Site logo

rastenis / vue-nuxt-passport-bulma-express-boiler Goto Github PK

View Code? Open in Web Editor NEW
22.0 1.0 1.0 3.84 MB

A Vue+Vuex starter with Nuxt scaffolding, Bulma styling, and Express backend.

Home Page: https://vuenuxt.demos.matasr.com

CSS 1.10% Vue 36.34% JavaScript 62.56%
vue nuxt nedb passport passport-js passport-local passport-twitter passport-google-oauth boilerplate boiler

vue-nuxt-passport-bulma-express-boiler's Introduction

vue-nuxt-passport-bulma-express-boiler

Status

A Vue+Vuex starter with Nuxt scaffolding, Bulma styling, and Express backend. A demo website is available here.

Features

  • Guided setup for config variables + API keys
  • Flexible scaffolding, provided by NuxtJS
  • Auth via email/password or via Google/Twitter.
  • Auth merging, linking and unlinking of social auth accounts
  • Client:
    • Vue + Bulma
    • Vuex state management example
    • Auth-gated data example
    • Based closely off of nuxt-community/express-template for ease of comparison
  • The Backend is an Express server with Lightweight local storage provided with NeDB
  • TLS/HTTPS:
    • Automatic certificate generation powered by greenlock
    • Self hosted mode (443/80 port access required) + simple mode (http only, custom port), for local use

Setup

# install dependencies
$ npm install

# run setup
$ npm run setup

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm build
$ npm start

Follow the config to set up both the config.json and passportKeys.json automatically. There are example files if you want to set up manually.

This template contains Google and Twitter logins, but more can be added easily, as they're modular passportJS strategies.

  • The process for obtaining a Google key is described here.
  • The process for obtaining a Twitter key is described here.

Running locally

If you set secure_override to true in the config.json, Express will be set up with trust proxy, which will allow for secure cookies to work over reverse proxies (Apache, Nginx, etc.)

TODO list

  1. Animations & completed alerts for various auth actions
  2. Profile page, account linking(technically operational, but no UI for it yet)
  3. Guided setup

Information & sources

For detailed explanation on how things work, checkout the Nuxt.js docs. Vue.js docs can be found here: Vue.js docs

This project is based on:

  1. The nuxt-community express-template for ease of comparison & demo api routes(this project contains the same routes locked behind an auth gate)
  2. The google/twitter passport.js strategy configurations were borrowed from sahat's hackathon-starter.

vue-nuxt-passport-bulma-express-boiler's People

Contributors

rastenis avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Forkers

marcojacobsnl

vue-nuxt-passport-bulma-express-boiler's Issues

Registration hangups

Occasional registration response hangups occur after linking and unlinking social accounts or creating accounts via social platform logins.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.