Start the app (mandatory steps – recommended reading all them before doing anything):
Run the command: npm run start
Start docker container keycloak: npm run docker-run
Navigate to: http://localhost:8080/auth/ –> Admin Login (user: admin, pass: admin) –> Create New Realm: googleAuth
After successfully created the new Real, go to: Identity Providers and choose from the dropdown list -> Google
Before saving your new Identry Provider (google), you must:
Login to your Google Cloud
Select a Project from the navbar menu after logging
Click New Poject from the pop-up that appeared (you can find the New Project button on the upper right side of the pop-up)
Give it a name, for example: keycloack-google
Hive Create blue button
Go to Credentials item (left menu)
Go To Configure Consent Screen (upper right)
Select External if we want to allow Google Account to sing in to our application.
Click Create
Fill in the necessary info for your app and click Save
Click Credentials (left menu)
Click Create Credentials (upper screen)
Select OAuth Client ID from the pop-up options
Select web application
In authorized redirect uris, paste the uri from your Keycloack Provider (see steps 4 and 5 to retrieve the redirect uri from keycloack providers)
You will get a Client ID and a Client Secret. Save them cause we will need them later!
Go back to your Keycloack Admin where you left it open (step 5). And fill in the Client ID and Client Secret
Create a new client on your Keyloack admin -> Clients (left menu sidebar) -> Create (upper right corner). In this example we are using/creating a client with name: react-keycloack-google-social-auth
Visit http://localhost:3000/ you should see the login form with Google Sign In option