How can I make sure a cookie is set before using it?

I'm currently working on a JWT authorization code flow using Next.js and NestJS.

This is the POST request I'm sending from the front to the back.

const response = await fetch(
  'http://localhost:4000/auth/42/callback?code=' + code, { // code is received from the OAuth server
    method: 'POST',
    mode: 'cors',
    headers: {
      'Content-Type': 'application/json',
    },
    credentials: 'include',
  }
);

Once the backend receives the request, it will generate the JWT and send it back to the front using response.

@Post('42/callback')
async Callback(@Query('code') code: string, @Res({passthrough: true}) res) {
  if (!code) {
    res.status(400).send('Missing code');
    return;
  }

  try {
    const response = await this.authService.exchangeCodeForToken(code);
    const jwt = await this.authService.handleCallback(response);
    res.setHeader('Access-Control-Allow-Credentials', 'true');
    res.cookie('jwt', jwt, {
      sameSite: 'strict'
    });
    res.status(200).send();
  } catch (error) {
    console.error(error);
    res.status(500).send('Internal server error');
  }
}

The browser successfully sets the jwt cookie, however I'm unable to find a way to make sure it is set before using it.
It seems that there is a small latency between the response and setting the cookie.

import jwtDecode from 'jwt-decode';
import { useCookies } from 'react-cookie';

const [ cookies ] = useCookies();

const jwt = cookies.jwt;
const jwtPayload: any = jwtDecode(jwt); // Here jwt is undefined

I've looked at the browser Network Profiler but I'm not able to see any latency.

To bypass the delay and to ensure that you access the cookie value only after it has been set, you can use the useEffect hook. Something like this..

import { useEffect } from 'react'
import jwtDecode from 'jwt-decode'
import { useCookies } from 'react-cookie'

function YourComponent() {
  const [cookies, setCookie] = useCookies()
  const jwt = cookies.jwt

  useEffect(() => {
    if (jwt) {
      const jwtPayload: any = jwtDecode(jwt);
      // Access the jwtPayload or perform any other actions with the JWT here
    }
  }, [jwt])

  // Rest of your component code

  return <div>Your component content</div>
}

export default YourComponent;

Alternatively you can also create a custom hook if you prefer. something like this...

import { useEffect, useState } from 'react'
import jwtDecode from 'jwt-decode'
import { useCookies } from 'react-cookie'

function useJWT() {
  const [cookies] = useCookies()
  const [jwt, setJWT] = useState(null)
  const [jwtPayload, setJWTPayload] = useState(null)

  useEffect(() => {
    if (cookies.jwt) {
      setJWT(cookies.jwt)
    }
  }, [cookies.jwt])

  useEffect(() => {
    if (jwt) {
      const decodedPayload = jwtDecode(jwt)
      setJWTPayload(decodedPayload);
    } else {
      setJWTPayload(null)
    }
  }, [jwt])

  return jwtPayload
}

export default useJWT

I've finally found a solution to my problem.
Apparently, react-cookie is not reliable in some situations (see this issue or this one). The useCookies hook is not updating when a new cookie is added. While this issue isn't fixed the best workaround is to use universal-cookie instead.

Here is what it will looks like:

import Cookies from 'universal-cookie';
import jwtDecode from 'jwt-decode';

const cookies = new Cookies();
const jwt = cookies.get('jwt');
const decodedPayload = jwtDecode(jwt);