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 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

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


## DETAILED DOCUMENTATION
> Coming soon
## Features
- [x] nuxtjs - universal mode
    - [x] dynamic profile page with username
- [x] typescript
- [x] local npm modules for shared types and functions
- [x] firebase
    - [x] firebase-hosting
    - [x] firebase-functions
        - [x] performance configuration
        - [x] the url same as hosting
        - [x] dynamic sitemap
        - [x] send notification to user devices
    - [x] firebase-storage
        - [x] profile photo
        - [x] cover photo
        - [x] upload single validated image
    - [x] firestore
        - [x] user collection
    - [x] firebase-auth
        - [x] firebase-auth password
            - [x] register
            - [x] login
            - [x] forget-password
            - [x] reset-password
            - [x] send verification code
                - [x] processing display when the button clicked
            - [x] verify action with mail verification code
            - [x] update password
        - [x] firebase-auth google
        - [x] firebase-auth twitter
        - [x] firebase-auth facebook
        - [x] link/unlink password authenticator
            - [x] set password
        - [x] link/unlink google authenticator
        - [x] link/unlink twitter authenticator
        - [x] link/unlink facebook authenticator
        - [x] remember me
        - [x] user custom claims
    - [x] messaging (FCM)
        - send push notification
        - listen push notification
        - [x] token
            - save deviceToken on login
            - remove device token on logout
- [x] buefy
- [x] nuxt-i18n
    - [x] English
    - [x] Turkish
- [x] vee-validate
    - [x] integration with nuxt-i18n
    - [x] custom validation for image
    - [x] switch language by queryParam `lang`
- [x] SEO
    - [x] Google meta
    - [x] Facebook meta
    - [x] Twitter card meta
- [x] redirect to next url after login
- [x] custom loading component
- [x] image
    - [x] lazy load (vue-lazyload)
    - [x] crop with cropperjs
    - [x] lightbox with buefy/bulma
    - [x] hover button on profile photo
    - [x] square/round background image
- [x] privacy
    - [x] Account Privacy: Make a profile public/private for other authenticated users
    - [x] Followers Privacy: Even if authenticated users cannot see the followers
    - [x] Following Privacy: Even if authenticated users cannot see the following
- [x] custom error page - simple
- [x] global notification
- [x] toaster notification
- [x] tooltips
- [x] force logout if token is invalid    
- [x] dotenv
- [x] rxJS
- [x] share on social
    - [x] facebook
    - [x] twitter
    - [x] whatsapp
    - [x] email
    - [x] sms
- [x] uuid
- [x] slug
- [x] better formatting
    - [x] tslint
    - [x] eslint
    - [x] linting before `build`
- [x] backend contracts in an NPM package
Have a look [Trello Board](https://trello.com/b/6JN23G7A/boiler-plate) 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
- https://firebase.google.com/docs/auth/web/password-auth
#### google
- https://firebase.google.com/docs/auth/web/google-signin
#### twitter
- https://firebase.google.com/docs/auth/web/twitter-login
##### facebook
- https://www.robinwieruch.de/firebase-facebook-login
- https://firebase.google.com/docs/auth/web/facebook-login
- https://hackernoon.com/vue-nuxt-firebase-auth-database-ssr-example-tutorial-facebook-login-setup-authentication-starter-app-a6dfde0133fc
#### action configurations
TBD
- - https://firebase.google.com/docs/auth/custom-email-handler
#### 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
```.env
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