Nuxt.js with Firebase Authentication [JavaScript/TypeScript]


This is a tutorial for introducing Nuxt.js and Bulma with TypeScript.

  • Nuxt.js : Vue.js Meta Framework to create complex, fast & universal web applications quickly.
  • Bulma : CSS framework based on Flexbox

🐹 TLDR

If you want to use this project, please copy as follows:

https://github.com/morizyun/nuxt-edge-serverless-firebase-auth-template

😎 Installation

git clone https://github.com/jeehyukwon/nuxt-edge-serverless-template.git myApp

🏈 Start Server

cd myApp

# Install npm dependencies
yarn

# install additional dependencies for development
yarn add @nuxtjs/bulma @nuxtjs/dotenv

# install firebase dependencies
yarn add firebase firebase-admin

# start server
yarn run dev

After executing above commands, please execute open http:localhost:3000 or see the URL in your browser.

nuxt-js-first-myApp

🎳 Create Firebase Authentication Project

It will be needs for using Firebase authentication.

After then, get the secret information by Firebase Admin SDK to Your Server.

Set the above credential information to .env.

🏀 configuration

.env

FIREBASE_SERVER_CLIENT_EMAIL=xxx
FIREBASE_SERVER_DATABASE_URL=xxx
FIREBASE_SERVER_PRIVATE_KEY=xxx
FIREBASE_SERVER_PROJECT_ID=xxx

FIREBASE_CLIENT_API_KEY=xxx
FIREBASE_CLIENT_AUTH_DOMAIN=xxx
FIREBASE_CLIENT_DATABASE_URL=xxx
FIREBASE_CLIENT_MESSAGING_SENDER_ID=xxx
FIREBASE_CLIENT_PROJECT_ID=xxx
FIREBASE_CLIENT_STORAGE_BUCKET=xxx

nuxt.config.js

const cookieParser = require("cookie-parser");
const yaml = require("require-yml");
require("dotenv").config();

const serverlessConfig = yaml("./serverless.yml");
const awsRegion = serverlessConfig.provider.region;
const awsS3AssetsBucketName =
  serverlessConfig.resources.Resources.AssetsBucket.Properties.BucketName;

module.exports = {
  apollo: { clientConfigs: { default: "~/apollo/clientConfigs/default.ts" } },
  build: {
    extractCSS: true,
    publicPath: `https://s3.${awsRegion}.amazonaws.com/${awsS3AssetsBucketName}/`,
    extend(config, { isServer }) {
      const tsLoader = {
        exclude: [/vendor/, /\.nuxt/],
        loader: "ts-loader",
        options: { appendTsSuffixTo: [/\.vue$/], transpileOnly: true }
      };
      config.module.rules.push({
        test: /((client|server)\.js)|(\.tsx?)$/,
        ...tsLoader
      });
      config.resolve.extensions.push(".ts");
      config.module.rules.map(rule => {
        if (rule.loader === "vue-loader") {
          rule.options.loaders = { ts: tsLoader };
        }
        return rule;
      });
      if (isServer) {
        config.externals = [];
      }
    }
  },
  env: {
    FIREBASE_CLIENT_API_KEY: process.env.FIREBASE_CLIENT_API_KEY,
    FIREBASE_CLIENT_AUTH_DOMAIN: process.env.FIREBASE_CLIENT_AUTH_DOMAIN,
    FIREBASE_CLIENT_DATABASE_URL: process.env.FIREBASE_CLIENT_DATABASE_URL,
    FIREBASE_CLIENT_MESSAGING_SENDER_ID:
      process.env.FIREBASE_CLIENT_MESSAGING_SENDER_ID,
    FIREBASE_CLIENT_PROJECT_ID: process.env.FIREBASE_CLIENT_PROJECT_ID,
    FIREBASE_CLIENT_STORAGE_BUCKET: process.env.FIREBASE_CLIENT_STORAGE_BUCKET
  },
  extensions: ["js", "ts"],
  head: {
    meta: [
      { charset: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      {
        content: "Nuxt-edge Serverless Template",
        hid: "description",
        name: "description"
      }
    ],
    title: "Nuxt Edge Serverless Template"
  },
  loading: { color: "#51cf66" },
  modules: ["@nuxtjs/apollo", "@nuxtjs/bulma", "@nuxtjs/dotenv"],
  plugins: [
    { src: "~/plugins/firebase-client-init.ts", ssr: false },
    { src: "~/plugins/auth-cookie.ts", ssr: false }
  ],
  render: {
    etag: false,
    // Disabled gzip compression
    gzip: { threshold: 1073741824 }
  },
  router: {
    middleware: "router-auth"
  },
  serverMiddleware: [
    cookieParser(),
    "~/serverMiddleware/validateFirebaseIdToken"
  ],
  srcDir: "src/",
  vendor: ["firebase"]
};

🐯 Create Application

src/apollo/clientConfigs/default.ts

export default context => {
  return {
    httpEndpoint: "https://localhost:8080/graphql"
  };
};

src/components/LoginForm.vue


    

        
class
="title">Sign In</h2>

        
errorMessage: {{ errorMessage }}div>

        
"emailLogin"
>
            
class
="field">
                ="label">Email: label>
                "text" class="input" v-model="email">
            </div>
            

                
                "password" class="input" v-model="password">
            </div>
            
        form>
    </div>
template>


src/layouts/default.vue


    

        
        
    </div>
template>


src/pages/login.vue


  

    
class
="hero is-primary is-bold">
      
class
="hero-body">
        
class
="title is-size-2">
          Login Page
        </h1>
      div>
    </section>
    >
  </div>
template>

🖥 Recommended VPS Service

VULTR provides high performance cloud compute environment for you. Vultr has 15 data-centers strategically placed around the globe, you can use a VPS with 512 MB memory for just $ 2.5 / month ($ 0.004 / hour). In addition, Vultr is up to 4 times faster than the competition, so please check it => Check Benchmark Results!!