Question: Cookie or Async Token Generation for headers

[seanaguinaga]

Hello

Based on the example I see you can get a token from localStorage:

https://gqty.dev/examples/suspense/auth

However, I don't keep tokens in local storage.

Do you have an example using a firebase token or anything like that or a JWT?

https://github.com/gladly-team/next-firebase-auth

I use this specifically

[PabloSzx]

I'm sorry but there are no examples on that, in the end gqty gives complete flexibility in the fetch process, it ends up just being able to get the token from somewhere inside the queryFetcher

By reading a little of the firebase documentation, a quick example could be something like this:

export const AuthorizationToken: {
  token?: string | null;
} = {};

const queryFetcher: QueryFetcher = async function (query, variables) {
  const authHeader = AuthorizationToken.token
    ? {
        authorization: AuthorizationToken.token,
      }
    : undefined;

  const response = await fetch('/api/graphql', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      ...authHeader,
    },
    body: JSON.stringify({
      query,
      variables,
    }),
    mode: 'cors',
  });

  const json = await response.json();

  return json;
};

and then, in the React Code you can do:

import { useAuthUser, withAuthUser } from 'next-firebase-auth'
import { useEffect, useState } from 'react'; 
import { AuthorizationToken } from '../gqty'
const Demo = () => {
  const AuthUser = useAuthUser()
  const [ready, setReady] = useState(false)

  useEffect(() => {
  if (!AuthUser.id) return;

    setReady(false);
    AuthUser.getIdToken().then((token) => {
      AuthorizationToken.token = token;
      setReady(true);
    });
  }, [AuthUser, setReady])

  return (
    <div>
      <p>Your email is {AuthUser.email ? AuthUser.email : 'unknown'}.</p>
    </div>
  )
}

export default withAuthUser()(DemoPage)

[seanaguinaga]

That should totally work!

Thank you very much!

Is there a utility I can use to refetch requires on demand, like if that token changes or is set back to null?

[PabloSzx]

Is there a utility I can use to refetch requires on demand, like if that token changes or is set back to null?

sorry for the late reply, but I personally use and recommend https://github.com/pmndrs/valtio