Nextjs urql auth exchange running on server when it should run on client

Question

When trying to add an auth exchange to my urql client, it gets run on the server when the app starts and on the client subsequent times until refresh. The problem is in my getAuth function, which is as follows:

const getAuth = async ({ authState }) => {
    const token = localStorage.getItem('5etoken');

    if (!authState) {
        if (token) {
            return { token };
        }
        return null;
    }

    if (token) {
        const decoded = jwt.decode(token) as jwt.JwtPayload;

        if (decoded.exp !== undefined && decoded.exp < Date.now() / 1000) {
            return { token };
        }
    }

    return null;
};

When I run my app, I get an error saying localStorage is undefined. If I check that the function is running in the browser, then my token never gets set on app start and I'm logged out when I refresh the page, so I can't use that approach. I've tried multiple approaches:

1. Using dynamic imports with ssr set to false
2. Creating the client in a useEffect hook
3. Using next-urql's withUrqlClient HOC only using the auth exchange when in the browser

None of what I tried worked and I'm running out of ideas.

Answer 1

I eventually figured out that createClient was being called on the server side. I managed to force it to run in the browser by creating the client in a useEffect hook. I'm not sure why creating it in a useEffect didn't work months ago.