Unable to ensure authentication is available or not, before loading a page

[tito]

We're working with a stack that includes NextJS, Fief, and OpenAPI, and our goal is to make an OpenAPI call from the client side using the user token if exists.

However, we lack of a method to determine whether the user is authenticated or not before making the OpenAPI call. We couldn't find any functionality in the Fief API to check its loading or authentication state.

We followed the NextJS integration route, and have:

<FiefAuthProvider currentUserPath="/api/current-user">
  {children}
</FiefAuthProvider>

Inside of a page, we use useFiefAccessTokenInfo(). It is by default null, but may change later with user information if they exists.

We tried an approach with another wrapper like:

"use client";

import { useFiefAccessTokenInfo } from '@fief/fief/nextjs/react';

export default function FiefEnsureAuthWrapper({ children }) {
  const accessTokenInfo = useFiefAccessTokenInfo();

  return (
    <>
      {accessTokenInfo ? children : <div>Loading...</div>}
    </>
  );
}

But it stay on Loading if user is not authenticated.

We want to know if the user is authenticated or not before doing an API call.

What would be the approach ?

[frankie567]

I'm not sure I entirely what you want to achieve. In the Next.js integration, we suggest to use a middleware to protect routes directly server-side: https://docs.fief.dev/integrate/javascript/ssr/nextjs/#2-add-the-middleware

By doing this, you can make sure that, when a route is accessed, the user is correctly authenticated. So there is no need to have dedicated logic on the client side.

[tito]

Problem with page required authentication

We have the middleware, but on the first load, even if the token is validated in server, when the page load in the client, the useFiefAccessTokenInfo() is reactive, and first return null THEN the authentication.
Meaning all the pages that are protected behind the middleware MUST also include sort-of wrapper to wait the useFiefAccessTokenInfo() not to be null.

Page shared between anonymous user and authentified user

Think about this imaginary example:

1. GET /my/user -> Return a JSON {"name": "Anonymous"}
2. GET /my/user + Authorization -> Return a JSON {"name": "User X"}

Because the page is reactive, it will always do 2 requests, with the first one beeing without Authorization. And we don't know how to wait because maybe the user is authenticated, and maybe the useFiefAccessTokenInfo() will return the token.

[frankie567]

Ok, I understand.

We could leverage the fact that the middleware add this info in headers, so this could be passed down to React by getServerSideProps or retrieved through the new App Router headers function.

The context provider must be modified so it can be directly instantiated with existing data. I'll try to revisit this, but help is welcome.