Next.js: Firebase user data

[bastienrobert]

Firebase user data

Example name

with-firebase-authentication-app

Describe the bug

I want to display user displayName if user exists. I firstly render the page without the user data, then it render with it.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Go to pages/index.js
2. Add <h1>Hello {user.displayName}</h1> after the check if there's a user in the render

Expected behavior

Don't render the page until user data isn't get.

Screenshots

That's what is happening when I reload the page:

System information

• OS: macOS
• Browser: Chrome 70.0.3538.77
• Version of Next.js: 7.0.2

[timneutkens]

cc @jthegedus

[bastienrobert]

I just checked a bit deeply. On getInitialProps, user is get from server which returns the user in the session. It returns the user name here under a name key in the object, but it's a displayName key that is returned when onAuthStateChanged is triggered.
On render, I did something like that : const name = user.displayName || user.name and I render name. It works but it's clearly weird

But there's still a problem when I'm using Redux with this : storing is not possible (probably because of getInitialProps)

[ztanner]

I don't think you'll run into problems using redux with this, if you look at https://github.com/zeit/next.js/tree/canary/examples/with-redux-wrapper you can see how to install a tool like next-redux-wrapper which will give you access to the store in getInitialProps, so you can dispatch an action to store the user data.

As for the flickering issue, yeah - the data shape of the decoded session token (from verifyIdToken), doesn't match the shape of the user in the onAuthStateChanged callback. You could pass the result of the decodedToken through a function that puts it in the shape that you want, that way req.session.decodedToken matches the desired shape. I don't think there's technically a bug here though.

[toruticas]

There is a small difference in google API when you make the request on client side compared with server side. On the server you use authentication through the user's token and the data set comes with the "name" field, while on the client side (using browser sdk) the dataset comes with the "displayName" field. There are several differences in the field names (another example is photoUrl and picture).

You can do the same thing proposed by @bastienrobert or make the modification on the server side, something like this (line 9):

server.post('/login', (req, res) => {
  if (!req.body) return res.sendStatus(400)

  const token = req.body.token
  firebase
    .auth()
    .verifyIdToken(token)
    .then(decodedToken => {
      decodedToken.displayName = decodedToken.name // mapping name to displayName
      req.session.decodedToken = decodedToken
      return decodedToken
    })
    .then(decodedToken => res.json({ status: true, decodedToken }))
    .catch(error => res.json({ error }))
})

I hope this solves your problem, bro. :fist_oncoming: