Working with access token that is given by external server

[sinanptm]

Summary

i am using next.js for my client side only . and authentication are done throw

import axios from 'axios';
import { IPatient } from "@/types";

const axiosInstance = axios.create({
  baseURL: `${process.env.NEXT_PUBLIC_API_URL}/patient/auth`,
  headers: {
    'Content-Type': 'application/json',
  },
  withCredentials:true
});

axiosInstance.interceptors.response.use(
   (response:any)=>{
      if(response.data.accessToken){
         const auth = JSON.parse(localStorage.getItem("auth")||"{}");
         console.log(auth);
         auth.patientToken = response.data.accessToken;
         localStorage.setItem("auth",JSON.stringify(auth));
         
      }
      return response
   }
)

export const validateOtpPatient = async (email: string, otp: number) => {
   const response = await axiosInstance.post(`/otp-verification`, { email, otp });
   return response.data;
};

after completing otp verification i sotore access token in the localstorage

and according to user has token on localstorage i need to render some pages like profile and not to render singin, singup, otp page and all

but when i render like this getting error

import Image from "next/image";
import RegistrationForm from "@/components/forms/patient/RegistrationForm";
import { Banners } from "@/constants";
import { useAuth } from "@/hooks/useAuth";
import { notFound } from "next/navigation";
const Register = () => {
   const {patientToken} = useAuth();
   if(patientToken){
      notFound();
   }
   
   return (
      <div className="flex h-screen max-h-screen">
         <section className="remove-scrollbar container">
            <div className="sub-container max-w-[860px] flex-1 flex-col py-10">
               <Image
                  src="/assets/icons/logo-full.svg"
                  height={1000}
                  width={1000}
                  alt="patient"
                  className="mb-12 h-10 w-fit"
               />

               <RegistrationForm />

               <p className="copyright py-12">© 2024 AVM Ayurveda&apos;s</p>
            </div>
         </section>

         <Image
            src={Banners.patient_register}
            height={1000}
            width={1000}
            alt="patient"
            className="side-img max-w-[390px]"
         />
      </div>
   );
};

export default Register;

Additional information

app-index.js:33 The above error occurred in the <NotFoundErrorBoundary> component:

    at SignIn (webpack-internal:///(app-pages-browser)/./app/(patient)/signin/page.tsx:25:89)
    at ClientPageRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/client-page.js:14:11)
    at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:243:11)
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82:11)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
    at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:349:11)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11)
    at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:153:9)
    at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:228:11)
    at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js:16:44)
    at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:370:11)
    at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:243:11)
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82:11)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
    at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:349:11)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11)
    at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:153:9)

Example

https://avm-care.vercel.app/

[icyJoseph]

Shouldn't this part:

   if(patientToken){
      notFound();
   }

Be:

   if(!patientToken){
      notFound();
   }

Also, the Register page's rendering should be deferred to client side.

[sinanptm]

Shouldn't this part:

   if(patientToken){
      notFound();
   }

Be:

   if(!patientToken){
      notFound();
   }

Also, the Register page's rendering should be deferred to client side.

Thanks you For the Replay Bro

[icyJoseph]

If that solves your issue, don't forget to mark as answered.