best way to use access token to call the external API

[sursaone]

I have APIs exported as functions from common lib.
e.g. lib/services/teams.ts

export const getMyTeam = ()=> {
  const token =`??`
  fetch(`${BASE_URL}/api/teams`, {
     method: 'GET',
     headers: {
        authorization: `Bearer ${token}`,
        'Content-Type': 'application/json'
     }
 }
}

How can I get the token in above case so that same function will be working with both SSR and SSG?
Note: I am using the react-query so that I can't pass the token id or current user to the function method.

Also, how can I use this with another provider? e.g. I want to use logrocket with the custom provider and to set current user.

[kmjennison]

To get the user's ID token, use useAuthUser. There's an example app here that has a live demo.

The useAuthUser is a hook—so for the above example, you'll probably want your module to take the token as an argument, or refactor the fetch/authorization into its own module that manages the token value.

[shreyas-jadhav]

Yup, not for SSR obviously. My bad.

Let me know if this helps.

export​ ​const​ ​getServerSideProps​ ​=​ ​withAuthUserTokenSSR​(​{​
  ​whenUnauthed​: ​AuthAction​.​REDIRECT_TO_LOGIN​,​
​}​)​(​async​ ​(​{​ AuthUser ​}​)​ ​=>​ ​{​
  ​// Optionally, get other props.​
  ​const​ ​token​ ​=​ ​await​ ​AuthUser​.​getIdToken​(​)​
  ​const​ ​response​ ​=​ ​await​ ​fetch​(​'/api/my-endpoint'​,​ ​{​
    ​method​: ​'GET'​,​
    ​headers​: ​{​
      ​Authorization​: ​token​,​
    ​}​,​
  ​}​)​
  ​const​ ​data​ ​=​ ​await​ ​response​.​json​(​)​
  ​return​ ​{​
    ​props​: ​{​
      ​thing​: ​data​.​thing​
    ​}​
  ​}​
​}​)​

[sursaone]

@shreyas-jadhav This I saw but I am using reusable APIs that are on separate .ts files. And I want to access this token from a single point where I am configuring the fetch headers, like axios request interceptors.

[kmjennison]

@sursaone Here's how we do this in one of our apps. That code is made more complicated because we use Relay/GraphQL, but the basic idea is:

1. Create/recreate a fetcher function when the AuthUser changes, setting the Authorization header.
2. Use that fetcher to call APIs, both during SSR and from hooks.

You might want to check out SWR, which I find helpful to think about how to handle data fetching with hooks.

I agree, it would be good to add a simple example of this to the documentation.

[yeuem1vannam]

@kmjennison
I'm a bit worried because the idToken is not recommended to use in API call

If there is any way to exchange the idToken (of Firebase) to API's accessToken during the login procedure, it should be a great.

[kmjennison]

@yeuem1vannam Can you link to Firebase docs that discuss using an access token?