项目作者: james2doyle

项目描述 :
An example of using Nuxt with Firebase to auth users without a server
高级语言: Vue
项目地址: git://github.com/james2doyle/nuxt-firebase-auth.git
创建时间: 2017-12-12T06:45:21Z
项目社区:https://github.com/james2doyle/nuxt-firebase-auth

开源协议:

下载


Nuxt Firebase Auth

An example of using Nuxt with Firebase to auth users without a server

The goal of this project is to make it really easy to generate an application that has Firebase (authentication + user account management) setup out-of-the-box.

My personal goal with the project is to allow me to create some simple PAAS apps without having to setup auth + Firebase every time.

Firebase Setup

Create a firebase.js file in the root of the project. It will look something like this:

  1. module.exports = {
  2. 'apiKey': 'info-from-firebase-web-instructions',
  3. 'authDomain': 'info-from-firebase-web-instructions',
  4. 'databaseURL': 'info-from-firebase-web-instructions',
  5. 'projectId': 'info-from-firebase-web-instructions',
  6. 'storageBucket': 'info-from-firebase-web-instructions',
  7. 'messagingSenderId': 'info-from-firebase-web-instructions'
  8. }

Rules

In order to keep other users from writing to paths they don’t own, we need to add some rules to the database:

  1. {
  2. "rules": {
  3. "accounts": {
  4. "$uid": {
  5. ".read": "$uid === auth.uid",
  6. ".write": "$uid === auth.uid"
  7. }
  8. }
  9. }
  10. }

Social Logins

I have setup social login for Google and Github. You will need to login to your Firebase console and enable those signin methods. Google will work out-of-the-box with any Firebase app. But you will need to create a new oAuth application if you would like to use Github signin.

Build Setup

  1. # install dependencies
  2. $ npm install # Or yarn install
  3. # serve with hot reload at localhost:3000
  4. $ npm run dev
  5. # build for production and launch server
  6. $ npm run build
  7. $ npm start
  8. # generate static project
  9. $ npm run generate

For detailed explanation on how things work, checkout the Nuxt.js docs.

Demo GIF

nuxt firebase auth preview image