Keycloak.js can not get access token when login with Google and Facebook - keycloak

Question

I'm build a system for our company using Keycloak. I use keycloak.js for by-pass default login page of Keycloak.
function myFunction() {
let kcLogin = keycloak.login;
keycloak.login = (options) => {
options.idpHint = 'facebook';
kcLogin(options).then(auth => {
alert("keycloak Login");
if(auth) {
alert("token" + kc.token);
} else {
alert("auth is null");
}
});
};
keycloak.init({ onLoad: 'login-required' }).then(function(authenticated) {
alert(authenticated ? 'authenticated' : 'not authenticated');
}).catch(function() {
alert('failed to initialize');
});
}
But I can NOT get access token / refresh token after login.
I check: keycloak.token = undefined.
Please help me!
PS: I always get exception of keycloak.init then redirect to facebook login ( or google login )
alert('failed to initialize');
Thank you so much.
Code here: https://github.com/loizenai/SpringBoot-Keycloak-Social-Authentication-Py-Pass-Default-Login/tree/main/SpringBootKeyCloakSocialSignIn

Answer 1

You are trying to configure your backend and frontend with Keycloak.
Either you just have to configure your backend to integrate with your keycloak or Integration your frontend application and your backend will only verify the token.
The current application architecture you are following is an MVC pattern.
Where your spring boot(backend) application controls the integration with Keycloak.
Please refer to this article: Secure spring boot 2 using Keycloak
What you are trying to target follows this kind of architecture pattern:
Secure Vue.js apps with Keycloak | DevNation Tech Talk
In the above reference, I have used the Vue application but you can use your vanilla html/js application as well to integrate with keycloak.
First, try keycloak login flow in your application and then you can enable social login.