User returned in isAuthenticated always null

[jcjp]

I have everything setup using form strategy as a temporary strategy to authenticate.

on my login page I have this loader function:

export async function action({ request }: ActionFunctionArgs) {
  const user = await authenticator.authenticate(FORM_STRATEGY, request);

  if (!user) return redirect("/login");

  const cookie = user.get("set-cookie") ?? "";
  const [accessToken] = cookie.split(";");
  const [key] = accessToken.split("=");

  const session = await getSession(user.get("Cookie"));
  session.set(key, accessToken);

  return redirect("/", {
    headers: {
      "Set-Cookie": await commitSession(session),
    },
  });
}

And then on my protected pages, I have a loader function that will redirect me back to login page if I am not authenticated however when I added this piece of code the authenticator.isAuthenticated is always null.

export const loader: LoaderFunction = async ({ request }: LoaderFunctionArgs) => {
  const user = await authenticator.isAuthenticated(request, {
    failureRedirect: "/login",
  });
  console.log("Protected user:", user); <--- always null
  return user;
};

I use cookieSessionStorage strategy and our BE only returns a token, not a user data. I also want to know how to check the expiry of the token and probably refresh as long as the user is active. I so confused on how to do this, I read a lot of resources about this, should I just abandoned the isAuthenticated? And just check the cookie on every request?

[sergiodxa]

If you don't get anything from isAuthenticated it can means the cookie was not sent by the browser (e.g. you set secure: true and you're not using http or the cookie expired).

Another issue could be that the browser sent the cookie, but the user data is not in the correct session key, by default the Authenticator class expects the session key to be user, so when you do session.set(key, accessToken); the key should be user.

For convenience, the Authenticator instance has an authenticator.sessionKey that you can use in your app, and when you instantiate the Authenticator you can pass a new key:

let authenticator = new Authenticator(sessionStorage, { sessionKey: "custom" })

And of course if you customize it then authenticator.sessionKey will be your custom value.

[jcjp]

If you don't get anything from isAuthenticated it can means the cookie was not sent by the browser (e.g. you set secure: true and you're not using http or the cookie expired).

Another issue could be that the browser sent the cookie, but the user data is not in the correct session key, by default the Authenticator class expects the session key to be user, so when you do session.set(key, accessToken); the key should be user.

For convenience, the Authenticator instance has an authenticator.sessionKey that you can use in your app, and when you instantiate the Authenticator you can pass a new key:

let authenticator = new Authenticator(sessionStorage, { sessionKey: "custom" })

And of course if you customize it then authenticator.sessionKey will be your custom value.

I have the cookie set to secure true and only https, maybe that's the reason why it's empty meaning I can't access it on the client or browser side. However I tried using the cookie helper from Remix and was able to get the cookie details or using request.headers.get("cookie"). I actually have a static key so it must be the cookie configuration. Is it possible that user is not a user object just a string token?

[sergiodxa]

The user data can be anything, I store a token for example, but ensure that you're using the authenticator.sessionKey, otherwise authenticator.isAuthenticated will not be able to find the user data.

The Session is basically an object, and if you do session.set("key1", "data") that will mean your session is now this

{ "key1": "data" }

If you then try to do session.get("key2") it won't find data because it's a different key, if you don't use authenticator.sessionKey to save the user data (your string) then the next time you call authenticator.isAuthenticated it will try to use a different key and not find your data.

[jcjp]

The user data can be anything, I store a token for example, but ensure that you're using the authenticator.sessionKey, otherwise authenticator.isAuthenticated will not be able to find the user data.

The Session is basically an object, and if you do session.set("key1", "data") that will mean your session is now this

{ "key1": "data" }

If you then try to do session.get("key2") it won't find data because it's a different key, if you don't use authenticator.sessionKey to save the user data (your string) then the next time you call authenticator.isAuthenticated it will try to use a different key and not find your data.

Finally I now know where the issue lies, so not only on the sessionStorage we need to set the key and value or data. We should also set it on the authenticator as you mentioned. Now I can see it using authenticator.sessionKey and then from there I got an infinite loading issue in which I have to remove successful redirection to the protected routes since the current route is already there.

Thanks I think we can now close this discussion!