CODEWITHSUNDEEP
javascriptfirebasenuxt.js
Zaeem Khaliq
Zaeem Khaliq

Reputation: 316

How to redirect to homepage on firebase authentication in NuxtJs app

I am using firebase authentication for my NuxtJs app. The firebase is initialized only on the client side, so everything related to firebase is done on the client side.

Initially, I have set the state 'user' as null in the store. On default.vue (which is default layout page) in mounted component, I have dispatched an action that checks auth status of user i.e. firebase.auth().onAuthStateChanged(). After that if a user is logged into the app, the user state is updated to an object (which is returned by firebase).

Now, the login/signup page is at the route 'http://localhost:3000/authentication'. Now what I want to do is that when the user refreshes that route(page), it should check if there is a object in 'user' state (which means user is logged in) and then redirect to homepage i.e. 'http://localhost:3000/' and if the 'user' is null then it should remain at the same page.

I have used middleware for checking the user state in store.

Now this is working fine on client side (when navigating) but not on server side (when refreshing page) because on server side the store's state returns null because since everything related to firebase is happening on client side therefore the user state also updates only on client side.

The problem with firebase is that it also only initializes on client side and returns error if it is initialized two times (on client as well as on server).

So, how can I update user state in store on server side?

This server side rendering seems to me rather confusing and complex than useful.

Upvotes: 0

Views: 212

Answers (1)

Dharmaraj
Dharmaraj

Reputation: 50920

It's kind of hard to get Firebase Authentication to get working with NuxtJS. What I do is add a token in cookies when user logs in like:

import {set} from "js-cookie"
firebase.auth().signInWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Set a cookie
    set("user", "1") 
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
  });

Now whenever you are loading a page (let's say /login) check if that cookie exists in your middlewares or asyncData. Now if you also need to verify which user it is, you will be needing the Firebase ID Token before page renders (possible by setting the IdToken itself as the cookie but not recommended). To overcome this, I store a custom JWT in cookies which contains user's UID so I know who is it. Then the identification goes simple in asyncData like this:

asyncData (ctx) {
  //get the cookies
  const cookies = ctx.headers.cookies
  // parse them and check if it exists.
  if (isCookiePresent("loginIdentifier")) return ctx.redirect("/home")
  // else stay on login page
}

To verify a cookie use this package.

import {parse} from "cookie"
const parsedCookies = parse(ctx.headers.cookies)

The cookie can be as simple as user: 1 i.e. a user is logged in if it is 1. If you just need to check if someone is logged in and don't need information of that user before rendering the page this will be fine.

Upvotes: 1

Related Questions