T
tRPC

How to use token in headers() ?

How to use token in headers() ?

DDxD
View on Discord
11/17/2023
in _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>
    </>
  );
}
, here i have log in where i have token saved in setToken 
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);
    },
  });
DDxD
View on Discord
11/17/2023
how here 
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');
i can send token ?

Looking for more? Join the community!

T
tRPC

How to use token in headers() ?

Join Server
Recommended Posts
Creating inner context for AWS Lambda Context OptionsHi All, I have been using tRPC for many routes, and I have started to realize I need to call certaiRetry even when disabledI'm not positive if this is a tRPC question or Tanstack.... but I have my query disabled per TanstacMiddleware or request lifecycle hook to run after procedure?Hi, I am using trpc context to create a database client for an incoming request. My understanding iUse RxJS Observable for subscription procedureOn the server, I have an RxJS Observable that I'd like to use for one of my subscription procedures.Individual mutation requests errorHello, quick question regarding the error handling for tRPC So I'm creating kind of a chatroom wherTRPCClientError: fetch failed, using Node 18 in DockerI have both my app and my tRPC server running in Docker via the following docker-compose config: ("n