nookies | 🍪 A set of cookie helpers for Next.js | Frontend Framework library

doc.data is a function, not actual document data. See the API documentation for clarity. You should instead call it in order to get an object with the data in the snapshot.

I'm not sure if this helps, but there might be a way to avoid the flicker. Instead of defaulting to English / LTR, Next.js actually has configurable i18n routing, which tries to detect the user's preferred locale using browser headers. There's even cookie support, but it has to be the hardcoded NEXT_LOCALE cookie.

Even if you've already explored that solution, I'll just leave it here for anyone else with a similar problem.

============= SOLUTION USING NEXT.JS i18n routing ===========

Thanks to @Summer advice I was able to solve my issue using Next.js built-in i18n routing solution that I was not aware it exists.

The issue that caused the UI flicker was happening because I was waiting until the useEffect() function gets executed in _app.tsx in order to add some kind of a special CSS class or HTML attribute the tag in order to be able to target that CSS class in the CSS file and switch the direction or do any other CSS modifications.

But now by using the built-in Next.js i18n routing, Next.js detect the language of your app, either by looking for a "NEXT_LOCALE" cookie or if he can't find that he will default to the default language of your choice, and by doing that Next.js will add a "lang" attribute automatically to your tag that comes directly from the server, and then you can target that in your CSS to switch your layout direction ...

It's not clear for me this problema, but I try to write what I see: you have defined useEddect with the fetch without deps. In that fetch you use role state which is initialized to empty string in the first time. You set the role using setRole in the same useEffect but this has no effect for the precedent reasons.

My suggestion is to remove role state and redefine useEffect like this:

I fixed the problem! (thanks @ArneHugo the hint)

So, what happened was not really a cyclic dependency, but files getting compiled asynchronously, because of which there was no actual control over what got compiled first.

I fixed this by making a small change:

lib/firebase-admin.ts

The Firebase SDK does that for you. Whenever you call user.getIdToken() it will return a valid token for sure. If the existing token has expired, it will refresh and return a new token. You can use onIdTokenChanged()and which will trigger whenever a token is refreshed and store it in your state.

However, I don't see any cons in using getIdToken() method whenever you are making an API request to server. You won't have to deal with IdToken observer and get valid token always.

While you could lift the /functions directory to your project's root directory, this would mean that your other functions are unnecessarily bloated with all of your Next.js app's dependencies.

When you deploy a Cloud Function, everything in the configured deployment directory (/functions by default) is deployed - even if you don't use it. It is also deployed once for each function. So if you had a 10MB file to your functions directory, every function's deployed size would increase by 10MB. This is what I mean by "bloating" a function.

FYI: You can change the deployed functions directory by adding the following to your firebase.json file (docs):

This is how I solved this nodemon issue in next js.

a. I downloaded nodemon in dev dependency of 2.0.7 . Seems like the newer versions are causing problems in my local.

b. Update the scripts in package.json

Thanks to @juliomalves in the comments, I simply forgot to return the withAuth function!

Here's how it looks now:

pages/index.tsx

I had similar issue using NuxtJS and the easiest way is to redirect user to a different page where you can get a new Firebase ID Token on client side and then refresh the cookie. For example, you may redirect to a page something like https://domain.tld/auth/refresh?redirect_uri=/dashboard. The query parameter redirect_uri tells where the user was and must be redirected back after refreshing the token.

If you want to avoid the redirect, you would have to store the "Refresh Token" on your server side. I am not sure how secure that will be but don't store refresh token in cookies. But just in case you are wondering how to get new Firebase ID Token using the refresh token, you can make a POST request to this URL: