Pascal Luther
1 min readNov 30, 2019

--

Hey Alexander Seidmann

Well Nuxt.js offers much more than just SSR, so if you like working with Nuxt (like I do) I don’t see a reason why you would have to switch back to a “Standard” Vue.js app.

If I were you I would do it exactly like you do it now — prerender what you need for SSR and statically host that e.g. on Firebase Hosting or Netlify.

Use “nuxt generate” to prerender SSR relevant pages and then you can:

  1. exclude entire pages (the one’s that are to be authenticatd) from prerendering with the generate>exclude option:
    See: https://nuxtjs.org/api/configuration-generate/#exclude
  2. Wrap content/components that need authentication in <client-only> tags.
    See: https://nuxtjs.org/api/components-client-only#the-lt-client-only-gt-component

Regarding your question: You definitely don’t need to handle cookies yourself with Firebase Authentication. Set up an .onAuthStateChanged() listener in a Nuxt plugin, this gets automatically triggered when the client is logged in and the page is refreshed, because Firebase already handles the auth cookies. In that listener you can save the authUser e.g. to the vuex state so you can access it in your application wherever you need.

The plugin should look something like this:

https://github.com/lupas/nuxt-fire/blob/master/packages/nuxt-fire/src/plugins/initAuth.js

Maybe give the auth>initialize option of nuxt-fire a chance, this sets it up for you without the need to write that plugin yourself, all you need to do is create a mutation or action in the vuex store that shall receive the authUser object:
https://nuxtfire.netlify.com/options/#auth

Let me know if something’s unclear.

Happy coding!

--

--

Pascal Luther
Pascal Luther

Written by Pascal Luther

Cloud Product Architect by day, recreational web-developer by night. Currently a big fan of Vue & Nuxt.js and of going serverless with Google Firebase.

No responses yet