How to reset the session/verify function after refreshing the access token

[dan-cooke]

Just wondering if theres a simple way of doing this?

I can't see any simple method without storing an expires_in in the object returned from the verify function,
Then in every loader/action checking to see if we have expired, refreshing the tokens, overwriting the session, and returning the new Set-Cookie header.

It would be nice if we could just invalidate the return of verify function, causing it to use some refresh method, and hence updating the return object for every consumer.

[sergiodxa]

Once you know who's the user (the verify function is called) what you do with the params is outside the scope of Remix Auth, so if you decide you need or not the access token it's up to you.

This means, refreshing it is also responsibility of the app.

That said, one thing you can do is to create a wrapper of the isAuthenticated method, get the access token and expiration date, if it's expired refresh it and redirect to the same URL while setting the session cookie to have the new token and expiration date, that will trigger the loader again and this time it will have a non expired token and continue the normal flow.

[designbyadrian]

I'm sure many of us would love example code for this.

[sergiodxa]

If your Authenticator stores a type like this on the session

type User = { accessToken: string; refreshToken: string; expirationDate: string };

You could do this

async function authenticate(
  request: Request,
  session: Session,
  headers: Headers
) {
  try {
    // get the auth data from the session
    let user = session.get(auth.sessionKey) as User;

    // if not defiend, redirect to login
    if (!user) throw redirect("/login");

    // if expired throw an error
    if (new Date(user.expirationDate) < new Date()) {
      throw new AuthorizationError("Expired");
    }

    // return the user data
    return user;
  } catch (error) {
    // check if the eror is an AuthorizationError
    if (error instanceof AuthorizationError) {
      // refresh the token somehow using the strategy and the refresh token
      let user = await refreshToken(
        session.get("strategy"),
        session.get(auth.sessionKey).refreshToken
      );

      // update the user data on the sessino
      session.set(auth.sessionKey, user);

      // commit the session and append the Set-Cookie header
      headers.append("Set-Cookie", await commitSession(session));

      // redirect to the same URL if the request was a GET
      if (request.method === "get") throw redirect(request.url, { headers });

      // return the user so you can use it in a POST
      return user;
    }
    // throw again any unexpected error
    throw error;
  }
}

And you could use that in your loaders or actions like this

export let action: ActionFunction = async ({ request }) => {
  let session = await getSession(request);
  let headers = new Headers();
  let user = await authenticate(request, session, headers);
  // do something
  let data = await getSomeData(user);
  // and return the headers in the response
  return json(data, { headers });
};

For loaders it will be exactly the same.

[sergiodxa]

I moved this to my blog https://sergiodxa.com/articles/working-with-refresh-tokens-in-remix, removing the Remix Auth parts