Refresh token, Client and Server Side conflicts

[HarunKilic]

Hi guys

I am building application with Next and Apollo. The idea is to check and refresh tokens at every request and not when getting unauthorized error, as some request will respond regarding to the attached access token.

Scenario:

The user has been authenticated, and the access token is now expired.
The user makes a request that need a valid access token, due to expiration, it has to be refreshed.

The problem:

The first token needed request finds out that the access token is expired, so it sends a request to the endpoint to get a new one. This goes smoothly and it will get new tokens.

The second request is somehow now getting the new states, so it will also believe that the access token is expired, and will try to get a new token with old states. This will fail, as it will send used refresh token which is invalid.

Solution?

Maybe only calling the refresh method with maxClientAge and not getSession/useSession or jwt callback.

Did anyone run into something like this?

WithApollo

let isRefreshing = false;
let pendingRequests: any = [];

const resolvePendingRequests = () => {
    pendingRequests.map((callback: any) => callback());
    pendingRequests = [];
};

function createIsomophLink(ctx: GetServerSidePropsContext) {
    const requestLink = new ApolloLink((operation, forward) => {
        const { operationName } = operation;
        const operNoNeededToken: string[] = [
            'getAllProducts',
            'getAllCurrencies',
            'getAllCategoriesWithDescription',
            'getByDescriptions',
            'getAllProductsBrand',
        ];
        if (!operNoNeededToken.includes(operationName)) {
            let forward$;
            if (!isRefreshing) {
                const oldHeaders = operation.getContext().headers;
                isRefreshing = true;
                forward$ = fromPromise(
                    getSession(ctx)
                        .then((session) => {
                            if (session && session.accessToken) {
                                operation.setContext({
                                    headers: {
                                        ...oldHeaders,
                                        Authorization: `Bearer ${session.accessToken}`,
                                    },
                                });
                                return session.accessToken;
                            }
                            return null;
                        }).then(() => {
                            resolvePendingRequests();
                            return true;
                        })
                        .catch(() => {
                            pendingRequests = [];
                            return null;
                        })
                        .finally(() => {
                            isRefreshing = false;
                        }),
                ).filter((value) => Boolean(value));
            } else {
                forward$ = fromPromise(
                    new Promise((resolve: any) => {
                        pendingRequests.push(() => resolve());
                    }),
                );
            }
            return forward$.flatMap(() => forward(operation));
        }

        return new Observable((observer) => {
            let handle: any;
            Promise.resolve(operation)
                .then(() => {
                    handle = forward(operation).subscribe({
                        next: observer.next.bind(observer),
                        error: observer.error.bind(observer),
                        complete: observer.complete.bind(observer),
                    });
                })
                .catch(observer.error.bind(observer));
            return () => {
                if (handle) handle.unsubscribe();
            };
        });
    });

    return ApolloLink.from([
        requestLink,
        splitLink,
    ]);
}

Next Auth

async function refreshAccessToken(refreshToken: string): Promise<IToken | null> {
    try {
        if (!refreshToken) {
            return null;
        }

        const result = await client.request<RefreshTokenMutationResult['data'], RefreshTokenMutationVariables>(
            CHECK_REFRESH_TOKEN,
            { refreshToken },
        );

        if (result?.refreshToken) {
            const { id, accessToken, refreshToken } = result.refreshToken;

            return {
                id,
                accessToken,
                accessTokenExpires: getAccessTokenExpiry(accessToken),
                refreshToken,
            };
        }

        return null;
    } catch (error) {
        return null;
    }
}

// Callbacks
    callbacks: {
        async signIn() {
            // Todo: Check confirmation and disabled
            const isAllowedToSignIn = true;
            
            if (isAllowedToSignIn) {
                return true;
            }
            return false;
        },
        async jwt(token: IToken, user: AuthPayloadModel, account): Promise<IToken> {
            // Initial Sign In
            if (account && user) {
                return {
                    id: user.id,
                    accessToken: user.accessToken,
                    accessTokenExpires: getAccessTokenExpiry(user.accessToken),
                    refreshToken: user.refreshToken,
                };
            }

           // If not expired
            if (Date.now() < token.accessTokenExpires) {
                return token;
            }

            const renewedToken = await refreshAccessToken(token.refreshToken);

            if (renewedToken) {
                return renewedToken;
            }

            return Promise.reject();
        },
        async session(session, token: IToken) {
            if (token) {
                session.accessToken = token.accessToken;
            }

            return Promise.resolve(session);
        },
    },

[HarunKilic]

Seems like the issue is triggered due to the server side and client side differentials.
How would i tell the client side to refresh the session?