Keycloak Integration in Minutes with Cloud IAM and WunderGraph
Tags: webdev, graphql, react, javascript
Published: 2022-04-25 13:39:24



![Cloud_IAM_Blog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v86ms17p24uy6yprps53.png)


We are very excited to announce our most recent partnership with Cloud IAM - the Keycloak Identity and Access Management as a Service solution used by 10,000+ developers. Cloud IAM offers a fully managed Keycloak that is white-labeled, GDPR compliant, secure, cloud agnostic and scalable.

For many developers, Keycloak is the preferred software for IAM. However, integrating and using it for your application is time-consuming, since you need to monitor, secure, scale, update and back it up.

By using the integration for [WunderGraph](https://wundergraph.com/) and [Cloud IAM](https://www.cloud-iam.com/), you can build Keycloak authentication into your application with ease. Cloud IAM automates the setup, running, and scaling of Keycloak clusters. WunderGraph lets you integrate authentication with your frontend and backend in minutes. WunderGraph’s unified Virtual Graph automates 90% of integration tasks and provides an unparalleled developer experience, [authentication-aware data fetching ](https://wundergraph.com/docs/overview/features/authentication_aware_data_fetching)and much more out of the box. 
Bring everything together and reach lightspeed levels of development! This demo was done using our quick start chat application. You can use this [link](https://github.com/wundergraph/nextjs-typescript-postgresql-graphql-realtime-chat) to clone the repo and follow along with this demo to integrate cloud IAM in under 10 minutes. 


## How it works
If you want to use Keycloak for your next project with WunderGraph, 
here is how you can get started. First, you need to set up your Cloud IAM. 
You can start with the free [Little Lemur](https://www.cloud-iam.com/#pricing) plan. 
Once you have created an account. Create a new deployment on the deployment page. 

![creating a new deployment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ph0t7mysr1tkbn0xxsd.png)

Once a new deployment has been created. You will be given admin credentials to access your deployment. 
Save these credentials and then select Keycloak Console and proceed to your deployment. 

Once you are inside the deployment. You should see something like this. 
Head over to the Clients tab and add your WunderGraph Client. 

![adding a client](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fz8e9u0avpyo1n5knpii.png)

![creating a client](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k1n7ppj2607bnrek1fbl.png)
 
 

When you are adding your WunderGraph Client, you need to configure your settings shown in the example below. 
Change the Access Type to **Confidential** and give a valid redirect URI. We just used our local host as the 
redirect URI. 
It’s important to change the Access Type to **Confidential** because this will generate an OpenID Connect
Confidential client that is on the backend and not on the frontend. Make sure to click save at the bottom.

![setting to public](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gn7dgpjr5zbja8gzd1vw.png)

Now if you check the Credentials tab you will see a secret. Now you can head back to Realm Settings tab 
and you should see a link Endpoint at the bottom labeled Open ID Endpoint Configuration. 
Click it and you will be redirected to a page with a big json blob. For now, take note of the URL. It should look like this

```
https://lemur-10.cloud-iam.com/auth/realms/Your-project-name/.well-known/openid-configuration
```
You’ll need everything before /.well-know. So copy it and paste it in a safe place for later use.

```
https://lemur-10.cloud-iam.com/auth/realms/Your-project-name/
```
After that, you declare Cloud IAM as your login provider to authenticate users. You can do this by heading over to the **wundergraph.config.ts** file and adding the following: 

- Your ID is whatever you want to call it.
- Your clientID is the name of the client you made earlier in IAM.
- Your secret can be found under the client credentials tab. Make sure to hide it better than I did. 
- Your issuer is that link from the Open ID Endpoint Configuration link. Please paste it in the issuer. 

```typescript
authentication: {
        cookieBased: {
            providers: [
                authProviders.demo(),
                authProviders.openIdConnect({
                    id: "cloud-IAM", 
                    clientId: "your-client-name", 
                    clientSecret: "your-client-secret", 
                    issuer: "https://lemur-10.cloud-iam.com/auth/realms/iam-integration-demo/"
                })
            ],
            authorizedRedirectUris: [
                "http://localhost:3000"
            ]
        },
    },
```

The client is then generated by WunderGraph and is aware of Cloud IAM as the authentication provider and of 
Keycloak as the method used. It provides all the user information provided by Cloud IAM and lets you log in and 
log out users with a single function call.

If you look inside the Web Client, you should see that WunderGraph picked up on
 the changes and configured Cloud-IAM for us automatically.

![WunderGraph automatically deploys](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cwacg5vwhc03z9ywii0b.png)
 
Now everything is configured, the login flow will look like this: 
A user logs into the web application and is redirected to the WunderGraph Server [(WunderNode)](https://wundergraph.com/docs/reference/components/wundernode#content). 
From there, the user is redirected to Cloud IAM for authentication, and then redirected back when the login is 
successfully completed. Every step of the process is automated, giving you one less thing to worry about.

If you want to learn more about how WunderGraph handles authentication, check out our detailed [documentation](https://wundergraph.com/docs/reference/wundergraph_config_ts/configure_authentication#authentication-providers).


## Time to start your first project!

You can start using Keycloak with [Cloud IAM](https://www.cloud-iam.com/) and [WunderGraph](https://wundergraph.com/) today! 
We would love to see what you have built and what other integrations you would like to see. 
We are looking forward to welcoming you on our Community [Discord](https://discord.gg/a8gXs5FWaJ) Channel soon!

If you want to take your WunderGraph application to the next level with 
dedicated support from our team, use this [link](https://form.typeform.com/to/fuRWxErj?typeform-embed-id=5245050805860514&typeform-embed=popup-blank&typeform-source=wundergraph.com&typeform-medium=embed-sdk&typeform-medium-version=next) 
to schedule a meeting with us.

## Live Demo

{% embed https://www.youtube.com/watch?v=ORHviNAOeN8&t=10s %}