[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"post:firebase-ve-vuejs-ile-kimlik-dogrulama-islemleri":3},{"type":4,"post":5,"relatedPosts":72,"seo":106,"alternates":108,"editable":111},"post",{"id":6,"title":7,"slug":8,"url":9,"excerpt":10,"reading_minutes":11,"blocks":12,"toc":35,"category":55,"tags":59,"cover":70,"published_at":71},3,"Firebase ve VueJS ile Kimlik Doğrulama İşlemleri","firebase-ve-vuejs-ile-kimlik-dogrulama-islemleri","\u002Ftr\u002Fblog\u002Ffirebase-ve-vuejs-ile-kimlik-dogrulama-islemleri","Vue ve Pinia ile Firebase kimlik doğrulaması; GitHub girişi, oturum kontrolü, route middleware’leri ve korumalı sayfaları adım adım kurun.",5,[13,17,20,23,26,29,32],{"type":14,"data":15},"general.rich-text",{"content":16},"\u003Cp>Son zamanlarda VueJS ve Firebase odaklı mini projeler geliştiriyorum. Firebase ile basit bir Chat Uygulaması yaptıktan sonra kendim için Authentication içeren ve middleware işlemlerini de yapabileceğim bir boilerplate hazırlamak isterken Firebase Storage özelliğini de dahil edip mini bir galeri uygulaması yaptım. Bu yazıda Firebase ile Auth işlemlerini Pinia ile nasıl yapabiliriz ondan bahsedeceğim.\u003C\u002Fp>\n\u003Cp>Firebase, Google tarafından mobil ve web uygulamaları oluşturmak için geliştirilmiş bir platform. Birçok konuda çok hızlı bir şekilde kullanmak istediğimiz özelliklerini projenize dahil edebiliyoruz.\u003C\u002Fp>\n\u003Cp>Doküman gayet yeterli. Ben Authentication olarak GitHub Provider'ını kullandım, dilerseniz farklı yöntemleri de sisteminize entegre edebilirsiniz.\nAuth kısmında state management olarak Pinia kullandım.\u003C\u002Fp>",{"type":14,"data":18},{"content":19},"\u003Ch2 id=\"firebase-yapilandirmasi\">Firebase yapılandırması\u003C\u002Fh2>\n\u003Cp>Öncelikle Firebase entegrasyonunu yapıyoruz,\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-javascript\">\u002F\u002F plugins\u002Ffirebase.js\nimport {initializeApp} from "firebase\u002Fapp";\nimport { getAuth }from "firebase\u002Fauth";\n\nconst firebaseConfig = initializeApp({\n    apiKey: "",\n    authDomain: "",\n    projectId: "",\n    storageBucket: "",\n    messagingSenderId: "",\n    appId: "",\n});\n\nconst auth = getAuth(firebaseConfig);\n\nexport {auth}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Buradaki \u003Ccode>firebaseConfig\u003C\u002Fcode> değişkeni Firebase'den aldığımız API Key'lerini içeriyor. Daha sonra bu değişkenleri \u003Ccode>getAuth\u003C\u002Fcode> fonksiyonuna parametre olarak veriyoruz.\u003C\u002Fp>",{"type":14,"data":21},{"content":22},"\u003Ch2 id=\"router-ve-middleware-kurulumu\">Router ve middleware kurulumu\u003C\u002Fh2>\n\u003Cp>Şimdi Auth işlemlerini yapalım. Router kısmında middleware oluşturacağımız için \u003Ccode>plugins\u003C\u002Fcode> klasörü altında \u003Ccode>router.js\u003C\u002Fcode> adında bir dosya oluşturuyoruz. Bunu daha sonra \u003Ccode>main.js\u003C\u002Fcode> dosyasında projeye register ediyoruz.\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-javascript\">\u002F\u002F plugins\u002Frouter.js\nimport {createRouter, createWebHistory} from 'vue-router';\n\nconst routes: [];\n\nconst router = createRouter({\n    history: createWebHistory(),\n    routes: routes,\n});\n\nexport default router;\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Aşağıda oluşturduğumuz fonksiyonda eğer ilgili route'a hiçbir middleware tanımlanmamışsa \u003Ccode>next()\u003C\u002Fcode> fonksiyonu ile request'e herhangi bir işlem yapmadan devam ettiriyoruz. Eğer middleware tanımlanmışsa ilgili middleware fonksiyonunu çalıştırıyoruz.\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-javascript\">\u002F\u002F plugins\u002Frouter.js\nfunction nextFactory(context, middleware, index) {\n    const subsequentMiddleware = middleware[index];\n    if (!subsequentMiddleware) return context.next;\n    return (...parameters) => {\n        context.next(...parameters);\n        const nextMiddleware = nextFactory(context, middleware, index + 1);\n        subsequentMiddleware({...context, next: nextMiddleware});\n    };\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Aşağıdaki fonksiyonda ise middleware'lerimizi \u003Ccode>beforeEach\u003C\u002Fcode> fonksiyonu ile register ediyoruz.\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-javascript\">\u002F\u002F plugins\u002Frouter.js\nrouter.beforeEach((to, from, next) => {\n    if (to.meta.middleware) {\n        const middleware = Array.isArray(to.meta.middleware) ? to.meta.middleware : [to.meta.middleware];\n        const context = {from, next, router, to};\n        const nextMiddleware = nextFactory(context, middleware, 1);\n        \n        return middleware[0]({...context, next: nextMiddleware});\n    }\n    return next();\n});\n\u003C\u002Fcode>\u003C\u002Fpre>",{"type":14,"data":24},{"content":25},"\u003Ch2 id=\"pinia-kimlik-dogrulama-deposu\">Pinia kimlik doğrulama deposu\u003C\u002Fh2>\n\u003Cp>Şimdi sıra Pinia ile state management işlemlerine geldi. \u003Ccode>stores\u003C\u002Fcode> klasörü altında \u003Ccode>authStore.js\u003C\u002Fcode> adında bir dosya oluşturuyoruz. Bu dosyada \u003Ccode>defineStore\u003C\u002Fcode> fonksiyonunu kullanarak bir store oluşturuyoruz. Bu store içerisinde \u003Ccode>state\u003C\u002Fcode> ile değişkenleri, \u003Ccode>getters\u003C\u002Fcode> ile değişkenlerin değerlerini okuyabileceğimiz fonksiyonları, \u003Ccode>actions\u003C\u002Fcode> ile değişkenlerin değerlerini değiştirebileceğimiz ve veri işlemlerini yapabileceğimiz fonksiyonları tanımlıyoruz.\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-javascript\">import { defineStore } from 'pinia'\nimport {\n    onAuthStateChanged,\n    GithubAuthProvider,\n    signInWithPopup,\n    signOut,\n} from "firebase\u002Fauth";\nimport {auth} from "@\u002Fplugins\u002Ffirebase";\nimport router from "@\u002Fplugins\u002Frouter.js";\n\nexport const useAuthStore = defineStore('authStore', {\n    state: () => ({\n        userData: null,\n        loadingUser: false,\n        loadingSession: false,\n    }),\n    actions: {\n        async login() {\n            this.loadingUser = true;\n            try {\n                const provider = new GithubAuthProvider();\n                const { user } = await signInWithPopup(auth, provider);\n                this.userData = user;\n                await router.push("\u002F");\n            }catch (e) {\n                console.log(e)\n            }finally {\n                this.loadingUser = false;\n            }\n        },\n        async logout() {\n            try {\n                await signOut(auth);\n                this.userData = null;\n                await router.push("\u002Flogin");\n            }catch (e) {\n                console.log(e)\n            }\n        },\n        async checkSession() {\n            return new Promise((resolve, reject) => {\n                const unsubscribe = onAuthStateChanged(\n                    auth,\n                    (user) => {\n                        if (user) {\n                            this.userData = user;\n                        } else {\n                            this.userData = null;\n                        }\n                        resolve(user);\n                    },\n                    (e) => reject(e)\n                );\n                unsubscribe();\n            });\n        }\n    }\n})\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Burada \u003Ccode>login\u003C\u002Fcode> fonksiyonunda Github ile giriş işlemini yapıyoruz. \u003Ccode>logout\u003C\u002Fcode> fonksiyonunda ise Firebase Auth ile çıkış işlemini yapıyoruz. \u003Ccode>checkSession\u003C\u002Fcode> fonksiyonunda ise Firebase Auth ile kullanıcının oturum durumunu \u003Ccode>onAuthStateChanced\u003C\u002Fcode> fonksiyonu ile kontrol ediyoruz.\u003C\u002Fp>",{"type":14,"data":27},{"content":28},"\u003Ch2 id=\"storeu-sayfalarda-kullanmak\">Store'u sayfalarda kullanmak\u003C\u002Fh2>\n\u003Cp>Daha sonra bu store'u kullanmak istediğimiz yerde import edip kullanıyoruz. Örneğin bir sayfada kullanmak istediğimizde,\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-javascript\">import { useAuthStore } from '@\u002Fstores\u002FauthStore'\n\nconst authStore = useAuthStore()\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>şeklinde import ediyoruz. Bu şekilde \u003Ccode>authStore\u003C\u002Fcode> değişkeni ile store'daki değişkenlere ve fonksiyonlara erişebiliyoruz.\u003C\u002Fp>\n\u003Cp>Şimdi sıra sayfalara gelince. \u003Ccode>pages\u003C\u002Fcode> klasörü altında \u003Ccode>Login.vue\u003C\u002Fcode> ve \u003Ccode>Home.vue\u003C\u002Fcode> adında iki dosya oluşturuyoruz. Bu dosyalarda da \u003Ccode>setup\u003C\u002Fcode> fonksiyonu içerisinde store'daki değişkenleri ve fonksiyonları kullanarak işlemlerimizi yapıyoruz.\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\"><script setup>\n\u002F\u002F pages\u002FLogin.vue\nimport { useAuthStore } from '@\u002Fstores\u002FauthStore'\n\nconst authStore = useAuthStore()\n\nconst login = () => {\n  authStore.login()\n}\n<\u002Fscript>\n\n<template>\n    <div>\n        <h1>Login<\u002Fh1>\n        <button @click="login">Login<\u002Fbutton>\n    <\u002Fdiv>\n<\u002Ftemplate>\n\u003C\u002Fcode>\u003C\u002Fpre>",{"type":14,"data":30},{"content":31},"\u003Ch2 id=\"kimligi-dogrulanmis-rotalari-korumak\">Kimliği doğrulanmış rotaları korumak\u003C\u002Fh2>\n\u003Cp>Sıra middleware'e geldi. \u003Ccode>middleware\u003C\u002Fcode> klasörü altında \u003Ccode>auth.js\u003C\u002Fcode> adında bir dosya oluşturuyoruz. Bu dosyada da \u003Ccode>useAuthStore\u003C\u002Fcode> ile oluşturduğumuz \u003Ccode>checkSession\u003C\u002Fcode> fonksiyonu ile kullanıcının oturum durumunu kontrol ediyoruz. Eğer kullanıcı oturum açmamışsa \u003Ccode>login\u003C\u002Fcode> sayfasına yönlendiriyoruz.\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-javascript\">\u002F\u002F middleware\u002Fauth.js\nimport {useAuthStore} from "@\u002Fstores\u002FauthStore.js";\n\nexport default async function auth({next, router}) {\n    const userStore = useAuthStore();\n    userStore.loadingSession = true;\n    const user = await userStore.checkSession();\n    if (user) {\n        next();\n    } else {\n        next("\u002Flogin");\n    }\n    userStore.loadingSession = false;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Şimdi sıra \u003Ccode>router.js\u003C\u002Fcode> dosyasına gelince. Bu dosyada da \u003Ccode>meta\u003C\u002Fcode> kısmına \u003Ccode>middleware\u003C\u002Fcode> olarak oluşturduğumuz \u003Ccode>auth\u003C\u002Fcode> middleware'ini ekliyoruz.\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-javascript\">\u002F\u002F plugins\u002Frouter.js\nimport auth from "@\u002Fmiddleware\u002Fauth.js";\n\nconst routes = [\n    {\n        path: "\u002F",\n        name: "Home",\n        component: () => import("@\u002Fpages\u002FHome.vue"),\n        meta: {\n            middleware: auth,\n        },\n    },\n    {\n        path: "\u002Flogin",\n        name: "Login",\n        component: () => import("@\u002Fpages\u002FLogin.vue"),\n    },\n];\n\u003C\u002Fcode>\u003C\u002Fpre>",{"type":14,"data":33},{"content":34},"\u003Ch2 id=\"misafir-rotalarini-korumak\">Misafir rotalarını korumak\u003C\u002Fh2>\n\u003Cp>Şimdi bu işlemin tersini yapalım. Yani \u003Ccode>Login.vue\u003C\u002Fcode> sayfasına giriş yapılmış ise erişilemesin. Bunun için yine bir middleware oluşturuyoruz. \u003Ccode>middleware\u003C\u002Fcode> klasörü altında \u003Ccode>guest.js\u003C\u002Fcode> adında bir dosya oluşturuyoruz. Bu dosyada da \u003Ccode>useAuthStore\u003C\u002Fcode> ile oluşturduğumuz \u003Ccode>checkSession\u003C\u002Fcode> fonksiyonu ile kullanıcının oturum durumunu kontrol ediyoruz. Eğer kullanıcı oturum açmışsa \u003Ccode>Home\u003C\u002Fcode> sayfasına yönlendiriyoruz.\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-javascript\">\u002F\u002F middleware\u002Fguest.js\nimport {useAuthStore} from "@\u002Fstores\u002FauthStore.js";\n\nexport default async function authCheck({next, router}) {\n    const userStore = useAuthStore();\n    userStore.loadingSession = true;\n    const user = await userStore.checkSession();\n    if (user) {\n        next("\u002F");\n    } else {\n        next();\n    }\n    userStore.loadingSession = false;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Fark ettiğiniz üzere tam tersi bir işlem yapıyoruz. Şimdi sıra \u003Ccode>router.js\u003C\u002Fcode> dosyasına gelince. Bu dosyada da \u003Ccode>meta\u003C\u002Fcode> kısmına \u003Ccode>middleware\u003C\u002Fcode> olarak oluşturduğumuz \u003Ccode>guest\u003C\u002Fcode> middleware'ini ekliyoruz.\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-javascript\">\u002F\u002F plugins\u002Frouter.js\nimport auth from "@\u002Fmiddleware\u002Fauth.js";\nimport guest from "@\u002Fmiddleware\u002Fguest.js";\n\nconst routes = [\n    {\n        path: "\u002F",\n        name: "Home",\n        component: () => import("@\u002Fpages\u002FHome.vue"),\n        meta: {\n            middleware: auth,\n        },\n    },\n    {\n        path: "\u002Flogin",\n        name: "Login",\n        component: () => import("@\u002Fpages\u002FLogin.vue"),\n        meta: {\n            middleware: guest,\n        },\n    },\n];\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Böylelikle en basit haliyle Firebase Auth kütüphanesini kullanarak oturum yönetim işlemlerini yapmış olduk, projeyi aşağıdaki bağlantıya tıklayarak inceleyebilirsiniz.\u003C\u002Fp>\n\u003Cp>Şimdilik bu kadar, sonraki yazıda görüşmek üzere. 👋🏼\u003C\u002Fp>\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fafsakar\u002Fvue-firebase-boilerplate\">Proje Linki\u003C\u002Fa>\u003C\u002Fp>",[36,40,43,46,49,52],{"id":37,"label":38,"level":39},"firebase-yapilandirmasi","Firebase yapılandırması",2,{"id":41,"label":42,"level":39},"router-ve-middleware-kurulumu","Router ve middleware kurulumu",{"id":44,"label":45,"level":39},"pinia-kimlik-dogrulama-deposu","Pinia kimlik doğrulama deposu",{"id":47,"label":48,"level":39},"storeu-sayfalarda-kullanmak","Store'u sayfalarda kullanmak",{"id":50,"label":51,"level":39},"kimligi-dogrulanmis-rotalari-korumak","Kimliği doğrulanmış rotaları korumak",{"id":53,"label":54,"level":39},"misafir-rotalarini-korumak","Misafir rotalarını korumak",{"id":56,"title":57,"slug":58},7,"Vue","vue",[60,62,66],{"id":61,"title":57,"slug":58},8,{"id":63,"title":64,"slug":65},11,"Firebase","firebase",{"id":67,"title":68,"slug":69},12,"Authentication","authentication",null,"2023-01-14",[73,90],{"id":39,"title":74,"slug":75,"url":76,"excerpt":77,"reading_minutes":39,"blocks":70,"toc":70,"category":78,"tags":79,"cover":70,"published_at":89},"Pinia vs Vuex","pinia-ve-vuex","\u002Ftr\u002Fblog\u002Fpinia-ve-vuex","Basit durum yönetimi örnekleri, API farkları ve seçim önerileri üzerinden Vue uygulamanız için Pinia ile Vuex’i karşılaştırın.",{"id":56,"title":57,"slug":58},[80,81,85],{"id":61,"title":57,"slug":58},{"id":82,"title":83,"slug":84},9,"Pinia","pinia",{"id":86,"title":87,"slug":88},10,"Vuex","vuex","2022-12-08",{"id":91,"title":92,"slug":93,"url":94,"excerpt":95,"reading_minutes":6,"blocks":70,"toc":70,"category":96,"tags":100,"cover":70,"published_at":105},1,"Dizileri PHP’de nasıl sıralarız?","dizileri-phpde-nasil-siralariz","\u002Ftr\u002Fblog\u002Fdizileri-phpde-nasil-siralariz","PHP’de indeksli ve ilişkisel dizileri değerlerine ya da anahtarlarına göre sıralayan sort, rsort, asort, arsort, ksort ve krsort fonksiyonlarını öğrenin.",{"id":97,"title":98,"slug":99},6,"PHP","php",[101,102],{"id":97,"title":98,"slug":99},{"id":56,"title":103,"slug":104},"Arrays","arrays","2022-10-09",{"html":107},"\u003Ctitle>Firebase ve VueJS ile Kimlik Doğrulama İşlemleri - Azad Furkan Şakar\u003C\u002Ftitle>\n\u003Cmeta name=\"description\" content=\"Vue ve Pinia ile Firebase kimlik doğrulaması; GitHub girişi, oturum kontrolü, route middleware’leri ve korumalı sayfaları adım adım kurun.\">\n\u003Cmeta name=\"keywords\" content=\"laravel, backend, developer, php\">\n\u003Clink rel=\"canonical\" href=\"https:\u002F\u002Fafsakar.dev\u002Ftr\u002Fblog\u002Ffirebase-ve-vuejs-ile-kimlik-dogrulama-islemleri\">\n\u003Clink rel=\"alternate\" hreflang=\"en\" href=\"https:\u002F\u002Fafsakar.dev\u002Fblog\u002Fauthentication-with-vuejs-and-firebase\">\n\u003Clink rel=\"alternate\" hreflang=\"tr\" href=\"https:\u002F\u002Fafsakar.dev\u002Ftr\u002Fblog\u002Ffirebase-ve-vuejs-ile-kimlik-dogrulama-islemleri\">\n\u003Clink rel=\"alternate\" hreflang=\"x-default\" href=\"https:\u002F\u002Fafsakar.dev\u002Fblog\u002Fauthentication-with-vuejs-and-firebase\">\n\u003Cmeta name=\"robots\" content=\"index, follow\">\n\u003Cmeta property=\"og:title\" content=\"Firebase ve VueJS ile Kimlik Doğrulama İşlemleri\">\n\u003Cmeta property=\"og:description\" content=\"Vue ve Pinia ile Firebase kimlik doğrulaması; GitHub girişi, oturum kontrolü, route middleware’leri ve korumalı sayfaları adım adım kurun.\">\n\u003Cmeta property=\"og:type\" content=\"article\">\n\u003Cmeta property=\"og:site_name\" content=\"Azad Furkan Şakar\">\n\u003Cmeta property=\"og:url\" content=\"https:\u002F\u002Fafsakar.dev\u002Ftr\u002Fblog\u002Ffirebase-ve-vuejs-ile-kimlik-dogrulama-islemleri\">\n\u003Cmeta property=\"og:image\" content=\"https:\u002F\u002Fafsakar.dev\u002Fstorage\u002Fog-images\u002Fposts\u002F3-tr.png\">\n\u003Cmeta property=\"article:published_time\" content=\"2023-01-14T18:27:06+00:00\">\n\u003Cmeta property=\"article:modified_time\" content=\"2026-08-06T07:27:14+00:00\">\n\u003Cmeta property=\"article:author\" content=\"Azad Furkan Şakar\">\n\n\u003Cmeta name=\"twitter:site\" content=\"afsakar\">\n\u003Cmeta name=\"twitter:card\" content=\"summary_large_image\">\n\u003Cmeta name=\"twitter:image\" content=\"https:\u002F\u002Fafsakar.dev\u002Fstorage\u002Fog-images\u002Fposts\u002F3-tr.png\">\n\u003Cmeta name=\"twitter:title\" content=\"Firebase ve VueJS ile Kimlik Doğrulama İşlemleri\">\n\u003Cmeta name=\"twitter:description\" content=\"Vue ve Pinia ile Firebase kimlik doğrulaması; GitHub girişi, oturum kontrolü, route middleware’leri ve korumalı sayfaları adım adım kurun.\">\n\u003Cmeta name=\"twitter:url\" content=\"https:\u002F\u002Fafsakar.dev\u002Ftr\u002Fblog\u002Ffirebase-ve-vuejs-ile-kimlik-dogrulama-islemleri\">\n\u003Cscript type=\"application\u002Fld+json\">{\"@context\":\"https:\u002F\u002Fschema.org\",\"@type\":\"Article\",\"name\":\"Firebase ve VueJS ile Kimlik Doğrulama İşlemleri\",\"description\":\"Vue ve Pinia ile Firebase kimlik doğrulaması; GitHub girişi, oturum kontrolü, route middleware’leri ve korumalı sayfaları adım adım kurun.\",\"url\":\"https:\u002F\u002Fafsakar.dev\u002Ftr\u002Fblog\u002Ffirebase-ve-vuejs-ile-kimlik-dogrulama-islemleri\",\"image\":\"https:\u002F\u002Fafsakar.dev\u002Fstorage\u002Fog-images\u002Fposts\u002F3-tr.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https:\u002F\u002Fafsakar.dev\u002Ftr\u002Fblog\u002Ffirebase-ve-vuejs-ile-kimlik-dogrulama-islemleri\"},\"headline\":\"Firebase ve VueJS ile Kimlik Doğrulama İşlemleri\",\"author\":{\"@id\":\"https:\u002F\u002Fafsakar.dev\u002F#person\"},\"publisher\":{\"@id\":\"https:\u002F\u002Fafsakar.dev\u002F#person\"},\"datePublished\":\"2023-01-14T18:27:06+00:00\",\"dateModified\":\"2026-08-06T07:27:14+00:00\"}\u003C\u002Fscript>\u003Cscript type=\"application\u002Fld+json\">{\"@context\":\"https:\u002F\u002Fschema.org\",\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Ana sayfa\",\"item\":\"https:\u002F\u002Fafsakar.dev\u002Ftr\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Blog\",\"item\":\"https:\u002F\u002Fafsakar.dev\u002Ftr\u002Fblog\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Firebase ve VueJS ile Kimlik Doğrulama İşlemleri\",\"item\":\"https:\u002F\u002Fafsakar.dev\u002Ftr\u002Fblog\u002Ffirebase-ve-vuejs-ile-kimlik-dogrulama-islemleri\"}]}\u003C\u002Fscript>\u003Cscript type=\"application\u002Fld+json\">{\"@context\":\"https:\u002F\u002Fschema.org\",\"@type\":\"Person\",\"name\":\"Azad Furkan Şakar\",\"url\":\"https:\u002F\u002Fafsakar.dev\",\"@id\":\"https:\u002F\u002Fafsakar.dev\u002F#person\",\"jobTitle\":\"Backend Developer\",\"image\":\"https:\u002F\u002Fafsakar.dev\u002Fstorage\u002Fsettings\u002Fseo\u002F01KZB42F3FQQSDTQRYYX861RAA.jpeg\",\"sameAs\":[\"https:\u002F\u002Fx.com\u002Fafsakar\",\"https:\u002F\u002Flinkedin.com\u002Fin\u002Fafsakar\",\"https:\u002F\u002Fgithub.com\u002Fafsakar\"]}\u003C\u002Fscript>",{"en":109,"tr":110},"https:\u002F\u002Fafsakar.dev\u002Fblog\u002Fauthentication-with-vuejs-and-firebase","https:\u002F\u002Fafsakar.dev\u002Ftr\u002Fblog\u002Ffirebase-ve-vuejs-ile-kimlik-dogrulama-islemleri",{"type":4,"id":6}]