How to use token in headers() ?
in , here i have log in where i have token saved in setToken
_app.tsx i have this import React from 'react';
import { trpcApi, trpcApiClientProvider } from '../common/api';
import { reactQueryClient } from '../common/reactQueryClient';
import { QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { AuthProvider } from 'common/reusable/authContext';
import 'common/styles/global.css';
import type { AppProps } from 'next/app';
import Head from 'next/head';
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={trpcApiClientProvider} queryClient={reactQueryClient}>
<QueryClientProvider client={reactQueryClient}>
<AuthProvider>
<Component {...pageProps} />
</AuthProvider>
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>
</trpcApi.Provider>
</>
);
}
import React from 'react';
import { trpcApi, trpcApiClientProvider } from '../common/api';
import { reactQueryClient } from '../common/reactQueryClient';
import { QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { AuthProvider } from 'common/reusable/authContext';
import 'common/styles/global.css';
import type { AppProps } from 'next/app';
import Head from 'next/head';
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={trpcApiClientProvider} queryClient={reactQueryClient}>
<QueryClientProvider client={reactQueryClient}>
<AuthProvider>
<Component {...pageProps} />
</AuthProvider>
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>
</trpcApi.Provider>
</>
);
}
const logIn = () => {
mutateLogInUser({
...logInUser,
});
};
const { mutate: mutateLogInUser } = trpcApi.login.login.useMutation({
onError: (error) => {
const errorMessage: string = error.message;
if (errorMessage) {
setShowError(errorMessage);
setIsError(true);
setTimeout(() => {
setShowError('');
setIsError(false);
}, 5000);
}
},
onSuccess: (data) => {
setToken(data.token);
},
});
const logIn = () => {
mutateLogInUser({
...logInUser,
});
};
const { mutate: mutateLogInUser } = trpcApi.login.login.useMutation({
onError: (error) => {
const errorMessage: string = error.message;
if (errorMessage) {
setShowError(errorMessage);
setIsError(true);
setTimeout(() => {
setShowError('');
setIsError(false);
}, 5000);
}
},
onSuccess: (data) => {
setToken(data.token);
},
});
1 Reply
how here i can send token ?
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) => {
console.log('se randeaza asta 3');
token = newToken;
};
export const trpcApiClientProvider = trpcApi.createClient({
links: [
httpBatchLink({
url: process.env.NEXT_PUBLIC_TRPC_API,
fetch(url, options) {
return fetch(url, {
...options,
credentials: 'include',
});
},
headers() {
console.log('Headers called 2. Token:', token);
return {
Authorization: token,
};
},
}),
],
transformer: superjson,
});
console.log('se randeaza asta 1');
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) => {
console.log('se randeaza asta 3');
token = newToken;
};
export const trpcApiClientProvider = trpcApi.createClient({
links: [
httpBatchLink({
url: process.env.NEXT_PUBLIC_TRPC_API,
fetch(url, options) {
return fetch(url, {
...options,
credentials: 'include',
});
},
headers() {
console.log('Headers called 2. Token:', token);
return {
Authorization: token,
};
},
}),
],
transformer: superjson,
});
console.log('se randeaza asta 1');