How do I integrate **Auth0** authentication with React 19 + React Router 7 (Vite + Netlify) and embed the default login page?

Get Help
, ,
1

Problem

I’m building a SPA with React 19.1.0 and react-router 7.5.3 (Vite 6.3.5).
To handle login + RBAC I chose Auth0.
Auth0’s React docs target React Router 5/6 APIs, so I’m struggling to adapt them to v7.

Below is my full package.json for reference:

{
  "name": "e23-platform",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "react-router build && node netlify/prepare.js",
    "dev":   "cross-env NODE_ENV=development node ./dev-server.js",
    "start": "netlify serve",
    "typecheck": "react-router typegen && tsc"
  },
  "dependencies": {
    "@auth0/auth0-react": "^2.3.0",
    "@netlify/functions": "3.1.2",
    "@netlify/vite-plugin-react-router": "^1.0.1",
    "@react-router/node": "^7.5.3",
    "isbot": "^5.1.27",
    "react": "^19.1.0",
    "react-dom": "^19.1.0",
    "react-router": "^7.5.3"
  },
  "devDependencies": {
    "@mjackson/node-fetch-server": "0.6.1",
    "@react-router/dev": "^7.5.3",
    "@tailwindcss/vite": "^4.1.5",
    "@types/express": "^5.0.1",
    "@types/react": "^19.1.3",
    "@types/react-dom": "^19.1.3",
    "cross-env": "^7.0.3",
    "express": "^5.1.0",
    "netlify-cli": "^20.1.1",
    "tailwindcss": "^4.1.5",
    "typescript": "^5.8.3",
    "vite": "^6.3.5",
    "vite-tsconfig-paths": "^5.1.4"
  }
}

What I’ve tried

  1. Installed the SDK:
npm i @auth0/auth0-react
  1. Wrapped the app in Auth0Provider:
// auth0.tsx
import { Auth0Provider, type AppState } from "@auth0/auth0-react";
import React, { type JSX, type PropsWithChildren } from "react";
import { useNavigate } from "react-router";

interface Auth0ProviderWithNavigateProps {
  children: React.ReactNode;
}

export const Auth0ProviderWithNavigate = ({
  children,
}: PropsWithChildren<Auth0ProviderWithNavigateProps>): JSX.Element | null => {
  const navigate = useNavigate();

  const domain = process.env.REACT_APP_AUTH0_DOMAIN;
  const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID;
  const redirectUri = process.env.REACT_APP_AUTH0_CALLBACK_URL;

  const onRedirectCallback = (appState?: AppState) => {
    navigate(appState?.returnTo || window.location.pathname || "/");
  };

  if (!(domain && clientId && redirectUri)) {
    return null;
  }

  return (
    <Auth0Provider
      domain={domain}
      clientId={clientId}
      authorizationParams={{
        redirect_uri: redirectUri,
      }}
      onRedirectCallback={onRedirectCallback}
    >
      {children}
    </Auth0Provider>
  );
};```

3. Tried to protect a route with `withAuthenticationRequired` inside a **React Router 7** route config, how can I make it?:

```tsx
// routes.tsx
export default [
  index("routes/home.tsx"),
  route("login", "routes/login.tsx"),
  route("forgot-password", "routes/forgot-password.tsx"),
  route("reset-password", "routes/reset-password.tsx")
] satisfies RouteConfig;

Questions

  1. What is the idiomatic way to guard routes with Auth0 when using React Router 7?
  2. How can I mount the Auth0 hosted login page (or their ready-made Login component) inside my layout instead of a full-page redirect?

Environment

  • React 19.1.0
  • react-router-dom 7.2.0
  • @auth0/auth0-react 2.3.0
  • Vite 6.3.5 (+ @netlify/vite-plugin-react-router)
  • TypeScript 5.8.3
  • Node 20.11.0
  • Build target: Netlify Functions (no Express backend yet)

I’ve read Auth0’s “React Quickstart” and “RBAC” guides, but they rely on <Route render={...}> and other v5/v7 patterns.

Any pointers or working v7 snippets would be greatly appreciated!

3

Hi @alessiopersichetti,

Welcome to the Auth0 Community!

I have researched both React Router v6 and v7 route guards and learned that they are implemented similarly because the public API for route protection hasn’t changed between the versions. This means you can continue using the same logic for guarding routes in both versions. Additionally, the Upgrading from v6 | React Router documentation specifically mentions (“theoretically”) no breaking changes between v6 and v7.

I should also add that we have a backlog item to update our guide to include the SDK integration for React Router v7. For now, we have an example on using React Router 6: React Authentication By Example: Using React Router 6

While we recommend using Universal Login for login, you can still do this through embedded login. However, it’s essential to be aware of this approach’s security risks.

Let me know if you have any other questions.

Kind regards,
Rueben