├── static ├── .gitkeep ├── img │ ├── v.png │ └── icons │ │ ├── favicon.ico │ │ ├── favicon-16x16.png │ │ ├── favicon-32x32.png │ │ ├── apple-touch-icon.png │ │ ├── mstile-150x150.png │ │ ├── android-chrome-96x96.png │ │ ├── android-chrome-192x192.png │ │ ├── android-chrome-512x512.png │ │ ├── apple-touch-icon-60x60.png │ │ ├── apple-touch-icon-76x76.png │ │ ├── apple-touch-icon-120x120.png │ │ ├── apple-touch-icon-152x152.png │ │ ├── apple-touch-icon-180x180.png │ │ ├── msapplication-icon-144x144.png │ │ └── safari-pinned-tab.svg └── manifest.json ├── .eslintignore ├── config ├── prod.env.js ├── dev.env.js └── index.js ├── src ├── stylus │ └── main.styl ├── assets │ └── logo.png ├── router │ ├── auth-guard.js │ └── index.js ├── store │ ├── index.js │ ├── shared │ │ └── index.js │ └── user │ │ └── index.js ├── components │ ├── Shared │ │ └── Alert.vue │ ├── Home.vue │ └── User │ │ ├── Profile.vue │ │ ├── Signup.vue │ │ └── Signin.vue ├── main.js └── App.vue ├── .github └── FUNDING.yml ├── .editorconfig ├── .gitignore ├── .postcssrc.js ├── .babelrc ├── .eslintrc.js ├── LICENSE ├── README.md ├── index.html └── package.json /static/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | build/*.js 2 | config/*.js 3 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"' 3 | } 4 | -------------------------------------------------------------------------------- /src/stylus/main.styl: -------------------------------------------------------------------------------- 1 | /** Stylus Styles */ 2 | @import '../../node_modules/vuetify/src/stylus/main' -------------------------------------------------------------------------------- /static/img/v.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/toptal0212/vue-firebase-auth-vuex/HEAD/static/img/v.png -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/toptal0212/vue-firebase-auth-vuex/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: aofdev 4 | ko_fi: aofdev 5 | -------------------------------------------------------------------------------- /static/img/icons/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/toptal0212/vue-firebase-auth-vuex/HEAD/static/img/icons/favicon.ico -------------------------------------------------------------------------------- /static/img/icons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/toptal0212/vue-firebase-auth-vuex/HEAD/static/img/icons/favicon-16x16.png -------------------------------------------------------------------------------- /static/img/icons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/toptal0212/vue-firebase-auth-vuex/HEAD/static/img/icons/favicon-32x32.png -------------------------------------------------------------------------------- /static/img/icons/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/toptal0212/vue-firebase-auth-vuex/HEAD/static/img/icons/apple-touch-icon.png -------------------------------------------------------------------------------- /static/img/icons/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/toptal0212/vue-firebase-auth-vuex/HEAD/static/img/icons/mstile-150x150.png -------------------------------------------------------------------------------- /static/img/icons/android-chrome-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/toptal0212/vue-firebase-auth-vuex/HEAD/static/img/icons/android-chrome-96x96.png -------------------------------------------------------------------------------- /static/img/icons/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/toptal0212/vue-firebase-auth-vuex/HEAD/static/img/icons/android-chrome-192x192.png -------------------------------------------------------------------------------- /static/img/icons/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/toptal0212/vue-firebase-auth-vuex/HEAD/static/img/icons/android-chrome-512x512.png -------------------------------------------------------------------------------- /static/img/icons/apple-touch-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/toptal0212/vue-firebase-auth-vuex/HEAD/static/img/icons/apple-touch-icon-60x60.png -------------------------------------------------------------------------------- /static/img/icons/apple-touch-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/toptal0212/vue-firebase-auth-vuex/HEAD/static/img/icons/apple-touch-icon-76x76.png -------------------------------------------------------------------------------- /static/img/icons/apple-touch-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/toptal0212/vue-firebase-auth-vuex/HEAD/static/img/icons/apple-touch-icon-120x120.png -------------------------------------------------------------------------------- /static/img/icons/apple-touch-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/toptal0212/vue-firebase-auth-vuex/HEAD/static/img/icons/apple-touch-icon-152x152.png -------------------------------------------------------------------------------- /static/img/icons/apple-touch-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/toptal0212/vue-firebase-auth-vuex/HEAD/static/img/icons/apple-touch-icon-180x180.png -------------------------------------------------------------------------------- /static/img/icons/msapplication-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/toptal0212/vue-firebase-auth-vuex/HEAD/static/img/icons/msapplication-icon-144x144.png -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var prodEnv = require('./prod.env') 3 | 4 | module.exports = merge(prodEnv, { 5 | NODE_ENV: '"development"' 6 | }) 7 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /src/router/auth-guard.js: -------------------------------------------------------------------------------- 1 | import {store} from '../store' 2 | 3 | export default (to, from, next) => { 4 | if (store.getters.user) { 5 | next() 6 | } else { 7 | next('/signin') 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | *.suo 11 | *.ntvs* 12 | *.njsproj 13 | *.sln 14 | *.swp 15 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | // to edit target browsers: use "browserlist" field in package.json 6 | "autoprefixer": {} 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | import user from './user' 4 | import shared from './shared' 5 | 6 | Vue.use(Vuex) 7 | 8 | export const store = new Vuex.Store({ 9 | modules: { 10 | user: user, 11 | shared: shared 12 | } 13 | }) 14 | -------------------------------------------------------------------------------- /src/components/Shared/Alert.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-runtime"], 12 | "env": { 13 | "test": { 14 | "presets": ["env", "stage-2"], 15 | "plugins": [ "istanbul" ] 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/components/Home.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /static/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-firebase-auth-vuex", 3 | "short_name": "vue firebase auth vuex", 4 | "icons": [ 5 | { 6 | "src": "img/icons/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "img/icons/android-chrome-512x512.png", 12 | "sizes": "512x512", 13 | "type": "image/png" 14 | } 15 | ], 16 | "start_url": "/index.html", 17 | "display": "standalone", 18 | "background_color": "#000000", 19 | "theme_color": "#4DBA87" 20 | } 21 | -------------------------------------------------------------------------------- /src/store/shared/index.js: -------------------------------------------------------------------------------- 1 | export default { 2 | state: { 3 | loading: false, 4 | error: null 5 | }, 6 | mutations: { 7 | setLoading (state, payload) { 8 | state.loading = payload 9 | }, 10 | setError (state, payload) { 11 | state.error = payload 12 | }, 13 | clearError (state) { 14 | state.error = null 15 | } 16 | }, 17 | actions: { 18 | clearError ({commit}) { 19 | commit('clearError') 20 | }, 21 | setError ({commit}, payload) { 22 | commit('setError', payload) 23 | } 24 | }, 25 | getters: { 26 | loading (state) { 27 | return state.loading 28 | }, 29 | error (state) { 30 | return state.error 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | // http://eslint.org/docs/user-guide/configuring 2 | 3 | module.exports = { 4 | root: true, 5 | parser: 'babel-eslint', 6 | parserOptions: { 7 | sourceType: 'module' 8 | }, 9 | env: { 10 | browser: true, 11 | }, 12 | // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style 13 | extends: 'standard', 14 | // required to lint *.vue files 15 | plugins: [ 16 | 'html' 17 | ], 18 | // add your custom rules here 19 | 'rules': { 20 | // allow paren-less arrow functions 21 | 'arrow-parens': 0, 22 | // allow async-await 23 | 'generator-star-spacing': 0, 24 | // allow debugger during development 25 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/components/User/Profile.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 29 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | const Home = () => import('@/components/Home') 4 | const Profile = () => import('@/components/User/Profile') 5 | const Signup = () => import('@/components/User/Signup') 6 | const Signin = () => import('@/components/User/Signin') 7 | import AuthGuard from './auth-guard' 8 | 9 | Vue.use(Router) 10 | 11 | export default new Router({ 12 | routes: [ 13 | { 14 | path: '/', 15 | name: 'Home', 16 | component: Home 17 | }, 18 | { 19 | path: '/profile', 20 | name: 'Profile', 21 | component: Profile, 22 | beforeEnter: AuthGuard 23 | }, 24 | { 25 | path: '/signup', 26 | name: 'Signup', 27 | component: Signup 28 | }, 29 | { 30 | path: '/signin', 31 | name: 'Signin', 32 | component: Signin 33 | } 34 | ], 35 | mode: 'history' 36 | }) 37 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from 'vue' 4 | import Vuetify from 'vuetify' 5 | const App = () => import('./App') 6 | import * as firebase from 'firebase' 7 | import router from './router' 8 | import { store } from './store' 9 | const AlertCmp = () => import('./components/Shared/Alert.vue') 10 | 11 | Vue.use(Vuetify) 12 | Vue.config.productionTip = false 13 | 14 | Vue.component('app-alert', AlertCmp) 15 | /* eslint-disable no-new */ 16 | new Vue({ 17 | el: '#app', 18 | router, 19 | store, 20 | template: '', 21 | components: { App }, 22 | created () { 23 | firebase.initializeApp({ 24 | apiKey: '', 25 | authDomain: '', 26 | databaseURL: '', 27 | projectId: '', 28 | storageBucket: '' 29 | }) 30 | firebase.auth().onAuthStateChanged((user) => { 31 | if (user) { 32 | this.$store.dispatch('autoSignIn', user) 33 | } 34 | }) 35 | } 36 | }) 37 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Visarut Phusua 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue auth firebase🔥 with vuex 2 | 3 | > vue authentication firebase🔥 4 | 5 | ![alt tag](https://i.imgur.com/5AnRW5j.png) 6 | 7 | Simplified Firebase authentication for vue projects with support for Facebook & Google login & Github & Twitter and with support Progressive Web Apps 8 | 9 | ## Config 10 | ### Step 1 11 | Firebase Auth Provides Method Email/Password,Google,Facebook,Github,Twitter Enabled [Firebase console](https://console.firebase.google.com/) 12 | 13 | ### Step 2 14 | Initialize Firebase At ``main.js`` [Firebase Credentials](https://console.firebase.google.com/) 15 | ``` bash 16 | firebase.initializeApp({ 17 | apiKey: '', 18 | authDomain: '', 19 | databaseURL: '', 20 | projectId: '', 21 | storageBucket: '' 22 | }) 23 | ``` 24 | 25 | 26 | ## Installation 27 | 28 | ``` bash 29 | # Git Clone Project 30 | git clone git@github.com:aofdev/vue-firebase-auth-vuex.git 31 | 32 | # Cd project 33 | cd vue-firebase-auth-vuex 34 | 35 | # install dependencies 36 | npm install || yarn install 37 | 38 | # serve with hot reload at localhost:8080 39 | npm run dev || yarn dev 40 | 41 | # build for production with minification and to build Progressive Web Apps 42 | npm run build || yarn build 43 | 44 | 45 | ``` 46 | 47 | -------------------------------------------------------------------------------- /static/img/icons/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.11, written by Peter Selinger 2001-2013 9 | 10 | 12 | 16 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | // see http://vuejs-templates.github.io/webpack for documentation. 2 | var path = require('path') 3 | 4 | module.exports = { 5 | build: { 6 | env: require('./prod.env'), 7 | index: path.resolve(__dirname, '../dist/index.html'), 8 | assetsRoot: path.resolve(__dirname, '../dist'), 9 | assetsSubDirectory: 'static', 10 | assetsPublicPath: '/', 11 | productionSourceMap: true, 12 | // Gzip off by default as many popular static hosts such as 13 | // Surge or Netlify already gzip all static assets for you. 14 | // Before setting to `true`, make sure to: 15 | // npm install --save-dev compression-webpack-plugin 16 | productionGzip: false, 17 | productionGzipExtensions: ['js', 'css'], 18 | // Run the build command with an extra argument to 19 | // View the bundle analyzer report after build finishes: 20 | // `npm run build --report` 21 | // Set to `true` or `false` to always turn it on or off 22 | bundleAnalyzerReport: process.env.npm_config_report 23 | }, 24 | dev: { 25 | env: require('./dev.env'), 26 | port: 8080, 27 | autoOpenBrowser: true, 28 | assetsSubDirectory: 'static', 29 | assetsPublicPath: '/', 30 | proxyTable: {}, 31 | // CSS Sourcemaps off by default because relative paths are "buggy" 32 | // with this option, according to the CSS-Loader README 33 | // (https://github.com/webpack/css-loader#sourcemaps) 34 | // In our experience, they generally work as expected, 35 | // just be aware of this issue when enabling this option. 36 | cssSourceMap: false 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | vue-firebase-auth-vuex 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | <% for (var chunk of webpack.chunks) { 24 | for (var file of chunk.files) { 25 | if (file.match(/\.(js|css)$/)) { %> 26 | <% }}} %> 27 | 28 | 29 | 30 | 33 |
34 | 35 | <%= htmlWebpackPlugin.options.serviceWorkerLoader %> 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-firebase-auth-vuex", 3 | "version": "1.0.0", 4 | "description": "vue firebase auth vuex", 5 | "author": "aofdev ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "node build/dev-server.js", 9 | "start": "node build/dev-server.js", 10 | "build": "node build/build.js", 11 | "lint": "eslint --ext .js,.vue src" 12 | }, 13 | "dependencies": { 14 | "firebase": "^4.12.1", 15 | "vue": "^2.5.16", 16 | "vue-router": "^2.8.1", 17 | "vuetify": "^1.0.14", 18 | "vuex": "^2.5.0" 19 | }, 20 | "devDependencies": { 21 | "autoprefixer": "^7.1.2", 22 | "babel-core": "^6.22.1", 23 | "babel-eslint": "^7.1.1", 24 | "babel-loader": "^7.1.1", 25 | "babel-plugin-transform-runtime": "^6.22.0", 26 | "babel-preset-env": "^1.3.2", 27 | "babel-preset-stage-2": "^6.22.0", 28 | "babel-register": "^6.22.0", 29 | "chalk": "^2.0.1", 30 | "connect-history-api-fallback": "^1.3.0", 31 | "copy-webpack-plugin": "^4.0.1", 32 | "css-loader": "^0.28.0", 33 | "cssnano": "^3.10.0", 34 | "eslint": "^3.19.0", 35 | "eslint-config-standard": "^6.2.1", 36 | "eslint-friendly-formatter": "^3.0.0", 37 | "eslint-loader": "^1.7.1", 38 | "eslint-plugin-html": "^3.1.0", 39 | "eslint-plugin-promise": "^3.4.0", 40 | "eslint-plugin-standard": "^2.0.1", 41 | "eventsource-polyfill": "^0.9.6", 42 | "express": "^4.14.1", 43 | "extract-text-webpack-plugin": "^2.0.0", 44 | "file-loader": "^0.11.1", 45 | "friendly-errors-webpack-plugin": "^1.1.3", 46 | "html-webpack-plugin": "^2.28.0", 47 | "http-proxy-middleware": "^0.17.3", 48 | "opn": "^5.1.0", 49 | "optimize-css-assets-webpack-plugin": "^2.0.0", 50 | "ora": "^1.2.0", 51 | "rimraf": "^2.6.0", 52 | "semver": "^5.3.0", 53 | "shelljs": "^0.7.6", 54 | "stylus": "^0.54.5", 55 | "stylus-loader": "^3.0.1", 56 | "sw-precache-webpack-plugin": "^0.11.4", 57 | "uglify-es": "^3.0.25", 58 | "url-loader": "^0.5.8", 59 | "vue-loader": "^12.1.0", 60 | "vue-style-loader": "^3.0.1", 61 | "vue-template-compiler": "^2.3.3", 62 | "webpack": "^2.6.1", 63 | "webpack-bundle-analyzer": "^2.2.1", 64 | "webpack-dev-middleware": "^1.10.0", 65 | "webpack-hot-middleware": "^2.18.0", 66 | "webpack-merge": "^4.1.0" 67 | }, 68 | "engines": { 69 | "node": ">= 4.0.0", 70 | "npm": ">= 3.0.0" 71 | }, 72 | "browserslist": [ 73 | "> 1%", 74 | "last 2 versions", 75 | "not ie <= 8" 76 | ] 77 | } 78 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 57 | 58 | 90 | 91 | 94 | -------------------------------------------------------------------------------- /src/store/user/index.js: -------------------------------------------------------------------------------- 1 | import * as firebase from 'firebase' 2 | 3 | export default { 4 | state: { 5 | user: null 6 | }, 7 | mutations: { 8 | setUser (state, payload) { 9 | state.user = payload 10 | } 11 | }, 12 | actions: { 13 | signUserUp ({commit}, payload) { 14 | commit('setLoading', true) 15 | commit('clearError') 16 | firebase.auth().createUserWithEmailAndPassword(payload.email, payload.password) 17 | .then( 18 | user => { 19 | commit('setLoading', false) 20 | const newUser = { 21 | id: user.uid, 22 | name: user.displayName, 23 | email: user.email, 24 | photoUrl: user.photoURL 25 | } 26 | commit('setUser', newUser) 27 | } 28 | ) 29 | .catch( 30 | error => { 31 | commit('setLoading', false) 32 | commit('setError', error) 33 | console.log(error) 34 | } 35 | ) 36 | }, 37 | signUserIn ({commit}, payload) { 38 | commit('setLoading', true) 39 | commit('clearError') 40 | firebase.auth().signInWithEmailAndPassword(payload.email, payload.password) 41 | .then( 42 | user => { 43 | commit('setLoading', false) 44 | const newUser = { 45 | id: user.uid, 46 | name: user.displayName, 47 | email: user.email, 48 | photoUrl: user.photoURL 49 | } 50 | commit('setUser', newUser) 51 | } 52 | ) 53 | .catch( 54 | error => { 55 | commit('setLoading', false) 56 | commit('setError', error) 57 | console.log(error) 58 | } 59 | ) 60 | }, 61 | signUserInGoogle ({commit}) { 62 | commit('setLoading', true) 63 | commit('clearError') 64 | firebase.auth().signInWithPopup(new firebase.auth.GoogleAuthProvider()) 65 | .then( 66 | user => { 67 | commit('setLoading', false) 68 | const newUser = { 69 | id: user.uid, 70 | name: user.displayName, 71 | email: user.email, 72 | photoUrl: user.photoURL 73 | } 74 | commit('setUser', newUser) 75 | } 76 | ) 77 | .catch( 78 | error => { 79 | commit('setLoading', false) 80 | commit('setError', error) 81 | console.log(error) 82 | } 83 | ) 84 | }, 85 | signUserInFacebook ({commit}) { 86 | commit('setLoading', true) 87 | commit('clearError') 88 | firebase.auth().signInWithPopup(new firebase.auth.FacebookAuthProvider()) 89 | .then( 90 | user => { 91 | commit('setLoading', false) 92 | const newUser = { 93 | id: user.uid, 94 | name: user.displayName, 95 | email: user.email, 96 | photoUrl: user.photoURL 97 | } 98 | commit('setUser', newUser) 99 | } 100 | ) 101 | .catch( 102 | error => { 103 | commit('setLoading', false) 104 | commit('setError', error) 105 | console.log(error) 106 | } 107 | ) 108 | }, 109 | signUserInGithub ({commit}) { 110 | commit('setLoading', true) 111 | commit('clearError') 112 | firebase.auth().signInWithPopup(new firebase.auth.GithubAuthProvider()) 113 | .then( 114 | user => { 115 | commit('setLoading', false) 116 | const newUser = { 117 | id: user.uid, 118 | name: user.displayName, 119 | email: user.email, 120 | photoUrl: user.photoURL 121 | } 122 | commit('setUser', newUser) 123 | } 124 | ) 125 | .catch( 126 | error => { 127 | commit('setLoading', false) 128 | commit('setError', error) 129 | console.log(error) 130 | } 131 | ) 132 | }, 133 | signUserInTwitter ({commit}) { 134 | commit('setLoading', true) 135 | commit('clearError') 136 | firebase.auth().signInWithPopup(new firebase.auth.TwitterAuthProvider()) 137 | .then( 138 | user => { 139 | commit('setLoading', false) 140 | const newUser = { 141 | id: user.uid, 142 | name: user.displayName, 143 | email: user.email, 144 | photoUrl: user.photoURL 145 | } 146 | commit('setUser', newUser) 147 | } 148 | ) 149 | .catch( 150 | error => { 151 | commit('setLoading', false) 152 | commit('setError', error) 153 | console.log(error) 154 | } 155 | ) 156 | }, 157 | autoSignIn ({commit}, payload) { 158 | commit('setUser', { 159 | id: payload.uid, 160 | name: payload.displayName, 161 | email: payload.email, 162 | photoUrl: payload.photoURL 163 | }) 164 | }, 165 | resetPasswordWithEmail ({ commit }, payload) { 166 | const { email } = payload 167 | commit('setLoading', true) 168 | firebase.auth().sendPasswordResetEmail(email) 169 | .then( 170 | () => { 171 | commit('setLoading', false) 172 | console.log('Email Sent') 173 | } 174 | ) 175 | .catch( 176 | error => { 177 | commit('setLoading', false) 178 | commit('setError', error) 179 | console.log(error) 180 | } 181 | ) 182 | }, 183 | logout ({commit}) { 184 | firebase.auth().signOut() 185 | commit('setUser', null) 186 | } 187 | }, 188 | getters: { 189 | user (state) { 190 | return state.user 191 | } 192 | } 193 | } 194 | -------------------------------------------------------------------------------- /src/components/User/Signup.vue: -------------------------------------------------------------------------------- 1 | 100 | 101 | 153 | -------------------------------------------------------------------------------- /src/components/User/Signin.vue: -------------------------------------------------------------------------------- 1 | 98 | 99 | 153 | --------------------------------------------------------------------------------