Commit 5c7e8eb0 authored by erlendoeien's avatar erlendoeien
Browse files

Initial commit

parents
node_modules
.DS_Store
dist
dist-ssr
*.local
{
"recommendations": ["johnsoncodehk.volar"]
}
# Vue 3 + Typescript + Vite
This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
## Recommended IDE Setup
- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
## Type Support For `.vue` Imports in TS
Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's `.vue` type support plugin by running `Volar: Switch TS Plugin on/off` from VSCode command palette.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
{
"name": "clouds-movies",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"preview": "vite preview"
},
"dependencies": {
"firebase": "^9.6.1",
"vue": "^3.2.25",
"vue-router": "4"
},
"devDependencies": {
"@vitejs/plugin-vue": "^2.0.0",
"typescript": "^4.4.4",
"vite": "^2.7.2",
"vue-tsc": "^0.29.8"
}
}
<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
// import HelloWorld from './components/HelloWorld.vue'
import { onBeforeUnmount, ref } from "vue";
import { getAuth } from "firebase/auth";
import { useRouter } from "vue-router";
const auth = getAuth();
const router = useRouter();
const loginName = ref("");
// const currentUser = ref(await getCurrentUser())
const authListener = auth.onAuthStateChanged(function (user) {
if (user) {
loginName.value = user.displayName || "Unknown name"; // if we have a user
} else {
loginName.value = ""; // if we do not
}
});
const signOut = () => {
auth.signOut();
router.push("/");
};
// Clean up
onBeforeUnmount(() => authListener());
</script>
<template>
<div>
<nav>
<span v-if="loginName">
<!-- Movies shall be the logo -->
<router-link to="/movies"> Movies </router-link> |
<router-link to="/favorites">Favorites </router-link> |
<span>{{ loginName }}</span> |
<button @click="signOut">Log out</button>
</span>
</nav>
<router-view />
</div>
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
/// <reference types="vite/client" />
declare module '*.vue' {
import { DefineComponent } from 'vue'
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
const component: DefineComponent<{}, {}, any>
export default component
}
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import { initializeApp } from "firebase/app";
import { getAuth, User } from "@firebase/auth";
import { getAnalytics } from "firebase/analytics";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIzaSyDFmp4FBhsaMZfpAcvYdA7MMGGIy3kM80k",
authDomain: "clouds-movies.firebaseapp.com",
projectId: "clouds-movies",
storageBucket: "clouds-movies.appspot.com",
messagingSenderId: "814442811620",
appId: "1:814442811620:web:9369b30eb3594f1b9adcf1",
measurementId: "G-QN8WD1N9KW",
};
// Initialize Firebase
const firebaseApp = initializeApp(firebaseConfig);
// const analytics = getAnalytics(firebaseApp);
export const getCurrentUser = (): Promise<User | null> => {
const auth = getAuth();
return new Promise((resolve, reject) => {
if (auth.currentUser) {
resolve(auth.currentUser);
}
const unsubscribe = auth.onAuthStateChanged((user) => {
unsubscribe();
resolve(user);
}, reject);
});
};
const app = createApp(App);
app.use(router);
app.mount("#app");
import { createRouter, createWebHistory } from "vue-router";
import getCurrentUser from "../tools/getCurrentUser"
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: "/",
name: "root",
component: () => import("../views/Dashboard.vue"),
},
{
path: "/movies",
name: "movies",
component: () => import("../views/Movies.vue"),
meta: {
requiresAuth: true,
},
},
{
path: "/favorites",
name: "favorites",
component: () => import("../views/Favorites.vue"),
meta: {
requiresAuth: true,
},
},
],
});
router.beforeEach(async (to, from, next) => {
const requiresAuth = to.matched.some((record) => record.meta.requiresAuth);
const currentUser = await getCurrentUser()
if (currentUser && to.name === "root") next({ name: "movies" });
else if (requiresAuth && !currentUser) {
next({ name: "root" });
} else {
next();
}
});
export default router;
import { getAuth, User } from "@firebase/auth";
export default function getCurrentUser(): Promise<User | null> {
const auth = getAuth();
return new Promise((resolve, reject) => {
if (auth.currentUser) {
resolve(auth.currentUser);
}
const unsubscribe = auth.onAuthStateChanged((user) => {
unsubscribe();
resolve(user);
}, reject);
});
}
<template>
<h1>Dashboard</h1>
<div>
<h2>Sign in</h2>
<button @click="signIn">Sign in with Google</button>
</div>
</template>
<script setup lang="ts">
import { GoogleAuthProvider } from "firebase/auth";
const provider = new GoogleAuthProvider();
import { getAuth, signInWithPopup } from "firebase/auth";
import { useRouter } from "vue-router";
const auth = getAuth();
const router = useRouter();
const signIn = () =>
signInWithPopup(auth, provider)
.then((result) => {
// This gives you a Google Access Token. You can use it to access the Google API.
const credential = GoogleAuthProvider.credentialFromResult(result);
const token = credential?.accessToken;
// The signed-in user info.
const user = result.user;
console.log(user);
router.push("/movies");
// ...
})
.catch((error) => {
// Handle Errors here.
const errorCode = error.code;
const errorMessage = error.message;
// The email of the user's account used.
const email = error.email;
// The AuthCredential type that was used.
const credential = GoogleAuthProvider.credentialFromError(error);
// ...
});
</script>
<style></style>
<template>
<h1>Favorites</h1>
</template>
<template>
<h1>Movies</h1>
</template>
<script setup lang="ts">
</script>
<style></style>
{
"compilerOptions": {
"target": "esnext",
"useDefineForClassFields": true,
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"lib": ["esnext", "dom"]
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()]
})
This diff is collapsed.
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment