Skip to content

Latest commit

 

History

History
351 lines (270 loc) · 11.2 KB

README.md

File metadata and controls

351 lines (270 loc) · 11.2 KB
Raw

nuxt-typescript-ssr-firebase-auth

BUILD Coverage Code Lines Of Code Technical Debit

nuxt generate is really sucks!!! We lost nuxtServerInit, dynamic routing stuff etc. We need a good alternative to deploy our applications to the cloud without VPS and SSL configuration.

This repository is created as a sample of using nuxt on firebase-functions+firebase-hosting and still SSR and has the nuxtServerInit functionality as active.

Firebase full password authentication (register, login, forget password, reset password), google authentication, twitter authentication, facebook authentication in nuxt.

DEMO: https://nuxt-ts-firebase-auth-ssr.firebaseapp.com/

See the Features for more functionalities
Profile Ligthbox Ligthbox view
Crop login register

Folder Structure

  • functions: source folder for firebase-functions
    • modules: Shared types and functions between front-end and back-end (firebase-functions and nuxt serverMiddleware)
      • types-module: has all shared types (enums, interfaces, constants)
      • handlers-module: has all express handlers. Also, has all backend services like firebase-admin and firestore
    • src: the source of the functions
  • src: nuxt application
|-- functions
|   |-- modules
|   |   |-- handlers-module
|   |   |   `-- src
|   |   `-- types-module
|   |       `-- src
|   `-- src
`-- src
    |-- assets
    |-- components
    |-- i18n
    |-- layouts
    |-- middleware
    |-- mixin
    |-- pages
    |-- plugins
    |-- server
    |-- service
    |-- static
    |-- store
    |-- types

DETAILED DOCUMENTATION

Coming soon

Features

  • nuxtjs - universal mode
    • dynamic profile page with username
  • typescript
  • local npm modules for shared types and functions
  • firebase
    • firebase-hosting
    • firebase-functions
      • performance configuration
      • the url same as hosting
      • dynamic sitemap
      • send notification to user devices
    • firebase-storage
      • profile photo
      • cover photo
      • upload single validated image
    • firestore
      • user collection
    • firebase-auth
      • firebase-auth password
        • register
        • login
        • forget-password
        • reset-password
        • send verification code
          • processing display when the button clicked
        • verify action with mail verification code
        • update password
      • firebase-auth google
      • firebase-auth twitter
      • firebase-auth facebook
      • link/unlink password authenticator
        • set password
      • link/unlink google authenticator
      • link/unlink twitter authenticator
      • link/unlink facebook authenticator
      • remember me
      • user custom claims
    • messaging (FCM)
      • send push notification
      • listen push notification
      • token
        • save deviceToken on login
        • remove device token on logout
  • buefy
  • nuxt-i18n
    • English
    • Turkish
  • vee-validate
    • integration with nuxt-i18n
    • custom validation for image
    • switch language by queryParam lang
  • SEO
    • Google meta
    • Facebook meta
    • Twitter card meta
  • redirect to next url after login
  • custom loading component
  • image
    • lazy load (vue-lazyload)
    • crop with cropperjs
    • lightbox with buefy/bulma
    • hover button on profile photo
    • square/round background image
  • privacy
    • Account Privacy: Make a profile public/private for other authenticated users
    • Followers Privacy: Even if authenticated users cannot see the followers
    • Following Privacy: Even if authenticated users cannot see the following
  • custom error page - simple
  • global notification
  • toaster notification
  • tooltips
  • force logout if token is invalid
  • dotenv
  • rxJS
  • share on social
    • facebook
    • twitter
    • whatsapp
    • email
    • sms
  • uuid
  • slug
  • better formatting
    • tslint
    • eslint
    • linting before build
  • backend contracts in an NPM package

Have a look Trello Board for more coming functionality

Prepare for build

firebase configuration

create project

create a firebase project on https://console.firebase.google.com/

update .firebaserc

update .firebaserc with the project created/owned by you

If you already have a project you can use it too.

firebase credentials file

This configuration is necessary for nuxt serverSiddle, If you use firebase-functions skip this step.

  • export the credentials files from your firebase project.
  • copy the file to server/config/firebase-admin-credentials.json

provider config

password

google

twitter

facebook

action configurations

TBD

development env

create a development branch and use that branch for development. Create a new project on firebase and setup development branch with the new firebase project

don't confuse yourself to work on multi-environment in one repository/branch

more: TBD

dotenv

create .env file with below content or rename .env.template file

WEBSITE_URL=https://nuxt-ts-firebase-auth-ssr.firebaseapp.com

# axios config
#API_URL=http://localhost:3000/api
#API_URL=http://localhost:5000/api
API_URL=https://nuxt-ts-firebase-auth-ssr.firebaseapp.com/api

# firebase config
FIREBASE_API_KEY= ***
FIREBASE_AUTH_DOMAIN= ***
FIREBASE_DATABASE_URL= ***
FIREBASE_PROJECT_ID= ***
FIREBASE_STORAGE_BUCKET= ***
FIREBASE_MESSAGING_SENDER_ID= ***
FIREBASE_APP_ID= ***
FIREBASE_MEASUREMENT_ID= ***

Build & Run & Deploy

the root package.json has been created to manage build and deployment easily.

install dependencies (not npm install or npm i )

$ npm run install

deploy

This command builds and deploys firebase-functions from functions and firebase-hosting from src

$ firebase deploy

run locally with firebase

The following command prepares what are necessary to run the application locally. It builds src and function and generates the public folder.

$ npm run build

and then

$ firebase serve

you will see the links as output of the command

for local development

hosting on local and api on firebase

Firstly, deploy functions to firebase

$firebase deploy --only functions:apiApp

and then

be sure the API_URL configured as firebase-functions like API_URL=https://nuxt-ts-firebase-auth-ssr.firebaseapp.com/api

cd src
npm run dev

hosting and APIs on local

It is possible to run the project as just a nuxt application. With the following instructions, firebase-function is never be in use

Ignore functions, just work on src

enable nuxt serverMiddleware in src/nuxt.config.ts
  serverMiddleware: [
    '~/server/api',
    '~/server/sitemap'
   ],
update .env
API_URL=https://localhost:3000/api
and run
cd src
npm run dev

references

Contribution

Please feel free to send a pull request. Welcome :)

  • you see a mistake ( excepted, totally my mistake :) )
  • you know a better/best practice
  • you can add more functionality
  • you found a bug
  • you think you have time to fix/implement a card from Trello Board

hints

localization

change language

strategy: 'no_prefix',

changeLocale() {
  this.$i18n.setLocale(this.$i18n.locale === 'en' ? 'tr' : 'en')
}

for the other strategy

<nuxt-link :to="switchLocalePath('en')">English</nuxt-link>
<nuxt-link :to="switchLocalePath('tr')">Turkish</nuxt-link>

Errors and fixes

nuxt Failed to execute 'appendChild' on 'Node': This node type does not support this method.

add client-only tag

<client-only> 
   ...
</client-only>

npm dependency fixes

To list outdated libraries

npm install -g npm-check-updates

to update the outdated libraries

ncu -u
npm install