HTTP: 400 on authenticate with missing refresh-token when devMode=false (refresh-token not persisted correctly) #44
Description
We recently set up auth-kit-react with TanStack (i.e. fully client side), following the instructions on https://workos.com/docs/user-management/client-only/2-add-authkit-to-your-app
Locally, all is fine as devMode is True, and refresh-token is stored in local storage.
When deploying the site however, we get a 400 error whenever auth-kit tries to reauthenticate, as it does not pass the refresh-token.
However, setting devMode true works well also in production.
Anyone got an idea why the prod setup does not work in our case?
Our test-setup to debug:
import { Outlet, createRootRoute, useNavigate } from '@tanstack/react-router';
import { AuthKitProvider } from '@workos-inc/authkit-react';
import { useEffect, useState } from 'react';
import { useLocation } from '@tanstack/react-router';
import { useAuth } from '@workos-inc/authkit-react';
function ProviderWrapper() {
const [redirect, setRedirect] = useState<{ returnTo: string; search: any } | null>(null);
const navigate = useNavigate();
useEffect(() => {
if (redirect) {
navigate({ to: redirect.returnTo, search: redirect.search });
}
}, [redirect]);
return (
<>
<AuthKitProvider
clientId={getEnvVar('WORKOS_CLIENT_ID')}
redirectUri={getWorkosRedirectURI()}
onRedirectCallback={({ state }) => {
if (state?.returnTo) {
setRedirect({ returnTo: state.returnTo, search: state.search });
}
}}
>
<ShortcutProvider>
<RecoilRoot>
<Root />
</RecoilRoot>
</ShortcutProvider>
</AuthKitProvider>
</>
);
}
export default function useUser() {
const { user, getAccessToken, isLoading, signIn } = useAuth();
const location = useLocation();
useEffect(() => {
if (!isLoading && !user) {
signIn({ state: { returnTo: location.pathname + '/', search: location.search } });
}
}, [isLoading, user]);
return { user, isLoading, getAccessToken };
}
function Root() {
const { user, isLoading, getAccessToken } = useUser();
if (isLoading || !user) return <FullScreenSpinner />;
return <>Hello world</>;
}