I am creating an npm package and I want to authenticate users with Keycloak. But what exactly I want to do is

when someone clicks on authenticates button it should open a bootstrap modal and inside this modal, I should see the Keycloak login page and after filling in the information it should authenticate me and return back to that modal itself.

What is happening?

When someone opens the modal for signing in it redirects the user to another window where the Keycloak form is located and we have to fill in the information there and it redirects the user back to the calling page.

What are the requirements?

Keycloak sign-in page should open inside the modal itself and one should be able to authenticate on modal.

What I have tried?

I have tried using iframes inside the modal so that the sign-in page for Keycloak can open inside the popup itself. But after filling in the details it redirects me to the same frame instead of the calling site.

I have tried loading the whole process inside an iframe and then again it redirects me to the sign-in page on a different window.

I have published the package @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;

This is how I am trying to put this inside iframe but it is not working expected.

I am kind of stuck at this thing just want to know whether this is possible or not even. Or is there any other way I can open a URL or tab inside a modal.