How do you access the access_token in the frontend?

[gooseman1721]

The issue

I have a FastAPI endpoint set up like in the tutorial:

@app.get("/fief_user/")
async def get_fief_user(
    access_token_info: FiefAccessTokenInfo = Depends(auth.authenticated()),
):
    return access_token_info

and I want to call it from my frontend. To do this, I need to call the endpoint with a dictionary that includes an access_token.

I can login to Fief in my frontend. How do I extract the access_token of the current user so I can pass it to the backend?

[frankie567]

It depends on how you obtained the access token in your frontend. If you followed the browser example, the token is available through the fiefAuth.getTokenInfo method. It'll return you a FiefTokenResponse object containing the access token.

Then, you can pass it in the Authorization header when making API requests to your backend.

const tokenResponse = fiefAuth.getTokenInfo();
const accessToken = tokenResponse.access_token;
// Make a request with fetch; but it can be axios or whatever you like to make XHR requests
const response = await fetch(
    'http://localhost:8000/fief/user',
    {
        headers: {
            Authorization: `Bearer ${accessToken}`,
        }
    }
);
data = response.json()

[frankie567]

So, I was able to reproduce the issue with React 18 with Strict Mode enabled. Apparently, in development mode, strict mode automatically re-renders components to help discover some bugs or bad patterns.

In my tests though, the first call was working and the session was correctly set, even if the second one was failing. So I would say it shouldn't block you for now.

I'll try to investigate how to avoid this and improve our React integration.

[gooseman1721]

Getting rid of Strict Mode does remove the second POST call. I still can't access the access token though.

fiefAuth.storage.getCodeVerifier(); doesn't work for me. When I console log fiefAuth.storage, I get:

{"state":{"userinfo":null,"tokenInfo":null},"sessionStorage":{"test":"session storage test"}}

useFiefUserInfo() hook, on the other hand, seems to be working, it returns:

{"at_hash":<at hash>,"aud":[<aud>],"auth_time":<auth time>,"azp":<azp>,"c_hash":<c hash>,"email":<email>,"exp":<exp>,"fields":{"favourite_snail":"snail"},"iat":<iat>,"is_active":true,"is_superuser":false,"is_verified":false,"iss":"https://localhost:9000","sub":"<sub>","tenant_id":<tenant id>}

Maybe there is some issue with assigning data to storage?

[gooseman1721]

Okay, I think I got it. I used useFiefTokenInfo() hook and it got me the access_token of the current user, I was then able to call my API endpoint.

Is that the correct way of doing this?

[frankie567]

Yes, that's exactly it!

• [useFiefUserInfo](https://fief-dev.github.io/fief-js/functions/react.useFiefUserinfo.html) gives you the information about the user (it's the decoded ID token).
• [useFiefTokenInfo](https://fief-dev.github.io/fief-js/functions/react.useFiefTokenInfo.html) give you the result of the /token call, including the access token.

It's true that it's not very obvious from the example. I added something about this in the docs.

---

When I console log fiefAuth.storage, I get:

{"state":{"userinfo":null,"tokenInfo":null},"sessionStorage":{"test":"session storage test"}}

That's expected if you do this before authentication. After authentication, userinfo and tokenInfo should be filled with the values described above (useFiefUserInfo and useFiefTokenInfo actually just read those values in the storage).

sessionStorage is here to remember the PKCE code verifier, which is automatically cleared by authCallback when the call to /token is made.

[gooseman1721]

Alright! Good to have that info in the docs now.

About the storage:

I have this code in my page:

  const fiefAuth = useFiefAuth();
  const isAuthenticated = useFiefIsAuthenticated();
  const tokenResponse = useFiefTokenInfo();

  console.log(isAuthenticated);
  console.log(JSON.stringify(fiefAuth.storage));
  console.log(JSON.stringify(tokenResponse));

and the output is:

true
{"state":{"userinfo":null,"tokenInfo":null},"sessionStorage":{}}
{"access_token":<access token>,"id_token":<id token>,"token_type":"bearer","expires_in":3600}

So I guess that's some different storage the hooks are accessing?