Auth Provider is missing. Make sure, you are using this component inside the auth provider.

[emilov2501]

• I checked the documentation and found no answer
• I am running the latest version

packages

"react": "^18.2.0",
"react-auth-kit": "^3.0.2-alpha.19",
"react-router-dom": "^6.21.1",

During the authorization process, I came across an error that my AuthProvider was missing, I double-checked everything and this should have worked, starting from v3.0.1everything worked fine for me until the moment that react-auth-kit/createRefresh was missing in this version, I updated to the ^3.0.2-alpha.19 version and came across this, help me what to do

store

const myRefreshApi = createRefresh({
  interval: 10,
  refreshApiCallback: async (param) => {
    try {
      const response = await authRepository.requestToRefreshToken(
        param.authToken as string
      );
      console.log("Refreshing");
      return {
        isSuccess: true,
        newAuthToken: response.accessToken,
        newAuthTokenExpireIn: 10,
        newRefreshTokenExpiresIn: 60,
      };
    } catch (error) {
      console.error(error);
      return {
        isSuccess: false,
      };
    }
  },
});

export const authStore = createStore<any>({
  authName: "_auth",
  authType: "localstorage",
  refresh: myRefreshApi,
});

Screenshots

[alanbernale]

I'm having the same issue, but with using the @auth-kit/react-router library and private routes. Any ideas on how to fix it?

packages

"react": "^18.2.0",
"react-auth-kit": "^3.0.1",
"react-router-dom": "^6.22.0",

main.tsx

const store = createStore<{username: string}>({
  authName:'_auth',
  authType:'cookie',
  cookieDomain: window.location.hostname,
  cookieSecure: window.location.protocol === 'https:',
});

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <AuthProvider
      store={store}
    >
      <BrowserRouter>
        <ThemeProvider>
          <AppProvider>
            <App/>
          </AppProvider>
        </ThemeProvider>
      </BrowserRouter>
    </AuthProvider>
  </React.StrictMode>,
)

App.tsx

export default function App () {
  return (
    <Routes>
      <Route path="/login" element={<Login/>}/>
      <Route path="/" element={
        <RequireAuth fallbackPath="/login">
          <DashboardIndex/>
        </RequireAuth>
      }/>
      <Route path="/products" element={
        <RequireAuth fallbackPath="/login">
          <ProductIndex/>
        </RequireAuth>
      }/>
      <Route path="*" element={<NotFountIndex/>}/>
    </Routes>
  )
}

Screenshot

[gb1]

Same issue, reverted to ^2.12.7 to resolve it.

[emilov2501]

@gb1 which react-router version use?

[gb1]

Here's my current dependencies, however I did run ncu -u when I updated react-auth-kit so I would guess it should have been also updated to latest:

  "dependencies": {
    "@hookform/resolvers": "^3.3.4",
    "@radix-ui/react-accordion": "^1.1.2",
    "@radix-ui/react-alert-dialog": "^1.0.5",
    "@radix-ui/react-aspect-ratio": "^1.0.3",
    "@radix-ui/react-avatar": "^1.0.4",
    "@radix-ui/react-checkbox": "^1.0.4",
    "@radix-ui/react-collapsible": "^1.0.3",
    "@radix-ui/react-context-menu": "^2.1.5",
    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-hover-card": "^1.0.7",
    "@radix-ui/react-icons": "^1.3.0",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-menubar": "^1.0.4",
    "@radix-ui/react-navigation-menu": "^1.1.4",
    "@radix-ui/react-popover": "^1.0.7",
    "@radix-ui/react-progress": "^1.0.3",
    "@radix-ui/react-radio-group": "^1.1.3",
    "@radix-ui/react-scroll-area": "^1.0.5",
    "@radix-ui/react-select": "^2.0.0",
    "@radix-ui/react-separator": "^1.0.3",
    "@radix-ui/react-slider": "^1.1.2",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-switch": "^1.0.3",
    "@radix-ui/react-tabs": "^1.0.4",
    "@radix-ui/react-toast": "^1.1.5",
    "@radix-ui/react-toggle": "^1.0.3",
    "@radix-ui/react-toggle-group": "^1.0.4",
    "@radix-ui/react-tooltip": "^1.0.7",
    "@sentry/react": "^7.91.0",
    "@tanstack/react-query": "^5.17.1",
    "@tanstack/react-query-devtools": "^5.17.1",
    "@tanstack/react-table": "^8.11.3",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
    "cmdk": "^0.2.0",
    "date-fns": "^3.0.6",
    "embla-carousel-react": "^8.0.0-rc18",
    "jsdom": "^23.0.1",
    "lottie-react": "^2.4.0",
    "lucide-react": "^0.303.0",
    "next-themes": "^0.2.1",
    "react": "^18.2.0",
    "react-auth-kit": "^2.12.7",
    "react-day-picker": "^8.10.0",
    "react-dom": "^18.2.0",
    "react-error-boundary": "^4.0.12",
    "react-hook-form": "^7.49.2",
    "react-resizable-panels": "^1.0.7",
    "react-router-dom": "^6.21.1",
    "recharts": "^2.10.3",
    "sonner": "^1.3.1",
    "tailwind-merge": "^2.2.0",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.8.0",
    "zod": "^3.22.4"
  }