Estoy creando un paquete npm y quiero autenticar a los usuarios con Keycloak. Pero lo que quiero hacer exactamente es

cuando alguien hace clic en el botón de autenticación, debería abrir un modal de bootstrap y dentro de este modal, debería ver la página de inicio de sesión de Keycloak y, después de completar la información, debería autenticarme y volver a ese modal.

¿Lo que está sucediendo?

Cuando alguien abre el modal para iniciar sesión, redirige al usuario a otra ventana donde se encuentra el formulario Keycloak y tenemos que completar la información allí y redirige al usuario a la página de llamada.

¿Qué son los requerimientos?

La página de inicio de sesión de Keycloak debería abrirse dentro del propio modal y uno debería poder autenticarse en el modal.

¿Qué he probado?

He intentado usar iframes dentro del modal para que la página de inicio de sesión de Keycloak pueda abrirse dentro de la ventana emergente. Pero después de completar los detalles, me redirige al mismo marco en lugar del sitio de llamada.

Intenté cargar todo el proceso dentro de un iframe y luego nuevamente me redirige a la página de inicio de sesión en una ventana diferente.

He publicado el paquete @adeshkumar/component .

 import React from 'react'; const LoginPage = () => { return ( <iframe height="100%" width="100%" allowtransparency="true" src="HTTP://localhost:3000/auth/realms/realm1/protocol/openid-connect/auth?client_id=client1&redirect_uri=http://localhost:3000&state=f60ed21e-1708-4d81-9746-1b607650c1d9&response_mode=fragment&response_type=code&scope=openid&nonce=d1af5a78-a30b-4d91-84ad-9e2a3d9e1586"> </iframe> ); }; export default LoginPage;

Así es como estoy tratando de poner esto dentro de iframe pero no funciona como se esperaba.

Estoy un poco atascado en esto, solo quiero saber si esto es posible o no. ¿O hay alguna otra forma en que pueda abrir una URL o pestaña dentro de un modal?