Keycloak Authentication invalid_client_credentials – Reactjs

I am trying to implement a basic Keycloak authentication on my react website.
During the authentication init, authentication is failing and on the react server side I am getting the error invalid_client_credentials.

Once I goto my react website I am prompted with a Keycloak login page, where I enter username and password and I login successfully. But does not execute any part of the code after init.

import React from 'react';
import ReactDOM from 'react-dom';
import Keycloak from 'keycloak-js';

const keycloak = Keycloak({
    url: 'http://localhost:8080/',
    realm: 'reactrealm',
    clientId: 'reactclient',
    clientSecret: 'xvtYZ5P7ybsjvmAO4YY2Eu6NifsePLBg'
});

keycloak.init({ onLoad: 'login-required' }).then((authenticated) => {
    if (authenticated) {
        ReactDOM.render(
                <h1>Hello, world!</h1>,
            document.getElementById('root')
        );
    } else {
        ReactDOM.render(
                <h1>Goodbye, world!</h1>,
            document.getElementById('root')
        );
    }
});