How to use token in headers() ?

_app.tsx

_app.tsx

_app.tsx

_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>
    </>
  );
}

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);
    },
  });

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);
    },
  });

How to use token in headers() ?

Similar Threads

Similar Threads

Similar Threads