Implement user auth with Firebase

src/components/navbar.vue

@@ -1,30 +1,56 @@
 <template>
-    <nav class="navbar navbar-light bg-light">
+<nav class="navbar navbar-light bg-light">
   <div class="container-fluid">
-    <router-link to ="/" class="navbar-brand">
+    <router-link to="/" class="navbar-brand">
       <img src="https://cdn.discordapp.com/attachments/1017419092447207436/1063092138029625394/pixil-frame-0.png" alt="mascot" width="55" height="40" class="d-inline-block align-text-middle">
       <b>Irish Rail Tracker</b>
     </router-link>
     
-    <a class = "navbarLink"><router-link to="/">Home</router-link></a>
-    <a class = "navbarLink"><router-link to="/insights">Insights</router-link></a>
-    <a class = "navbarLink"><router-link to="/login">Login</router-link></a>
+    <a class="navbarLink"><router-link to="/">Home</router-link></a>
+    <a class="navbarLink"><router-link to="/insights">Insights</router-link></a>
+    <a v-if="isLoggedIn" class="navbarLink"><router-link to="/secure">Secure</router-link></a>
+    <a v-if="isLoggedIn" class="navbarLink"><router-link @click="logout" to="/">Logout</router-link></a>
+    <a v-if="!isLoggedIn" class="navbarLink"><router-link to="/login">Login</router-link></a>
+    <a v-if="!isLoggedIn" class="navbarLink"><router-link to="/signup">Sign Up</router-link></a>
   </div>
 </nav>
 </template>
 
 <script>
+import app from "../api/firebase"
+import {getAuth, onAuthStateChanged, signOut} from "firebase/auth"
+
 export default {
-    name: "navbar"
+  name: "Navbar",
+
+  data() {
+    return {
+      isLoggedIn: false
+    }
+  },
+
+  created() {
+    // check if user is logged in
+    const auth = getAuth(app);
+      onAuthStateChanged(auth, (user) => {
+        user ? this.isLoggedIn = true : this.isLoggedIn = false
+      })
+  },
+
+  methods: {
+    logout() {
+      signOut(getAuth(app)).then(() => {
+          // send user back to home page
+          this.$router.push("/")
+      })
+    }
+  }
 }
 </script>
 
 <style scoped>
-
-    .navbarLink{
-    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
-    font-size: 150%;
-    
-    }
-
+.navbarLink{
+  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+  font-size: 150%;
+}
 </style>

src/pages/InsightsPage.vue

@@ -1,6 +1,5 @@
 <template>
-    <navbar></navbar>
-
+<Navbar />
 
 <h1>Insights</h1>
 <div v-if="this.insights">
@@ -27,7 +26,7 @@
     
 <script>
 import {store} from '../store/store'
-import navbar from '../components/navbar.vue'
+import Navbar from '../components/Navbar.vue'
 export default {
     name: "InsightsPage",
 
@@ -43,8 +42,7 @@ export default {
     },
 
     components: {
-      // SidebarPanel
-      navbar
+      Navbar
     },
 
     created() {
@@ -58,14 +56,7 @@ export default {
 </script>
     
 <style scoped>
-.navbarLink{
-  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
-  font-size: 24px;
-  
-}
-
 body{
     background-color: rgb(44, 102, 102);
 }
-
 </style>

src/pages/MapPage.vue

@@ -1,10 +1,6 @@
 <template>
-  <navbar></navbar>
-
-  <button id="hoverButton" @click="postLiveTrainData">Populate Database</button>
-
-
-<div><SidebarPanel /></div>
+<Navbar />
+<button id="hoverButton" @click="postLiveTrainData">Populate Database</button>
 
 <!--Sidebar, fades out on click of X button-->
 <transition id="sidebar" name="slideLeft">
@@ -49,9 +45,7 @@ import { ref } from 'vue';
 import {fromLonLat, toLonLat} from 'ol/proj.js';
 import app from '../api/firebase';
 import { getFunctions, httpsCallable, connectFunctionsEmulator } from "firebase/functions";
-// import SidebarPanel from '../components/SidebarPanel.vue'
-import navbar from '../components/navbar.vue'
-import { set } from 'ol/transform';
+import Navbar from '../components/Navbar.vue'
 
 export default {
     name: "MapPage",
@@ -86,8 +80,7 @@ export default {
     },
 
     components: {
-      // SidebarPanel
-      navbar
+      Navbar
     },
 
     created() {
@@ -325,6 +318,4 @@ export default {
   bottom:0px;
   width:100%;
 }
-
-
 </style>

src/pages/SecurePage.vue

@@ -0,0 +1,32 @@
+<template>
+<Navbar />
+<h1>Secure</h1>
+</template>
+
+<script>
+import Navbar from '../components/Navbar.vue'
+import app from '../api/firebase'
+import {getFunctions, httpsCallable, connectFunctionsEmulator} from "firebase/functions"
+export default {
+    name: "SecurePage",
+
+    components: {
+      Navbar,
+    },
+
+    created() {
+        const functions = getFunctions(app)
+        let host = window.location.hostname
+        if (host === '127.0.0.1' || host === 'localhost') {
+            connectFunctionsEmulator(functions, host, 5001);
+        }
+        const secureFunction = httpsCallable(functions, 'securefunction')
+        secureFunction().then((response) => {
+            console.log(response);
+        })
+    }
+}
+</script>
+
+<style scoped>
+</style>

src/pages/SignUpPage.vue

@@ -0,0 +1,144 @@
+<template>
+<Navbar />
+<div id="background">
+  <div class="loginbox">
+    <img src="https://cdn.discordapp.com/attachments/1017419092447207436/1063092138029625394/pixil-frame-0.png" class="avatar">
+    <h1>Sign Up</h1>
+    <p>Email Address</p>
+    <input type="email" v-model="email" aria-describedby="emailHelp" placeholder="Enter email">
+    <p>Password</p>
+    <input type="password" v-model="password" placeholder="Enter password">
+    <input @click="signup" type="submit" name="" value="Sign Up">
+    <a><router-link to="/login">Already have an account?</router-link></a>
+  </div>
+</div>
+</template>
+
+<script>
+import app from '../api/firebase';
+import {getAuth, createUserWithEmailAndPassword} from "firebase/auth"
+import Navbar from '../components/Navbar.vue'
+
+export default {
+  name: "SignupPage",
+
+  data() {
+    return {
+      email: "",
+      password: ""
+    }
+  },
+
+  components: {
+    Navbar
+  },
+
+  methods: {
+    signup() {
+      const auth = getAuth(app)
+      createUserWithEmailAndPassword(auth, this.email, this.password)
+      .then((userCredential) => {
+          const user = userCredential.user
+          this.$router.push({path:'/secure'})
+      })
+      .catch((error) => {
+        const errorCode = error.code
+        const errorMessage = error.message
+        console.log(errorCode)
+        console.log(errorMessage)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+#background {
+margin: 0;
+padding: 0;
+width:100%;
+height: 100%;
+position: absolute;
+background-color: #e0e0e0;
+font-family: sans-serif;
+}
+
+.loginbox {
+  height: 420px;
+  width: 320px;
+  background: #000;
+  color: #fff;
+  top: 50%;
+  left:50%;
+  position: absolute;
+  transform: translate(-50%,-50%);
+  box-sizing: border-box;
+  padding: 70px 30px;
+}
+
+h1 {
+  margin: 0;
+  padding: 0 0 20px;
+  font-size: 22px;
+  text-align:center;
+}
+
+.loginbox p {
+  margin: 0;
+  padding:0;
+  font-weight: bold;
+
+}
+
+.loginbox input {
+  width:100%;
+  margin-bottom: 20px;
+}
+
+.loginbox input[type="email"], input[type="password"] {
+  border: none;
+  border-bottom: 1px solid #fff;
+  background: transparent;
+  outline: none;
+  height: 40px;
+  color: #fff;
+  font-size: 16px;
+
+}
+
+.loginbox input[type="submit"]:hover {
+  cursor: pointer;
+  background: #66a3ff;
+  color: #000;
+
+}
+
+.loginbox a {
+  text-decoration: none;
+  font-size: 12px;
+  line-height: 20px;
+  color: darkgray;
+}
+
+.loginbox a:hover {
+  color: #ffc107;
+}
+
+.loginbox input[type="submit"] {
+  border: none;
+  outline: none;
+  height:40px;
+  background: #0052cc;
+  font-size: 18px;
+  border-radius:20px;
+}
+
+.avatar {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  position: absolute;
+  top:-50px;
+  left: calc(50% - 50px);
+}
+</style>

src/pages/loginpage.vue

@@ -1,119 +1,144 @@
 <template>
-<div id = "background">
-    <div class = "loginbox">
-        <img src="https://cdn.discordapp.com/attachments/1017419092447207436/1063092138029625394/pixil-frame-0.png" class="avatar">
-        <h1>Login Here</h1>
-        <form>
-            <p>Username</p>
-            <input type="text" name="" placeholder="Enter Username">
-            <p>Password</p>
-            <input type="password" name="" placeholder="Password">
-            <input type="submit" name="" value="Login" @click.stop.prevent="submit()">
-            <a href="#">Lost your password?</a><br>
-            <a><router-link to="/signup">Don't have an account?</router-link></a>
-        </form>
-    </div>
+<Navbar />
+<div id="background">
+  <div class="loginbox">
+    <img src="https://cdn.discordapp.com/attachments/1017419092447207436/1063092138029625394/pixil-frame-0.png" class="avatar">
+    <h1>Login</h1>
+    <p>Email Address</p>
+    <input type="email" v-model="email" aria-describedby="emailHelp" placeholder="Enter email">
+    <p>Password</p>
+    <input type="password" v-model="password" placeholder="Enter password">
+    <input @click="login" type="submit" name="" value="Login">
+    <a><router-link to="/signup">Don't have an account?</router-link></a>
+  </div>
 </div>
 </template>
 
 <script>
+import app from '../api/firebase';
+import {getAuth, signInWithEmailAndPassword} from "firebase/auth"
+import Navbar from '../components/Navbar.vue'
 
 export default {
-    name: "loginpage",
+  name: "LoginPage",
 
-    methods: {
-        submit(){
-            //if you want to send any data into server before redirection then you can do it here
-            this.$router.push("/");
-            }
+  data() {
+    return {
+      email: "",
+      password: ""
     }
+  },
+
+  components: {
+    Navbar
+  },
+
+  methods: {
+    login() {
+      const auth = getAuth(app)
+      signInWithEmailAndPassword(auth, this.email, this.password)
+      .then((userCredential) => {
+          const user = userCredential.user
+          this.$router.push({path:'/secure'})
+      })
+      .catch((error) => {
+        const errorCode = error.code
+        const errorMessage = error.message
+        console.log(errorCode)
+        console.log(errorMessage)
+      })
+    }
+  }
 }
 </script>
 
 <style scoped>
-    #background{
-    margin: 0;
-    padding: 0;
-    width:100%;
-    height: 100%;
-    position: absolute;
-    background-color: #e0e0e0;
-    font-family: sans-serif;
-    }
-    .loginbox{
-      height: 420px;
-      width: 320px;
-      background: #000;
-      color: #fff;
-      top: 50%;
-      left:50%;
-      position: absolute;
-      transform: translate(-50%,-50%);
-      box-sizing: border-box;
-      padding: 70px 30px;
-    }
-    h1{
-      margin: 0;
-      padding: 0 0 20px;
-      font-size: 22px;
-      text-align:center;
-    }
-    
-    .loginbox p{
-      margin: 0;
-      padding:0;
-      font-weight: bold;
-    
-    }
-    
-    .loginbox input{
-      width:100%;
-      margin-bottom: 20px;
-    }
-    .loginbox input[type="text"], input[type="password"]{
-      border: none;
-      border-bottom: 1px solid #fff;
-      background: transparent;
-      outline: none;
-      height: 40px;
-      color: #fff;
-      font-size: 16px;
-    
-    }
-    
-    .loginbox input[type="submit"]:hover{
-      cursor: pointer;
-      background: #66a3ff;
-      color: #000;
-    
-    }
-    
-    .loginbox a{
-      text-decoration: none;
-      font-size: 12px;
-      line-height: 20px;
-      color: darkgray;
-    }
-    
-    .loginbox a:hover{
-      color: #ffc107;
-    }
-    
-    .loginbox input[type="submit"]
-    {
-      border: none;
-      outline: none;
-      height:40px;
-      background: #0052cc;
-      font-size: 18px;
-      border-radius:20px;
-    }
-    .avatar{
-      width: 100px;
-      height: 100px;
-      border-radius: 50%;
-      position: absolute;
-      top:-50px;
-      left: calc(50% - 50px);
-    }
+#background {
+  margin: 0;
+  padding: 0;
+  width:100%;
+  height: 100%;
+  position: absolute;
+  background-color: #e0e0e0;
+  font-family: sans-serif;
+}
+
+.loginbox {
+  height: 420px;
+  width: 320px;
+  background: #000;
+  color: #fff;
+  top: 50%;
+  left:50%;
+  position: absolute;
+  transform: translate(-50%,-50%);
+  box-sizing: border-box;
+  padding: 70px 30px;
+}
+
+h1 {
+  margin: 0;
+  padding: 0 0 20px;
+  font-size: 22px;
+  text-align:center;
+}
+
+.loginbox p {
+  margin: 0;
+  padding:0;
+  font-weight: bold;
+
+}
+
+.loginbox input {
+  width:100%;
+  margin-bottom: 20px;
+}
+
+.loginbox input[type="email"], input[type="password"] {
+  border: none;
+  border-bottom: 1px solid #fff;
+  background: transparent;
+  outline: none;
+  height: 40px;
+  color: #fff;
+  font-size: 16px;
+
+}
+
+.loginbox input[type="submit"]:hover {
+  cursor: pointer;
+  background: #66a3ff;
+  color: #000;
+
+}
+
+.loginbox a {
+  text-decoration: none;
+  font-size: 12px;
+  line-height: 20px;
+  color: darkgray;
+}
+
+.loginbox a:hover {
+  color: #ffc107;
+}
+
+.loginbox input[type="submit"] {
+  border: none;
+  outline: none;
+  height:40px;
+  background: #0052cc;
+  font-size: 18px;
+  border-radius:20px;
+}
+
+.avatar {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  position: absolute;
+  top:-50px;
+  left: calc(50% - 50px);
+}
 </style>

src/pages/signup.vue

@@ -1,119 +0,0 @@
-<template>
-    <div id = "background">
-        <div class = "loginbox">
-            <img src="https://cdn.discordapp.com/attachments/1017419092447207436/1063092138029625394/pixil-frame-0.png" class="avatar">
-            <h1>Sign Up Here</h1>
-            <form>
-                <p>Username</p>
-                <input type="text" name="" placeholder="Enter Username">
-                <p>Password</p>
-                <input type="password" name="" placeholder="Password">
-                <input type="submit" name="" value="Sign Up" @click.stop.prevent="submit()">
-                <a href="#">Lost your password?</a><br>
-                <a><router-link to="/login">Already have an account?</router-link></a>
-            </form>
-        </div>
-    </div>
-    </template>
-    
-    <script>
-    
-    export default {
-        name: "signuppage",
-    
-        methods: {
-            submit(){
-                //if you want to send any data into server before redirection then you can do it here
-                this.$router.push("/");
-                }
-        }
-    }
-    </script>
-    
-    <style scoped>
-        #background{
-        margin: 0;
-        padding: 0;
-        width:100%;
-        height: 100%;
-        position: absolute;
-        background-color: #e0e0e0;
-        font-family: sans-serif;
-        }
-        .loginbox{
-          height: 420px;
-          width: 320px;
-          background: #000;
-          color: #fff;
-          top: 50%;
-          left:50%;
-          position: absolute;
-          transform: translate(-50%,-50%);
-          box-sizing: border-box;
-          padding: 70px 30px;
-        }
-        h1{
-          margin: 0;
-          padding: 0 0 20px;
-          font-size: 22px;
-          text-align:center;
-        }
-        
-        .loginbox p{
-          margin: 0;
-          padding:0;
-          font-weight: bold;
-        
-        }
-        
-        .loginbox input{
-          width:100%;
-          margin-bottom: 20px;
-        }
-        .loginbox input[type="text"], input[type="password"]{
-          border: none;
-          border-bottom: 1px solid #fff;
-          background: transparent;
-          outline: none;
-          height: 40px;
-          color: #fff;
-          font-size: 16px;
-        
-        }
-        
-        .loginbox input[type="submit"]:hover{
-          cursor: pointer;
-          background: #00df00;
-          color: #000;
-        
-        }
-        
-        .loginbox a{
-          text-decoration: none;
-          font-size: 12px;
-          line-height: 20px;
-          color: darkgray;
-        }
-        
-        .loginbox a:hover{
-          color: #ffc107;
-        }
-        
-        .loginbox input[type="submit"]
-        {
-          border: none;
-          outline: none;
-          height:40px;
-          background: #00a800;;
-          font-size: 18px;
-          border-radius:20px;
-        }
-        .avatar{
-          width: 100px;
-          height: 100px;
-          border-radius: 50%;
-          position: absolute;
-          top:-50px;
-          left: calc(50% - 50px);
-        }
-    </style>

src/router/routes.js

@@ -1,9 +1,29 @@
+import {getAuth, onAuthStateChanged} from "firebase/auth"
+import app from '../api/firebase';
+
+function isAuth(to, from, next) {
+    console.log("Checking auth")
+    const auth = getAuth(app)
+    onAuthStateChanged(auth, (user) => {
+        // user is logged in, continue to page
+        if (user) {
+            return next()
+        }
+        // user is logged out, send back to home page
+        else {
+            return next({path: "/"})
+        }
+    })
+}
+
 function loadPage(component) {
     return () => import(`@/pages/${component}.vue`)
 }
+
 export default [
     {path: "/", component:loadPage("MapPage")},
     {path: "/insights", component:loadPage("InsightsPage")},
-    {path: "/signup", component:loadPage("signup")},
-    {path: "/login", component:loadPage("loginpage")}
+    {path: "/secure", component:loadPage('SecurePage'), beforeEnter: isAuth},
+    {path: "/signup", component:loadPage('SignUpPage')},
+    {path: "/login", component:loadPage('LoginPage')},
 ]