How to be redirected to Keycloak logging page from React app

Question

I configured keycloak with ExpressJS and would like to check if everything is working correctly. For this, I created these two scripts. One is an axios script to send the request to the server, and the other is a server side script. script to handle the request. But it doesn't redirect me to the keycloak login page as I expected. I got an error instead Here are some screenshots: THANKS YOU

below is the script i use to send request

const PORT = 3001
const HOST = `http://localhost:${PORT}`;

/**
 * This function aim is to log the user in
 * @param user the user username
 * @param pwd the user password
 **/
export function loginRequest(user, pwd,) {
    axios.post(`${HOST}/ `, {
        email: `${user}`,
        pwd: `${pwd}`
    })
        .then(function (res) {
            return res.data
        })
        .catch(function(err) {
            console.log('ERROR while sending login request :', err);
        })

    return false;
}

There is my front-ent where am getting the error. i just use the button to send request on click

and

There is my keycloak configuration

i trying a lot of thing found on internet like adding + in web origin field, but did not work.

Answer 1

I finally have the solution. I was trying to get redirected to the keycloak login page by clicking a button. I found out that I had to use the keycloak-js library to manage keycloak on my front-end. So the following code helped me.

Check documentation

// Initialize keycloak
keycloak = new Keycloak({
    url: 'YOUR_KEYCLOAK_URL',
    realm: 'YOUR_REALM',
    clientId: 'YOUR_CLIENT_ID'
})
// check if user is authenticated
// if not, *onLoad: 'login-reqired'* will redirect
// user to keycloak login page 
function initializeAdapter() {
    try {
        return await keycloak.init({
            onLoad: 'login-required'
       });
} catch (e) {
    //TODO replace throw by proper error handling
    throw e;
}}