DxD
DxD7mo ago

Why my Authorization does not update ?

i have this in _app.tsx
export default function App({ Component, pageProps }: AppProps) {
return (
<>
<Head>
<title lang="en">Holistic Drop</title>
<meta name="New tool for your company" content="Holistic Drop" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="favicon.ico" />
</Head>
<trpcApi.Provider client={createTRPCProxyClient} queryClient={reactQueryClient}>
<QueryClientProvider client={reactQueryClient}>
<AuthProvider>
<Component {...pageProps} />
</AuthProvider>
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>
</trpcApi.Provider>
</>
);
}
export default function App({ Component, pageProps }: AppProps) {
return (
<>
<Head>
<title lang="en">Holistic Drop</title>
<meta name="New tool for your company" content="Holistic Drop" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="favicon.ico" />
</Head>
<trpcApi.Provider client={createTRPCProxyClient} queryClient={reactQueryClient}>
<QueryClientProvider client={reactQueryClient}>
<AuthProvider>
<Component {...pageProps} />
</AuthProvider>
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>
</trpcApi.Provider>
</>
);
}
and this is my client
import superjson from 'superjson';

import { AppRouter } from '../api-types';
import { httpBatchLink } from '@trpc/client';
import { createTRPCReact } from '@trpc/react-query';

export const trpcApi = createTRPCReact<AppRouter>();
let token: string = '';
export const setToken = (newToken: string) => {
token = newToken;
};

export const createTRPCProxyClient = trpcApi.createClient({
links: [
httpBatchLink({
url: process.env.NEXT_PUBLIC_TRPC_API,
fetch(url, options) {
return fetch(url, {
...options,
credentials: 'include',
});
},
headers() {
return {
Authorization: `Bearer ${token}`,
};
},
}),
],
transformer: superjson,
});
import superjson from 'superjson';

import { AppRouter } from '../api-types';
import { httpBatchLink } from '@trpc/client';
import { createTRPCReact } from '@trpc/react-query';

export const trpcApi = createTRPCReact<AppRouter>();
let token: string = '';
export const setToken = (newToken: string) => {
token = newToken;
};

export const createTRPCProxyClient = trpcApi.createClient({
links: [
httpBatchLink({
url: process.env.NEXT_PUBLIC_TRPC_API,
fetch(url, options) {
return fetch(url, {
...options,
credentials: 'include',
});
},
headers() {
return {
Authorization: `Bearer ${token}`,
};
},
}),
],
transformer: superjson,
});
that setToken i uuse in login component as here
const logIn = () => {
mutateLogInUser({
...logInUser,
});
};
const { mutate: mutateLogInUser } = trpcApi.login.login.useMutation({
onError: (error) => {
if (error.message) {
setMessage(error.message, true);
}
deleteForm();
},
onSuccess: (data: MyData) => {
setToken(data.token);
},
});
const logIn = () => {
mutateLogInUser({
...logInUser,
});
};
const { mutate: mutateLogInUser } = trpcApi.login.login.useMutation({
onError: (error) => {
if (error.message) {
setMessage(error.message, true);
}
deleteForm();
},
onSuccess: (data: MyData) => {
setToken(data.token);
},
});
How to change my code to update Authorization ?
2 Replies
DxD
DxD7mo ago
@Nick Lucas any chance of help?
Krishna
Krishna7mo ago
I think you are storing the token in a cookie... why not pick it from there? If you dont want to store it in a cookie for some reason... store it in localstorage / sessioinstorage.... or store it in a globabl-state like Recoil. here you seem to be using variables to store values... the variables deem to reset on re-mount of the component....