Keycloak OpenID Connect Authentication Example

The Keycloak example

Let's start by configuring WunderGraph.

// wundergraph.config.ts
authentication: {
  cookieBased: {
    providers: [
      authProviders.demo(),
      authProviders.openIdConnect({
        id: 'kc',
        issuer: new EnvironmentVariable('AUTH_ISSUER'),
        clientId: new EnvironmentVariable('AUTH_CLIENT_ID'),
        clientSecret: new EnvironmentVariable('AUTH_CLIENT_SECRET'),
        queryParameters: [{name: "kc_idp_hint", value: "github"}],
      }),
    ],
      authorizedRedirectUris: ['http://localhost:3003'],
  },
}

1. Go to GitHub profile settings and create a new OAuth app.
2. Generate client secret
3. Set authorization callback URL to: http://localhost:8080/realms/demo/broker/github/endpoint, and home page URL to: http://localhost:3000
4. Copy the Client ID and Client Secret to the clipboard
5. Rename the .example.env file to .env
6. Paste the credentials into the .env file

Run keycloak:

docker compose up -d --wait

Install the dependencies and run the complete example in one command:

npm install && npm start

On the NextJS frontend, click the "Login" button. Once the login is complete, the Frontend will automatically fetch the data and inject the bearer token into the origin request.

• http://localhost:8080/
• user name: admin
• password: admin

By default, Keycloak roles are exposed through realm_access.roles and resource_access.<client_id>.roles claims. If you wish to populate the User.roles field with these roles, you will need to configure Keycloak's mapper settings accordingly.

Follow these steps to achieve this configuration:

1. Open the Keycloak admin console and select the demo realm.
2. Navigate to Clients Scope > roles > Mappers > realm roles and perform the following configuration:
   • Set Token Claim Name to roles.
   • Ensure all switch prefixed with Add to ... are enabled.
3. Do the same for client roles under the same Mappers tab.