This story is inspired by another tutorial written by David, I strongly recommend to read of his and . Most of the content here are based on his work. Story Github Best way to understand what happening in programing, is looking at the code. This is setting up Facebook and Google accounts login, build on top of the Vue template generated by . pull-request vue-cli vuetifyjs/nuxt If you are looking for a ready cooked boilerplate for quick development, then clone this Repo, and set up the Firebase , in the config here . key secrete ./services/fireinit.js Firebase have done a very great job in authentication for the developers, great SDK, and great integration. Facebook, Google could be implemented just within few clicks on browser. However, data in Firebase Web application is mostly happened on the browser, think about that, all the Facebook login pages, login popup is all about opening pages and redirecting pages, nothing to do with our awesome APIs. One of the challenge of using Firebase authentication on is understanding how the data flow goes in deep, carrying data from the browser to web server is a bit complex, topics such as , , and can not miss. SSR architect (Nuxt.js) Vuex middleware express-middleware nuxt-plugin 1- Setup Facebook Page and Facebook Application 2- Connecting Firebase and Facebook Authorize Firebase domain via your Firebase Console in Authentication settings via your Firebase Console under the Sign-In Methods Tab. Connecting Firebase and Facebook 3. Set up spa mode in nuxt.config.js Using SPA mode with Nuxt.js which is implemented by setting the option in . mode: 'spa' nuxt.config.js 4. Set up Firebase service in Nuxt To setup/initialize the firebase app with credentials, I created . services/fireinit.js Set up Firebase service in Nuxt 5. Handling User Authentication State Firebase provides to handle user state. I created to setup this functionality onAuthStateChanged plugins/fireauth.js Handling User Authentication State 6. Protecting Authenticated Routes A user is already signed-in and the next route is Scenario 1: /login Redirect to _/admin_ There is not a user signed-in and the next route is Scenario 2: /admin Redirect to _/login_ Protecting Authenticated Routes We will tell Nuxt.js to use this file by declaring it in as follows: nuxt.config.js With all of this in place, we are able to use Firebase Authentication with Nuxt.js to protect the route /admin 7. Set up component FacebookLogin.vue This component is triggering action , by calling signInWithFacebook this.$store.dispatch Set up component FacebookLogin.vue 8. Setup action and store for Facebook Login Action Setup action and store for Facebook Login Action Done Basically, everything is setup within the above 8 steps. When you open the page , you are redirected to require login localhost:3000/admin localhost:3000/login to When you open the page , you are redirected to require login _localhost:3000/admin_ _localhost:3000/login to_ localhost:3000/admin Reference: — https://www.davidroyer.me/blog/nuxtjs-firebase-auth/ — https://github.com/wahengchang/nuxt-firebase-starter-kit/pulls?q=is%3Apr+is%3Aclosed — https://codeburst.io/nuxt-authentication-from-scratch-a7a024c7201b

Too Long; Didn't Read

Making security fun one episode at a time

[Vue] Setup Facebook Login in Nuxt + Firebase in 8 Step

Too Long; Didn't Read

Peter Chang

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

[Vue] Setup Facebook Login in Nuxt + Firebase in 8 Step

Too Long; Didn't Read

Peter Chang

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES