React Routing based on metadata value

Help
, , ,
1

Hello, struggling with routing a user based on a user_metadata value. We have the following:

            <Switch>
               <PrivateRoute
                 path="/"
                 name="Home"
                 component={props => <DefaultLayout {...props} />}
               />
          </Switch>

By this time, the user is authenticated but for some reason we don’t have the user object itself yet. Leveraging the “user” custom hook from the SPA SDK is possible but the app renders the route before the user hook provides the user.

What we’d like is something something like

const { user, getUser, isAuthenticated } = useAuth0();


const userExperience = (userType) => {
    switch(userType) {
       case 'typeOne':
         return <TypeOneLayout {...props} />;
    }
   ...
}
<Switch>
    <PrivateRoute
    path="/"
    name="Home"
    component={props => userExperience(user["blah_var_on_meta"])}
    />
</Switch>

But this isn’t working as expected. Basically 100% of the time it executes the default fallback switch because user isn’t available yet.

3

Hi @staying_tuned,

This may be because getUser is sending a request to the userinfo endpoint. You could add a custom claim to the token with user metadata and then route conditionally based on the claim in the token.

There is an example in this doc:

Hope this helps,
Dan

4

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.