Keycloak-js perform action after user authentication - keycloak

Question

I'm using Keycloak for my auth server in a reactJs site. I have all the normal workflows working using keycloak-js, KeycloakProvider and useKeycloak. I need to have some custom redirection rules however when a user logs in based on their role. i.e.
If they log in from the home screen, then
a) If it is a normal user they are redirected to /dashboard
b) If it is an admin user they are redirected to /admin
If they tried to reach some protected screen, they should be redirected back to the screen they requested
Right now it keycloak always directs them to the last screen they were on and I don't see a way to capture the "on intial login" event.
Any suggestions?

Answer 1

Maybe it's sufficient to check for the roles after the init/login or alternatively the keycloak.idTokenParsed.preferred_username and then redirect after a successfuly auth to your desired path (eg React Router or history.push("/dashboard") (with the useHistory hook))?

Answer 2

What I ended up doing is creating a /login route that my login points to. The only thing it does is force authentication the redirect to the proper page.
const RoleRedirector = (params) => {
const { keycloak,initialized } = useKeycloak();
const history = useHistory();
useEffect(()=>{
if(keycloak && initialized){
if(keycloak.authenticated){
const { tokenParsed } = keycloak;
const { realm_access } = tokenParsed;
const { roles } = realm_access || [];
if(roles.includes("admin")) {
//This is a separate React site living under the common domain
document.location = "/admin/index.html";
}else if(roles.includes("manager")) {
document.location = "/manager";
}else {
history.push("/dashboard");
}
}else{
keycloak.login();
}
}
},[keycloak,initialized])
return <div/>
}