Log in with Google Social on Keycloack For React

Pre-requierements

  • Have Docker Installed
  • Have react installed
  • Have node (npm) installed

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

GitHub

View Github