Social login api from keycloak

I want to use keycloak social login from react js client side and backend side node js. I can't find any way of generating the red marked link from keycloak.

http://localhost:8080/auth/realms/softspace/broker/github/login?client_id=account&tab_id=qXW9kuQnfu0&session_code=WGGXv87kK9R9m0KOoq5RPAwmqR131DaZwyzOvT_SWd8

I don't know how they generating the tab_id and session_code.

I have an client react app which needs to social sign on

When I will click on such github button,I want to find the way of going to directly

Solution 1:

One approach is to set the default provider of the Realm in question. For that go to the Keycloak Admin Console and:

• Select your Realm;
• Select Authentication;
• From the tab Flows:
  • Select Browser;
  • In Identity Provider Redirector (Git) click on Actions (on the right);
  • click on Config.
  • to the Default Identity Provider set to the name of the IDP the one that you have configured.

When you access the URL <KEYCLOAK>/auth/realms/<YOUR_REALM>/account you will get redirected to the GitHub page. Now bear in mind that this set up will be applied to the entire Realm.

The other option is to use "kc_idp_hint":

When this switch is on, this provider will not be shown as a login option on the login page. Clients can still request to use this provider by using the 'kc_idp_hint' parameter in the URL they use to request a login.

If you try to login with the URL:

<KEYCLOAK_HOST>/auth/realms/<YOUR_REALM_NAME>/protocol/openid-connect/auth?client_id=<YOUR_CLIENT_ID>&redirect_uri=<THE_REDIRECT_URI>&response_type=code&scope=openid&kc_idp_hint=<the_name_that_you_give_to_the_idp>

you should be redirect to the GitHub login page.