Keycloak Integration in Minutes with Cloud IAM and WunderGraph

Published: 2022-04-18

Stefan Avram, Co-Founder @ WunderGraph

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 and Cloud IAM, 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 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 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 plan. Once you have created an account. Create a new deployment on the deployment page.

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.

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.

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.

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.

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). 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.

Time to start your first project!#

You can start using Keycloak with Cloud IAM and WunderGraph 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 Channel soon!

If you want to take your WunderGraph application to the next level with dedicated support from our team, use this link to schedule a meeting with us.

Live Demo#

About the Author

Stefan Avram, Co-Founder @ WunderGraph

Stefan Avram is a software engineer turned growth hacker.

Thanks to his exceptional development and communication skills, he excels at building funnels and managing communities.

Based out of Miami, he also connects us with the US business landscape.

Keycloak Integration in Minutes with Cloud IAM and WunderGraph

How it works#

Time to start your first project!#

Live Demo#

What to read next

About the Author

Comments