Kinde•4mo ago

refreshTokens when expired

I'm using Remix.js app, I've been trying to wrap my head around refreshTokens in Kinde and how to use it with remix.js. Since remix doesn't have yet any auth middleware it's necessary for us to run requireAuthSession on loaders in all protected routes. Could you please review my implementation, as I'm not sure it's correct. 1. First of all I check if user isAuthenticated, if this function returns false, then there is no point running token refresh. We just need to redirect user to login page. 2. Then we need to grab access_token. I shouldn't use getToken because this function automatically refresh tokens. I want existing cookie access_token, if it's expired I need to call refreshTokens and redirect to existing route with new headers (cookies). Getting into cookies manually seems odd to me, but it seems like using getToken isn't really feasible if it doesn't return new Headers...

export const requireAuthSession = async (request: Request) => {
    const { getUser, refreshTokens, isAuthenticated } =
        await getKindeSession(request);
    const isAuth = await isAuthenticated(); // 1
    const cookies = new Cookies(request.headers.get("Cookie"), { path: "/" }); // 2
    const accessToken = cookies.get("access_token"); // 2

    if (!isAuth || !accessToken) {
        throw redirect(ROUTE.LOGIN);
    }
    try {
        const ver = await jwtVerify(accessToken, JWKS);
        console.log({ ver });
    } catch (e) {
        const headers = await refreshTokens();
        if (request.method === "GET" && headers)
            throw redirect(request.url, { headers });
    }
    return getUser();
};

export const requireAuthSession = async (request: Request) => {
    const { getUser, refreshTokens, isAuthenticated } =
        await getKindeSession(request);
    const isAuth = await isAuthenticated(); // 1
    const cookies = new Cookies(request.headers.get("Cookie"), { path: "/" }); // 2
    const accessToken = cookies.get("access_token"); // 2

    if (!isAuth || !accessToken) {
        throw redirect(ROUTE.LOGIN);
    }
    try {
        const ver = await jwtVerify(accessToken, JWKS);
        console.log({ ver });
    } catch (e) {
        const headers = await refreshTokens();
        if (request.method === "GET" && headers)
            throw redirect(request.url, { headers });
    }
    return getUser();
};

7 Replies

Oli - Kinde•4mo ago

Hey @erich_fromm, Thanks for reaching out. Unfortunately I am not an expert in Remix, so I will have to reach out to my Remix team mate on this.

erich_frommOP•4mo ago

Hello Oli, did you get any update on this?

Oli - Kinde•4mo ago

Hey @erich_fromm, I will get an update for you on this by the end of the week.

Peteswah•4mo ago

Hey @erich_fromm, I made a new release of the remix sdk which fixes this issue 😄

erich_frommOP•4mo ago

Thanks @Peter (Kinde) , I've added one review comment

erich_frommOP•4mo ago

https://github.com/kinde-oss/kinde-remix-sdk/pull/15/files#r1718114793

GitHub

Peter/fix refresh tokens by peterphanouvong · Pull Request #15 · ki...

Explain your changes refresh tokens in the background Suppose there is a related issue with enough detail for a reviewer to understand your changes fully. In that case, you can omit an explanation...

Peteswah•4mo ago

Thanks @erich_fromm I'll just reply here - initially I had a check for the token expiry before calling refreshTokens like you had suggested but I was running into issues with that. I will need to take a deeper look into it next week. I think there is some condition in the TS SDK (which the Remix SDK is built on top of) that may be the cause of the weird behaviour. That's why it has been released in its current state But definielty something we want to address soon and optimise

Gaming

Programming

refreshTokens when expired