Keycloak - login in Pop Up window

Question

I am using keycloak in an iframe. My keycloak client is Okta.

With my current configuration, keycloak simply redirects to okta login page. This means they are beeing opened within the iframe aswell. I'd really like to change that, since it contradicts some major security policies I have.

Can anyone tell how to redirect keycloak to open okta login in a pop up winodw using react/javascript.

Answer 1

Here i done :

=========== LoginButton Component ========

function LoginButton(props) {
 
  window.addEventListener('storage',event => {
   if (event.key === 'logged-user') {
            // update the redux store variable for login successful
  }
  });

  const clickHandler = () => {   
    const x = window.innerWidth / 2;
    const y = window.innerHeight / 2;
    const win=open('/login','Login',`width=500,height=600, left=${x},top=${y}`);
  };



  return (
    <>
      <Button
        onClick={clickHandler}
      > Login </Button>
     </>
   )
}

export default LoginButton

=========== Login Component ========

const LogIn = props => {
  const { keycloak } = useKeycloak();
  const [isLoginCalled, setIsLoginCalled] = useState(false);
  
  // load the profile and call saga for update login information
  function loadUserInfo() {
    keycloak
      .loadUserProfile()
      .then(function(profile) {
        localStorage.setItem('logged-user', profile.username);
        window.open('', '_self').close();
      })
      .catch(function(err) {
        console.log(`Error while loading progile :${err}`);
      });
  }

  useEffect(() => {
    if(keycloak.authenticated && !isLoginCalled) {
      loadUserInfo();
      setIsLoginCalled(true);
    } else {    
      keycloak.login();      
    }
  }, [1]); 

  return (
    <>
     <h1>Loading please wait...</h1>
    </>
  );
};

export deault LogIn