├── .browserslistrc
├── babel.config.js
├── postcss.config.js
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   └── logo.png
    ├── views
    │   ├── About.vue
    │   ├── Home.vue
    │   ├── SignUp.vue
    │   └── Login.vue
    ├── App.vue
    ├── main.js
    ├── router.js
    └── components
    │   └── HelloWorld.vue
├── .editorconfig
├── .gitignore
├── .eslintrc.js
├── README.md
└── package.json


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not ie <= 8
4 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app',
4 |   ],
5 | };
6 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     autoprefixer: {},
4 |   },
5 | };
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/silvanavlima/vue-auth-firebase/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/silvanavlima/vue-auth-firebase/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/views/About.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="about">
3 |     <h1>This is an about page</h1>
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx,vue}]
2 | indent_style = space
3 | indent_size = 2
4 | end_of_line = lf
5 | trim_trailing_whitespace = true
6 | insert_final_newline = true
7 | max_line_length = 100
8 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true,
 5 |   },
 6 |   extends: [
 7 |     // 'plugin:vue/essential',
 8 |     // '@vue/airbnb',
 9 |   ],
10 |   rules: {
11 |   //   'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
12 |   //   'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
13 |   },
14 |   parserOptions: {
15 |     parser: 'babel-eslint',
16 |   },
17 | };
18 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-auth-firebase
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Run your tests
19 | ```
20 | npm run test
21 | ```
22 | 
23 | ### Lints and fixes files
24 | ```
25 | npm run lint
26 | ```
27 | 
28 | ### Customize configuration
29 | See [Configuration Reference](https://cli.vuejs.org/config/).
30 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     <HelloWorld msg="Welcome to Your Vue.js App"/>
 4 |     <button @click="sair">Sair</button>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | 
10 | // @ is an alias to /src
11 | import firebase from 'firebase';
12 | 
13 | import HelloWorld from '@/components/HelloWorld.vue'
14 | 
15 | export default {
16 |   name: 'home',
17 |   components: {
18 |     HelloWorld
19 |   },
20 |   methods: {
21 |     sair: function() {
22 |       firebase.auth().signOut().then(() => {
23 |         this.$router.replace('login')
24 |       })
25 |     }
26 |   }
27 | }
28 | </script>


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>vue-auth-firebase</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but vue-auth-firebase doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <div id="nav">
 4 |       <router-link to="/">Home</router-link> |
 5 |       <router-link to="/about">About</router-link>
 6 |     </div>
 7 |     <router-view/>
 8 |   </div>
 9 | </template>
10 | 
11 | <style>
12 | #app {
13 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
14 |   -webkit-font-smoothing: antialiased;
15 |   -moz-osx-font-smoothing: grayscale;
16 |   text-align: center;
17 |   color: #2c3e50;
18 | }
19 | #nav {
20 |   padding: 30px;
21 | }
22 | 
23 | #nav a {
24 |   font-weight: bold;
25 |   color: #2c3e50;
26 | }
27 | 
28 | #nav a.router-link-exact-active {
29 |   color: #42b983;
30 | }
31 | </style>
32 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-auth-firebase",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "firebase": "^5.9.2",
12 |     "vue": "^2.6.6",
13 |     "vue-router": "^3.0.1"
14 |   },
15 |   "devDependencies": {
16 |     "@vue/cli-plugin-babel": "^3.5.0",
17 |     "@vue/cli-plugin-eslint": "^3.5.0",
18 |     "@vue/cli-service": "^3.5.0",
19 |     "@vue/eslint-config-airbnb": "^4.0.0",
20 |     "babel-eslint": "^10.0.1",
21 |     "eslint": "^5.8.0",
22 |     "eslint-plugin-vue": "^5.0.0",
23 |     "vue-template-compiler": "^2.5.21"
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import App from './App.vue';
 3 | import router from './router';
 4 | import firebase from 'firebase';
 5 | 
 6 | Vue.config.productionTip = false;
 7 | 
 8 | // Initialize Firebase
 9 | var config = {
10 |   apiKey: 'AIzaSyC8q3jql-ZXK3iprsoIFZ1NnYRgMmeTAIw',
11 |   authDomain: 'vue-auth-firebase-7d733.firebaseapp.com',
12 |   databaseURL: 'https://vue-auth-firebase-7d733.firebaseio.com',
13 |   projectId: 'vue-auth-firebase-7d733',
14 |   storageBucket: 'vue-auth-firebase-7d733.appspot.com',
15 |   messagingSenderId: '93229610542'
16 | };
17 | firebase.initializeApp(config);
18 | 
19 | let app = '';
20 | firebase.auth().onAuthStateChanged(() => {
21 |   if (!app) {
22 |     app = new Vue({
23 |       router,
24 |       render: h => h(App)
25 |     }).$mount('#app');
26 |   }
27 | });
28 | 


--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import Router from 'vue-router';
 3 | import firebase from 'firebase';
 4 | 
 5 | import Home from './views/Home.vue';
 6 | import Login from './views/Login';
 7 | import SignUp from './views/SignUp';
 8 | 
 9 | Vue.use(Router);
10 | 
11 | const router = new Router({
12 |   routes: [
13 |     {
14 |       path: '*',
15 |       redirect: '/login'
16 |     },
17 |     {
18 |       path: '/',
19 |       redirect: '/login'
20 |     },
21 |     {
22 |       path: '/login',
23 |       name: 'Login',
24 |       component: Login
25 |     },
26 |     {
27 |       path: '/registrar',
28 |       name: 'SignUp',
29 |       component: SignUp
30 |     },
31 |     {
32 |       path: '/home',
33 |       name: 'Home',
34 |       component: Home,
35 |       meta: {
36 |         requiresAuth: true
37 |       }
38 |     }
39 |   ]
40 | });
41 | 
42 | router.beforeEach((to, from, next) => {
43 |   const currentUser = firebase.auth().currentUser;
44 |   const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
45 | 
46 |   if (requiresAuth && !currentUser) next('login');
47 |   else if (!requiresAuth && currentUser) next('home');
48 |   else next();
49 | });
50 | 
51 | export default router;
52 | 


--------------------------------------------------------------------------------
/src/views/SignUp.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="sign-up">
 3 |     <p>Crie uma nova conta</p>
 4 |     <input
 5 |       type="text"
 6 |       placeholder="Email"
 7 |       v-model="email"
 8 |     >
 9 |     <br>
10 |     <input
11 |       type="password"
12 |       placeholder="Senha"
13 |       v-model="senha"
14 |     >
15 |     <br>
16 |     <button @click="signUp">Registrar</button>
17 |     <span>
18 |       ou retorne ao
19 |       <router-link to="/login"> login.</router-link>
20 |     </span>
21 |   </div>
22 | </template>
23 | 
24 | <script>
25 | import firebase from 'firebase';
26 | 
27 | export default {
28 |   name: 'signUp',
29 |   data () {
30 |     return {
31 |       email: '',
32 |       senha: '',
33 |     };
34 |   },
35 |   methods: {
36 |     signUp () {
37 |       firebase.auth().createUserWithEmailAndPassword(this.email, this.senha).then(
38 |         (user) => {
39 |           this.$router.replace('home'),
40 |             alert('Sua conta foi cadastrata com sucesso!')
41 |         },
42 |         (err) => {
43 |           alert('Aconteceu algo inesperado. ' + err.message)
44 |         }
45 |       );
46 |     },
47 |   },
48 | };
49 | </script>
50 | 
51 |  <style scoped>
52 | .sign-up {
53 |   margin-top: 40px;
54 | }
55 | input {
56 |   margin: 10px 0;
57 |   width: 20%;
58 |   padding: 15px;
59 | }
60 | button {
61 |   font-family: "Roboto", sans-serif;
62 |   text-transform: uppercase;
63 |   outline: 0;
64 |   background: #1606f3;
65 |   border: 0;
66 |   padding: 15px;
67 |   color: #ffffff;
68 |   font-size: 14px;
69 |   -webkit-transition: all 0.3 ease;
70 |   transition: all 0.3 ease;
71 |   cursor: pointer;
72 | }
73 | span {
74 |   display: block;
75 |   margin-top: 20px;
76 |   font-size: 11px;
77 | }
78 | </style>
79 | 


--------------------------------------------------------------------------------
/src/views/Login.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="login">
 3 |     <h1>Login</h1>
 4 |     <input
 5 |       type="text"
 6 |       placeholder="Email"
 7 |       v-model="email"
 8 |     >
 9 |     <br>
10 |     <input
11 |       type="password"
12 |       placeholder="Senha"
13 |       v-model="senha"
14 |     >
15 |     <br>
16 |     <div class="btn-login">
17 |       <button @click="login">Login</button>
18 |     </div>
19 |     <p>
20 |       Você não tem conta?
21 |       <span>
22 |         <router-link to="/registrar">crie uma conta</router-link>
23 |       </span>
24 |     </p>
25 |   </div>
26 | </template>
27 | 
28 | <script>
29 | import firebase from 'firebase';
30 | 
31 | export default {
32 |   name: "login",
33 |   data () {
34 |     return {
35 |       email: '',
36 |       senha: ''
37 |     };
38 |   },
39 |    methods: {
40 |       login: function() {
41 |         firebase.auth().signInWithEmailAndPassword(this.email, this.senha).then(
42 |           (user) => {
43 |             this.$router.replace('home')
44 |             alert(`Bem Vindo, ${{email}}`)
45 |           },
46 |           (err) => {
47 |             alert('Não foi possível realizar o login. ' + err.message)
48 |           }
49 |         );
50 |       }
51 |     }
52 |   }
53 | </script>
54 | 
55 | <style scoped>
56 | .login {
57 |   margin-top: 40px;
58 | }
59 | input {
60 |   margin: 10px 0;
61 |   width: 20%;
62 |   padding: 15px;
63 | }
64 | 
65 | button {
66 |   font-family: "Roboto", sans-serif;
67 |   text-transform: uppercase;
68 |   outline: 0;
69 |   background: #4caf50;
70 |   border: 0;
71 |   padding: 15px;
72 |   color: #ffffff;
73 |   font-size: 14px;
74 |   -webkit-transition: all 0.3 ease;
75 |   transition: all 0.3 ease;
76 |   cursor: pointer;
77 | }
78 | p {
79 |   margin-top: 40px;
80 |   font-size: 13px;
81 | }
82 | p a {
83 |   text-decoration: underline;
84 |   cursor: pointer;
85 | }
86 | </style>
87 | 


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <h1>{{ msg }}</h1>
 4 |     <p>
 5 |       For a guide and recipes on how to configure / customize this project,<br>
 6 |       check out the
 7 |       <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
 8 |     </p>
 9 |     <h3>Installed CLI Plugins</h3>
10 |     <ul>
11 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
12 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
13 |     </ul>
14 |     <h3>Essential Links</h3>
15 |     <ul>
16 |       <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
17 |       <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
18 |       <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
19 |       <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
20 |       <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
21 |     </ul>
22 |     <h3>Ecosystem</h3>
23 |     <ul>
24 |       <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
25 |       <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
26 |       <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
27 |       <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
28 |       <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
29 |     </ul>
30 |   </div>
31 | </template>
32 | 
33 | <script>
34 | export default {
35 |   name: 'HelloWorld',
36 |   props: {
37 |     msg: String,
38 |   },
39 | };
40 | </script>
41 | 
42 | <!-- Add "scoped" attribute to limit CSS to this component only -->
43 | <style scoped>
44 | h3 {
45 |   margin: 40px 0 0;
46 | }
47 | ul {
48 |   list-style-type: none;
49 |   padding: 0;
50 | }
51 | li {
52 |   display: inline-block;
53 |   margin: 0 10px;
54 | }
55 | a {
56 |   color: #42b983;
57 | }
58 | </style>
59 | 


--------------------------------------------------------------------------------