Authenticated loaders

[barbinbrad]

It's my understanding that all matched loaders are fetched in parallel. Is there a best practice for solving the problem that we only want to execute certain loaders if a user is authenticated?

[chadams]

would really like to kknow the answer to this as well., Looked over the documents and see no mention of this. Basically need to make sure config and auth is ran BEFORE any sub routes. right now they are run in parallel and its making fetch calls with-out having the bearer tokens

[pgsandstrom]

Its not a problem exposing API endpoints to unauthenticated user. They could just scrape them from the js bundle either way. For me this is more a question of tidyness. Its confusing to see a bunch of failed requests in the logs, both on the frontend and on the backend.

[barbinbrad]

I had an idea I wanted to run past you guys. It's not at all my own. But in other frameworks (.NET, for example) -- we often use decorators to "protect" a function.

What do you think about using JavaScript decorators to do the job here (in lieu of adding the same check and redirect code to each loader)?

@authenticated
export const loader = () => {}

I don't have experience with JavaScript decorators yet, but I'm thinking they are just function wrappers.

[chadams]

what we really need is a third argument to loader that passes in the parent loaders result, this way you can await those responses before proceeding. TanStack router does this

[supersnager]

const router = createBrowserRouter([
  {
   path: "/users"
   element: <UsersPage />
   loader: () => {
     return fetchUsers();
   }
  }
]);

ReactDOM.createRoot(document.getElementById("root")).render(
<AuthProvider>
  <SecondProvider>
    <ThirdProvider>
      <RouterProvider  router="router" />
    </ThirdProvider>
  </SecondProvider>
</AuthProvider>);

I have a similar problem.
My AuthProvider doesn't render children when authState is false (or when the token is fetching), however, due to React reconciliation algorithm the router loader is called first (before the AuthProvider renders).
I'm not sure but this is probably caused by the use of the following code:

react-router/packages/react-router/lib/components.tsx

Line 60 in a1ad764

let state: RouterState = useSyncExternalStoreShim(

After digging in the react-router docs and source I haven't found a better solution than checking auth state in the loader.
However, the problem is even worst when you have your router definition outside of the React tree because in the loader function there is no direct access to the state from the AuthProvider.

I'm trying to resolve this by wrapping the AuthProvider with the redux Provider and using the redux state directly (outside of the react tree) in the loader.

Another solution (without redux) is to save an auth state in the simple store object, set its value in the AuthProvider imperatively, and use it in the loader.
Something like this:

export const AuthStore = {
 loggedIn: false
}

It is possible that my way is good, but I am not sure.
I would really appreciate if someone from the react-router team could explain what is the recommended way to secure the route without downloading data through the loader.
I don't believe that this was not thought through when designing v6.4 because after all, it is one of the basic things in applications that use routing.

The new solutions used in v6.4 combined with React Relay will be awesome if this problem is solved.

[supersnager]

Here is my simple pattern: #9424 (reply in thread)

[chadams]

Adding this here for those stumbling onto this conversation
#9188

Might be worth nothing how other frameworks do it:
https://react-location.tanstack.com/guides/route-loaders#parallelized-execution-vs-serial-execution

[brophdawg11]

Hey folks! At the moment, just like Remix, all loaders are called in parallel and you should be checking stuff like auth state in all of your loaders. This is also important because with nested routing, re-used routes will not have their loaders re-executed. So if you only check in the /parent loader, then going from /parent/child-1 to /parent/child-2 will not re-check.

We have some ideas floating around internally on ways to solve this, so we'll update this discussion as soon as we start to solidify our ideas there.

[lzm0x219]

mark🙀

[ryanflorence]

We're designing the middleware API right now that will meet this use case and will be publishing an RFC soon.

You can see its progress on the roadmap here: Roadmap (view)

[danielpza]

Something like this can work:

let resolveAuthenticatedPromise: (result: unknown) => void;

let authenticatedPromise = new Promise((resolve) => {
	resolveAuthenticatedPromise = resolve;
});

/** Call this function when the user is authenticated */
export function authenticateUser() {
	resolveAuthenticatedPromise(undefined);
}

/**
 * Makes sure the user is authenticated, useful to avoid 401 calls to the api
 *
 * @example
 * 	const loader = async () => {
 * 		return defer({ data: ensureAuthenticated().then(() => fetchData()) });
 * 	};
 */
export async function ensureAuthenticated() {
	return authenticatedPromise;
}

[phoneticallySAARTHaK]

My bad, I should have tested on a minimal example before posting the issue.
I did test it worked as expected.
Most probably there was some unupdated loader (awaiting a promise that would never resolve) which was stalling the whole render.

Using a helper function is more convenient

export const createAuthenticatedLoader = (loader) => {
  if (await ensureSession()) return loader();
  else throw redirect('/login');
};

[knownasilya]

Took the idea above and fleshed it out

export const authenticatedLoader = <T extends LoaderFunction<any>>(
  load: T
): LoaderFunction<T> => {
  return async (args: LoaderFunctionArgs) => {
    const authenticated = await authenticate();

    if (authenticated) {
      return await load(args);
    } else {
      throw redirect('/login');
    }
  };
};

Used like so:

export const loader = authenticatedLoader(async ({params}) => {
  const users = await api.getUsers(params.companyId);

  return {users};
});

Thinking of even passing a second argument with the current user to the provided function..

export const loader = authenticatedLoader(async ({params}, {currentUser}) => {
  const posts = await api.getUserPosts(currentUser.id);

  return {posts};
});

[vaynevayne]

hi @knownasilya What you mean is that each loader judges its isLogin separately, and if you want to implement the loader in children and wait for the parent component loader to complete, what should you do? For example, I want to determine whether I have page access rights in the loader,
Also, where did the currentUser in the second example come from? not understand

const routes = [
{
path:'/',
loader:authenticatedLoader(async ()=> getUsers()),
children:[
{
path:'/posts'
loader:authenticatedLoader(async ()=> getUsersPosts()) //  i want wait getUsers loader resolve, how to do it ? 
}
]
}
]

[knownasilya]

Sorry, I think I had something like this:

export const authenticatedLoader = <T extends LoaderFunction<any>>(
  load: T
): LoaderFunction<T> => {
  return async (args: LoaderFunctionArgs) => {
    const authenticated = await authenticate();

    if (authenticated) {
      const currentUser = await getCurrentUser();

      return await load(args, { currentUser });
    } else {
      throw redirect('/login');
    }
  };
};

On the other question, I have not found a way to get nested loader routes to depend on each other. Your best bet for now would be to use some sort of cache store like described in https://tkdodo.eu/blog/react-query-meets-react-router

[vaynevayne]

thanks

[vaynevayne]

How does everyone do the permissions module?
Here's what I'm thinking. I'd like you to comment on it.

export const routers= [
  { path: '/', element: <Navigate to="/realtime" replace /> },
  { path: '/login', element: <Login /> },
{
  element: <BasicLayout />,
children:[]
},
  { path: '*', element: <NotFound /> },
]

const BasicLayout =()=> {
const {userInfo, isLoading,fetchUserInfo} =  useStore() // zustand 
let location = useLocation();
 useEffect(() => {
    if (!localStorage.getItem('token')) {
      navigate('/login')
    }
   if(!userInfo){
     fetchUserInfo()
   }
   //... also fetch other global data

  }, [location.key])

if (isLoading  || otherGlobalDataLoading) {
    return <LoadingOverlay  />
  }

return  <MyErrorBoundary>
          <Suspense fallback={<Loader />}>
            <Outlet  />
          </Suspense>
        </MyErrorBoundary>

}

const App = ()=> {
return  <Suspense>
                <RouterProvider router={_router} />
              </Suspense>
}



// axios.ts 
import { router } from './App'
 router.navigate('/login') // token 401
localstorage.delete('token') //  option

// Login.tsx
//  Refresh the page directly, this is the easiest way, otherwise you have to reset all the state, e.g. userInfo globalData
  const doLogin =>     window.location.replace('/') 

[brophdawg11]

It depends on whether the user is logged in and whether the page requires authentication.

• Not logged in, accessing / - no redirect, root's useLoaderData().user will be null
• Not logged in, accessing /protected - redirects to /login
• Logged in, accessing / - no redirect, root's useLoaderData().user will be populated
• Logged in, accessing /protected - no redirect, root's useLoaderData().user will be populated

Because all loaders run in parallel, you should be checking authorization in every protected loader and redirecting if not logged in. Most of the time this means just a one line utility function:

function requireLoggedIn() {
  if (!isLoggedIn()) {
    throw redirect('/login');
  }
}

Then you can do this in every protected loader:

function loader() {
  requireLoggedIn();
  // If it didn't throw the redirect we know at this point we're logge din
}

[vaynevayne]

https://codesandbox.io/p/github/vaynevayne/react-auth
I have made a project that can be used in production environment according to your idea, please help me to check whether my design is reasonable, in addition, clicking logout will cause an error, can you help me to solve it? thank you

[mhmdjaw]

@brophdawg11 What if the isLoggedIn() contains an API call to check for authentication status? That would be too expensive to run in every loader. What I would want is to make that call once initially when the app opens and before all loaders run, and save that user object, and then in every loader I can check for authorization by checking the saved object. If the user was not logged in, and logs in at a later point, I can just reassign the new user through an action (same thing for log out).

My point is, the initial call before all loaders run is a separate matter from the middlewares that check the saved user object. I don't want all loaders to make API calls in parallel initially, hence the importance of something like beforeLoader.

[brophdawg11]

What I would want is to make that call once initially when the app opens and before all loaders run, and save that user object, and then in every loader I can check for authorization by checking the saved object

There's nothing stopping you from executing code before the initial loaders run - just handle your user initialization before calling createBrowserRouter:

import { initUser } from './user';

initUser().then(()=> {
  let router = createBrowserRouter(routes);
  let root = ReactDOM.createRoot(document.getElementById("root"))
  root.render(<RouterProvider router={router} />);
});

Then you can hold the user in a module scoped var in user.js and export utils like getUser/destroyUser/etc. to manage it from actions.

[AsuraKev]

its 2024 and i just got this situation as well. The thing is I am using Auth0 for authentication and i cant even verify that if a user is logged in or is authenticating when the loader runs ..... I felt like the loader only needs to run before mounting that page component rather than run as soon as is mounted

[DavidRnR]

I've found a good approach I think. Don't import your routes until your App is ready. Import your AppRoutes component lazy/Suspense

Edited 10/24/2024: Check the version 2 without lazy/Suspense #version2.

import { lazy, Suspense } from 'react';
import AppTheme from '@components/layout/theme/AppTheme';
import AppSnackbar from './components/ui/AppSnackbar';
import './styles/App.css';
import LoadingApp from '@components/ui/LoadingApp';
import { useInitApp } from '@hooks/useInitApp';

// Don't load AppRoutes until Auth/App is loaded
const AppRoutes = lazy(() => import('./routes/AppRoutes'));

const App = () => {
  const { isLoaded } = useInitApp();

  if (!isLoaded) {
    return <LoadingApp />;
  }

  return (
    <AppTheme>
      {/* Use Suspense for lazy AppRoutes - So loaders are not going to be called */}
      {/*  const router =   createBrowserRouter([...]) inside AppRoutes will be defined when the app is ready. */}
      <Suspense>
        <AppRoutes />
      </Suspense>

      <AppSnackbar />
    </AppTheme>
  );
};

export default App;

Then your AppRoutes component should be like this. I'm using lazy Component by react router as well. You can use element: <div>Component</div> if you want to.

import { RouterProvider, createBrowserRouter } from 'react-router-dom';
import AppLayout from '@components/layout/AppLayout/AppLayout';
import { isLoggedGuard, loaderAuthGuard } from './guards';
import { tcLoader } from '@loaders/tcLoader';
import { loadDashboard } from '@loaders/dashboardLoader';

const router = createBrowserRouter([
  // PRIVATE ROUTES
  {
    element: <AppLayout />,
    loader: loaderAuthGuard(),
    children: [
      {
        path: '/dashboard',
        lazy: () =>
          import('@pages/dashboard/DashboardPage').then((module) => ({
            Component: module.default,
          })),
        loader: loaderAuthGuard(loadDashboard),
      },
      {
        path: '/user-profile',
        lazy: () =>
          import('@pages/userprofile/UserProfilePage').then((module) => ({
            Component: module.default,
          })),
        loader: loaderAuthGuard(),
      },
    ],
  },
  {
    path: '/tc',
    lazy: () =>
      import('@pages/tc/TermsConditionsPage').then((module) => ({
        Component: module.default,
      })),
    loader: loaderAuthGuard(tcLoader),
  },

  // PUBLIC ROUTES
  {
    path: '/',
    lazy: () =>
      import('@pages/welcome/WelcomePage').then((module) => ({
        Component: module.default,
      })),
  },
  {
    path: '/login',
    lazy: () =>
      import('@pages/login/LoginPage').then((module) => ({
        Component: module.default,
      })),
    loader: isLoggedGuard,
  },
]);

const AppRoutes = () => <RouterProvider router={router} />;

export default AppRoutes;

Then the guard.ts file

import { LoaderFunction, LoaderFunctionArgs, redirect } from 'react-router-dom';
import { WindowWithClerk } from '@models/app';

export const loaderAuthGuard =
  <T extends LoaderFunction>(load?: T): LoaderFunction<T> =>
  async (args: LoaderFunctionArgs) => {
    const isLogged = ...;

    if (isLogged) {
      return load ? await load(args) : null;
    } else {
      throw redirect('/login');
    }
  };

export function isLoggedGuard() {
  const isLogged = ...;
  if (isLogged) {
    throw redirect('/dashboard');
  }
  return null;
}

[brophdawg11]

There is not re-renders

I would never feel comfortable relying on this in a React application. For example, there are re-renders (by definition) in strict mode.

[DavidRnR]

Hi @brophdawg11 !

Here's a live example: https://stackblitz.com/edit/react-router-auth-loaders?file=src%2FApp.tsx&terminal=dev

Strict Mode is rendering twice AppRoutes, but I will keep it in that way. It's not an issue in Production. I can't find any bug for now in my real projects. Apps go really good!

This is the only clean way that I've found to prevent triggering loaders before my App/Auth is ready.

Any suggestions will be welcome :)

[DavidRnR]

Here is a better version without using lazy/Suspense. Wow I've been working a lot on this trying to get the best way ;)

Here is a live example: https://stackblitz.com/edit/react-router-auth-loaders-version-2

App.tsx really simple

import AppRoutes from './routes/AppRoutes';

const App = () => {
  return <AppRoutes />;
};

export default App;

import { LoaderFunction, LoaderFunctionArgs, redirect } from 'react-router-dom';
import { useAuthStore } from '../store/useAuthStore';
import { useAppStore } from '../store/useAppStore';

async function checkAuthStatus() {
  const {
    appLoaded,
    actions: { initApp },
  } = useAppStore.getState();
  if (!appLoaded) {
    await initApp();
    const { isLogged } = useAuthStore.getState();
    return isLogged;
  }

  const { isLogged } = useAuthStore.getState();
  return isLogged;
}

export const loaderAuthGuard =
  <T extends LoaderFunction>(load?: T): LoaderFunction<T> =>
  async (args: LoaderFunctionArgs) => {
    const isLogged = await checkAuthStatus();
    if (isLogged) {
      return load ? await load(args) : null;
    } else {
      throw redirect('/login');
    }
  };

export async function isLoggedGuard() {
  const isLogged = await checkAuthStatus();
  if (isLogged) {
    throw redirect('/home');
  }
  return null;
}

[kennyhei]

@DavidRnR that's pretty cool solution and it fixed my problem with JWT auth, thanks 👍 I simplified it a little bit by creating just one store so here's how I did it:

authStore.ts:

import { create } from "zustand";
import { createJSONStorage, persist } from "zustand/middleware";

interface AuthStoreState {
  isLogged: boolean;
  accessToken: string | null;
  refreshToken: string | null;
}

interface AuthStoreActions {
  actions: {
    login: ({
      email,
      password,
    }: {
      email: string;
      password: string;
    }) => Promise<void>;
    logout: () => void;
    checkAuth: () => Promise<void>;
  };
}

export const authStore = create(
  persist<AuthStoreState & AuthStoreActions>(
    (set, get) => ({
      isLogged: false,
      accessToken: null,
      refreshToken: null,
      actions: {
        login: async ({ email, password }) => {
          // function that gets access & refresh token from your API
          const response = await apiGetTokens({
            email: email,
            password: password,
          });
          const { access, refresh } = response.data;
          set(() => ({
            isLogged: true,
            accessToken: access,
            refreshToken: refresh,
          }));
        },
        logout: () => {
          set(() => ({
            accessToken: null,
            refreshToken: null,
            isLogged: false,
          }));
        },
        checkAuth: async () => {
          const {
            accessToken,
            refreshToken,
            actions: { logout },
          } = get();
          if (!isExpired(accessToken)) {
            set((state) => ({
              ...state,
              isLogged: true,
            }));
            return;
          }
          if (!refreshToken) {
            logout();
            return;
          }
          try {
            // function that asks for new access token from your API
            const response = await apiRefreshToken({ refresh: refreshToken });
            const { access, refresh } = response.data;
            set(() => ({
              isLogged: !!access,
              accessToken: access,
              refreshToken: refresh,
            }));
          } catch (error) {
            void error;
            logout();
          }
        },
      },
    }),
    {
      name: "auth-store",
      storage: createJSONStorage(() => localStorage),
      partialize: (state) =>
        Object.fromEntries(
          Object.entries(state).filter(([key]) => key !== "actions")
        ) as AuthStoreState & AuthStoreActions,
    }
  )
);

const isExpired = (token: string | null) => {
  if (!token) {
    return true;
  }
  const { exp } = JSON.parse(atob(token.split(".")[1]));
  return exp * 1000 < Date.now();
};

// this is for setting `Authorization: "Bearer " + getToken()` for API requests that require auth
export const getToken = () => {
  const { accessToken } = authStore.getState();
  return accessToken;
};

Here's the loaderAuthGuard:

export const loaderAuthGuard =
  <T extends LoaderFunction>(load?: T): LoaderFunction<T> =>
  async (args: LoaderFunctionArgs) => {
    const {
      isLogged,
      actions: { checkAuth },
    } = authStore.getState();
    await checkAuth();
    if (isLogged) {
      return load ? await load(args) : null;
    } else {
      throw redirect("/login");
    }
  };

I noticed that I still need to handle routes that do not have any loader function set so I have wrapped them with ProtectedRoute.tsx that does pretty much the same thing as loaderAuthGuard:

export function ProtectedRoute() {
  const [loading, setLoading] = useState(true);
  const [auth, setAuth] = useState(false);

  useEffect(() => {
    async function isAuthenticated() {
      const {
        isLogged,
        actions: { checkAuth },
      } = authStore.getState();
      await checkAuth();
      setAuth(isLogged);
      setLoading(false);
    }

    isAuthenticated();
  }, []);

  if (loading) {
    return null;
  }

  return auth ? <Outlet /> : <Navigate to="/login" />;
}

[DavidRnR]

Nice @kennyhei !

You don't need the ProtectedRoute component for routes without loaders. Just use a loaderAuthGuard without params.

  {
    path: '/private-path-example',
    element: <div>Private route example</div>,
    loader: loaderAuthGuard(), // No params
  }

Anyway ProtectedRoute component also works, but I prefer use the loaderAuthGuard function. :)

[barbinbrad]

Just regarding the original question, it seems like middleware, which is still unreleased (but supported in express), is the right approach.

[infiniteluke]

You can make your own middleware with dataStrategy. Put a middleware property on your route's handle property (could be a an async function or a permissions array or whatever, and call your auth before you call the loaders/actions in dataStrategy. Here's an example the docs show

[erwinstone]

I think it could be like this:

export function protectedLoader<T extends LoaderFunction<any>>(load: T): Awaited<T> {
  const loader = async(args: LoaderFunctionArgs) => {
    const authenticated = authStore.authenticated

    if (authenticated) {
      return await load(args)
    }
    else {
      throw redirect(config.REDIRECT.LOGIN)
    }
  }
  return loader as unknown as Awaited<T>
}

You still get the "type", examples of usage: