Sharing access token in nested routes

[pbrissaud]

Hello,

I'm totally new to Remix so forgive me if my question is stupid. I have configured Auth0 authentication with your library and it works perfectly.

I only had a question about nested routes and sharing the access token between routes. I have set the authenticator to send me back the access token with the user profile like this:

/* app/utils/auth.server.ts */ 

... 
const auth0Strategy = new Auth0Strategy(
  {
    callbackURL: AUTH0_CALLBACK_URL,
    clientID: AUTH0_CLIENT_ID,
    clientSecret: AUTH0_CLIENT_SECRET,
    domain: AUTH0_DOMAIN,
    audience: AUTH0_AUDIENCE,
  },
  async ({ profile, accessToken }) => {
    return { ...profile, accessToken };
  }
);
...

Then I have a 'app.tsx' route configured to check if the user is authenticated and it returns his profile and the token :

/* app/routes/app.tsx */ 

...
export const loader = async ({ request }: LoaderArgs) => {
  const profile = await auth.isAuthenticated(request, {
    failureRedirect: "/",
  });
  return json({ profile });
};

export default function App() {
  const { profile } = useLoaderData<typeof loader>();
  return (
    <div>
      <p>Token : {profile.accessToken}</p>
      {/* Works well */} 
      <Outlet />
    </div>
  )

In children component, I would love to get the access token (to pass to my graphql client), without repeating the auth.isAuthenticated.

/* app/routes/app/project.tsx */ 

...
export const loader = async ({ request }: LoaderArgs) => {

  {/* For the moment I copy the same block of code to get the token */} 
  {/* Beginning of repeating block */}
  const profile = await auth.isAuthenticated(request, {
    failureRedirect: "/",
  });
  const { token } = profile
  {/* End of repeating code  */}
  
  const { project } = await client.request(GetProjectsDocument, null, { Authorization: "Bearer " +token })
  return json({ project });
};

export default function Project() {
  const { project } = useLoaderData<typeof loader>();
  return (
    <ul>
       {project.map(p => (
         <li>{p.name}</li>
       ))}
    </ul>
  )
}

For me, it should be possible but I can't get a solution. Does anyone know how to achieve this or is it impossible ?

Regards,

Paul

[danestves]

Hi @pbrissaud this can be achieved using useMatches from Remix https://remix.run/docs/en/v1/hooks/use-matches, this hooks is an array of data of all routes, and there you can access to the data from the root 🙌

[pbrissaud]

Hi thanks for your quick answer !

When I put the useMatches hook in the loader function, my IDE says me that I can't use a React hook in this function.

React Hook "useRouteData" is called in function "loader" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".

[danestves]

It's a React Hook, if you need the access token inside a loader you must use authenticator.isAuthenticated, sadly there is not currently a "middleware" function to avoid calling the same function over and over again