How to handle dependent Firebase token data

[matamatanot]

I use Firebase Auth.
For fetching data, I need to get token using async method getIdToken().
https://firebase.google.com/docs/auth/admin/verify-id-tokens#web

An Unhandled Runtime Error occurred.

What's the ideal way to do it?
Because It is possible that the token has expired, getIdtoken() method should be called before asynchronous communication.

What should I do if I want to use SWR?

const AdminPage: NextPage = () => {
  // const user: firebase.User | undefined
  const [user, initialising, error] = useAuthState(auth);

  const { data: fetchData, error: fetchError } = useSWR<AdminResponse>(
    user?.getIdToken()
      ? [
          "/admins",
          user.getIdToken(),
        ]
      : null,
    get_fetcher
  );

  if (error) {
    console.log(error);
  }

  return (
    {fetchData && !fetchError && <Admin admin={fetchData.admin} />}
  );
};

export const get_fetcher = (url: string, token: string) =>
  fetch(url, {
    method: "GET",
    mode: "cors",
    credentials: "include",
    headers: {
      "Content-Type": "application/json; charset=utf-8",
      Authorization: `Bearer ${token}`,
    },
  }).then((res) => {
    if (res.ok) {
      return res.json();
    } else {
      throw Error;
    }
  });

Unhandled Runtime Error
Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

[sergiodxa]

I would call that method inside the fetcher, and throw an error if the user is not logged in (doesn't has the token)

[Spomky]

Hi,

I am facing the same problem with Auth0 access tokens
Is it possible to get an example to clearly understand how to manage that?

Hereafter my custom hook:

import useSWR from "swr";
import {useAuth0} from "@auth0/auth0-react";

export default async function useBooks () {
  const { getAccessTokenSilently } = useAuth0();
  const accessToken = await getAccessTokenSilently();

  const { data, error } = useSWR(['/books', accessToken]);

  return {
    books: data,
    isLoading: !error && !data,
    isError: error
  }
}

The problem is that, when I call this hook from my functional component (const { books, isLoading, isError } = useBooks();), the following error is thrown:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

The error makes sense as the function useSWR is called from a custom hook and not the component.
Any though about that issue?

[sergiodxa]

You can't make a Hook be an async function, is there no way to get getAccessTokenSilently without the useAuth0 Hook? Ideally your fetch should call that function and get the token.

Another option if you can't do that, is to use a state to store the access token and call getAccessTokenSilently inside an effect. Optionally, you can move that state to a context and only call that function once at the root of your app.

[superbull]

I see some one use the code below, it works fine.
But I don't know if pass the function getAccessTokenSilently as argument is the right way to go.
@sergiodxa What do you think?

import useSWR from "swr";
import {useAuth0} from "@auth0/auth0-react";

const fetchWithToken = async (url, getToken) => {
  const token = await getToken();
  
  return fetch(url, {
    headers: {
      'Authorization': 'Bearer ' + token
    },
  }).then(res => res.json());
}

export default function useBooks () {
  const { getAccessTokenSilently } = useAuth0();
  const { data, error } = useSWR(['/books', getAccessTokenSilently], fetchWithToken);

  return {
    books: data,
    isLoading: !error && !data,
    isError: error
  }
}