Handling multiple user types with a react/node application

Help
,
1

I’m looking to handle 2 types of users in my application - “Customers” and “Users”. My application has a react front end and node api. Ideally I want some way to differentiate on signup and automatically assign the user role on sign up. My current thought was to have a different button for a “user” and “customer” and then have some way of passing which usertype is signing up in the user_metadata from the react end. After that, I’ll use the user type to provide different views and endpoint access on to the API. Here is my attempt:
This is my custom auth0 action -

`exports.onExecutePostLogin = async (event, api) => {
console.log(“Usermetadata”, event.user.user_metadata)
console.log(“Query”, event.request.query)
console.log(“transaction”, event.transaction)
// Only proceed if user has no roles assigned
if (event.authorization &&
event.authorization.roles &&
event.authorization.roles.length === 0) {

const ManagementClient = require('auth0').ManagementClient;
const management = new ManagementClient({
  domain: event.secrets.domain,
  clientId: event.secrets.CLIENT_ID,
  clientSecret: event.secrets.CLIENT_SECRET,
});

// Role IDs
const ROLES = {
  USER: "rol_role1",
  CUSTOMER: "rol_role2"
};

// Get the user type from metadata (set during signup)
const userType = event.user.user_metadata?.userType || 'user';

const params = { id: event.user.user_id };
const data = {
  "roles": [userType.toLowerCase() === 'customer' ? ROLES.CUSTOMER : ROLES.USER]
};

try {
  await management.users.assignRoles(params, data);
} catch (error) {
  console.log('Error assigning role:', error);
  // Optionally use api.access.deny() if role assignment is critical
}

}
};Currently my react front end has this file - import { Auth0Provider } from “@auth0/auth0-react”;
import { useNavigate } from “react-router-dom”;
import PropTypes from ‘prop-types’;

const domain = import.meta.env.VITE_AUTH0_DOMAIN;
const clientId = import.meta.env.VITE_AUTH0_CLIENT_ID;
const redirectUri = import.meta.env.VITE_AUTH0_CALLBACK_URL;

export const Auth0ProviderWithNavigate = ({ children }) => {
const navigate = useNavigate();

const onRedirectCallback = (appState) => {
    navigate(appState?.returnTo || redirectUri);
};

if (!(domain && clientId && redirectUri)) {
    return <div>Auth0 configuration error</div>;
}

return (
    <Auth0Provider
        domain={domain}
        clientId={clientId}
        authorizationParams={{
            redirect_uri: redirectUri,
            audience: import.meta.env.VITE_AUTH0_AUDIENCE,
        }}
        onRedirectCallback={onRedirectCallback}
    >
        {children}
    </Auth0Provider>
);

};

Auth0ProviderWithNavigate.propTypes = {
children: PropTypes.node.isRequired,
}; and this customer signup button - import { useAuth0 } from “@auth0/auth0-react”;`

And this is the signup button -

`export const CustomerSignupButton = () => {
const { loginWithRedirect } = useAuth0();

const handleSignUp = () => {
loginWithRedirect({
authorizationParams: {
screen_hint: “signup”,
},
appState: {
returnTo: “/projects”,
},
initialScreen: “signup”,
options: {
metadata: {
userType: “customer”
}
}
});
};

return (

Customer Sign Up

);
}; `

There still seems to be issues in accessing the usertype in the postregistration event object. I’m also skeptical that my approach is the recommended solution (even if the usertype:“customer” was accessible on the event object. Anyone have thoughts on how I can achieve what I’m trying to do?