Skip to content

Latest commit

 

History

History
298 lines (225 loc) · 8.25 KB

README.md

File metadata and controls

298 lines (225 loc) · 8.25 KB

Table of Contents generated with DocToc

nuxt-typescript-ssr-firebase-auth

nuxt generate is really sucks!!! We lost nuxtServerInit, dynamic routing stuff etc. We need a good alternative to deploy our applications to 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 nuxtServerInit functionally is active.

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

DEMO

See the Features for more functionalities

login screen

register screen

account sc

DETAILED DOCUMENTATION

Coming soon

Features

  • nuxtjs - universal mode
  • typescript
  • firebase
    • firebase-hosting
    • firebase-functions
      • performance configuration
      • the url same as hosting
    • firebase-storage
      • profile picture
    • 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
  • buefy
  • nuxt-i18n
    • English
    • Turkish
  • vee-validate
    • integration with nuxt-i18n
  • redirect to next url after login
  • dotenv
  • better formatting
  • backend-frontend types in a npm package
  • custom error page - simple
  • global notification
  • toaster notification
  • tooltips
  • force logout if token is invalid
  • uuid
  • slug

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

# axios config
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

A global package.json has been created to manage easy build and deployment. All predeploy refer to scripts package.json in predeploy

install dependencies

$ npm --prefix functions install
$ npm --prefix src install

deploy

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

$ firebase deploy

run locally with firebase

$ npm run build

or

$ npm run predeploy:function && npm run predeploy:hosting

and then

$ firebase serve

you will see the links as output of the command

for locally development

hosting on local and api on firebase

first, deploy functions to firebase

$ npm run predeploy:function
$ firebase deploy --only functions

and then

cd src
npm run dev

hosting and api on local

enable nuxt serverMiddleware in src/nuxt.config.ts
  serverMiddleware: [
     '~/server/api'
   ],
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