<DxD/>•13mo 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/>OP•13mo ago

@Nick Lucas any chance of help?

Krishna•13mo 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....