Google Social Login with Keycloak

0. Expose your local web server to the internet

https://dashboard.ngrok.com/get-started

 

My Keycloak is running in my local laptop localhost:8080. After publishing it to the internet. we could use http://325xxxx.ngrok.io to connect by anyone else.

 

 

 

 

 

1. Create a google application

(1) Create a google application at https://console.developers.google.com/ ,

(2) Create a new OAuth consent screen

 

 

 

(3) Create a client ID

save the id and secret, we will use it in Keycloak settings.

 

 

 

2.Setup Keycloak

(1) Create a new realm and client

While in the client, click the Installation tab. Under format option select “Keycloak OIDC JSON“.

Copy and paste this value in a file keycloak.json, we will use it later.

 

 

 

(2) Create an Identity Provider

Fill in the client Id and secret which we generated in the previous step

 

 

 

 

3. Create a web project

Create a web project which could use Keycloak for login. Use keycloak.json file for settings.

Use the public URL which generated in step 0 intead of localhost:8080

https://github.com/shiralwz/Keycloak-Angular-Auth

run yarn to install the lib, then run yarn start to start the server

 

 

 

 

4. Setup google redirect URIs

(1) Setup the redirect URI and authorized domains

 

 

 

 

 

 

 

 

5. Run web server and test

Click login link and redirected to Keycloak login page