🔄Understanding Identity Brokers

The Authentication Problem I Wanted to Solve

A few months ago, I was working on several side projects and got tired of implementing authentication for each one separately. I needed a unified authentication solution that could:

1. Support multiple login methods (Google, GitHub, etc.)

2. Provide a consistent login experience

3. Centralize user management

4. Be relatively easy to set up for a personal project

That's when I discovered Keycloak and decided to give it a try.

What is an Identity Broker?

For anyone unfamiliar, an identity broker acts as a middleman between your applications and external identity providers (like Google or GitHub). It's essentially a universal translator for authentication protocols.

My Weekend Project: Setting Up Keycloak

Step 1: Getting Keycloak Running

I started by running Keycloak using Docker since it was the quickest way to get up and running:

docker run -p 8080:8080 -e KEYCLOAK_USER=admin -e KEYCLOAK_PASSWORD=admin quay.io/keycloak/keycloak:latest

After accessing the admin console at http://localhost:8080, I created a new realm called "my-projects" specifically for my applications.

Step 2: Adding Google as an Identity Provider

This part was surprisingly simple:

1. I created a new project in Google Cloud Console

2. Set up OAuth credentials for my Keycloak instance

3. In Keycloak, I navigated to Identity Providers and selected "Google"

4. Copied my Client ID and Client Secret from Google into Keycloak

5. Made sure to configure the redirect URI correctly: http://localhost:8080/auth/realms/my-projects/broker/google/endpoint

Step 3: Connecting My First Application

For my personal task management app (built with React), I:

1. Registered it as a client in the Keycloak realm

2. Set the client protocol to OpenID Connect

3. Added http://localhost:3000/callback as a valid redirect URI

4. Generated a client secret and added it to my app's environment variables

The integration in my React app was straightforward using the Keycloak JavaScript adapter:

// Simple Keycloak initialization in my React app
import Keycloak from 'keycloak-js';

const keycloakConfig = {
  url: 'http://localhost:8080/auth',
  realm: 'my-projects',
  clientId: 'task-manager'
};

const keycloak = new Keycloak(keycloakConfig);

keycloak.init({ onLoad: 'login-required' }).then(authenticated => {
  if (authenticated) {
   console.log('User is authenticated');
   // Store the token for API requests
   localStorage.setItem('token', keycloak.token);
  }
});

What I Learned and Results

After a weekend of tinkering, I had a working identity broker for my personal projects. The biggest benefits I've seen:

• I only need to implement authentication once for all my projects

• Adding new login methods is just a few clicks in Keycloak

• User sessions are managed centrally

• I can focus on building features instead of auth systems

For anyone working on multiple personal projects, I highly recommend trying Keycloak as an identity broker. It's certainly more complex than using something like Auth0 or Firebase Auth, but it gives you complete control and it's free for personal use.

Next on my list is adding two-factor authentication and exploring Keycloak's group-based access controls for more fine-grained permissions.