Logging out a user when a token expires

React Native
1

Hi guys, I have been using the app which we built during the course as a starting point for my own projects, which will hook up to a PHP back end API using OAuth2. My question is about logging out users. My problem is that I’m in our api client and not a component that can use hooks.

// I added a response transformer
apiClient.addAsyncResponseTransform(async response => {

    if (response.ok) {
        // if the response was 200 then just return the data
        return response.data;
    }

    if (response.problem) {
        // if there's a problem we will grab the original config in case we are going to retry
        const originalConfig = response.config;

        // if it isn't the auth endpoint, we got 401'ed, and we haven't retried yet
        if (originalConfig.url !== settings.discovery.authEndpoint && response.status === 401 && !originalConfig.retry) {
            originalConfig.retry = true;
            try {
                const token = await Storage.getAuthToken();

                if (token) {
                    const newToken = await refreshToken(token.refreshToken);
                    authStorage.storeAuthToken(newToken);

                    // run the original request with the new access token
                    return apiClient.any(originalConfig);
                }

                // Here is where I'm stuck. I'd like to log out the user here but can't use our `useAuth()` hook
                return Promise.reject('Log out user, no valid token issued');
            } catch (_error) {
                return Promise.reject(_error);
            }
        }

Does anyone know the best way to approach this ??

2

I think I’ve found the answer. The request and response transformers should be moved OUT of our client.js, and into either a react component that renders nothing but has useEffect() which adds the transformers to the client, allowing us access to all the react stuff, OR, to put the transformers into a hook, and use it somewhere near the top of our app hierarchy. I’ll see what works and post any solution I find here :slightly_smiling_face:

3

Did you found the solution?

1 Like
4

indeed i did, i created an api interceptor component! bone-native/ApiInterceptor.js at master · delboy1978uk/bone-native · GitHub

1 Like
5

Seems to work nicely, thanks for sharing :wink:

1 Like
6

I’m glad I could help! I’ve only just learned React Native recently!