# Usage with Keycloak

### Provisioning a Keycloak server

If you already have access to a Keycloak server you can skip this section.  

{% tabs %}
{% tab title="I deploy Keycloak myself" %}
Follow one of the following guides:  

{% embed url="<https://www.keycloak.org/getting-started/getting-started-zip>" %}
Get started with Keycloak on bare metal
{% endembed %}

{% embed url="<https://www.keycloak.org/getting-started/getting-started-docker>" %}
Get started with Keycloak on Docker
{% endembed %}

{% embed url="<https://www.keycloak.org/getting-started/getting-started-kube>" %}
Get started with Keycloak on Kubernetes
{% endembed %}

{% embed url="<https://www.keycloak.org/getting-started/getting-started-openshift>" %}
Get started with Keycloak on OpenShift
{% endembed %}

{% embed url="<https://www.keycloak.org/getting-started/getting-started-podman>" %}
Get started with Keycloak on Podman
{% endembed %}
{% endtab %}

{% tab title="Managed Keycloak instance" %}
Don't want to deploy and maintain a own Keycloak server yourself?&#x20;

Choosing Keycloak as a Service through a cloud IAM provider can offload the complexities of management and maintenance. It ensures that your system is always up-to-date with the latest security patches and features without the direct overhead of server upkeep. This is especially beneficial for teams prioritizing development and innovation over infrastructure management, offering robust support and service level agreements to guarantee smooth operation. &#x20;

{% embed url="<https://www.cloud-iam.com/>" %}
{% endtab %}
{% endtabs %}

### Configuring your Keycloak server

Let's configure your Keycloak server with good default for an SPA.&#x20;

Connect to the admin panel of your Keycloak server (we assumes it's <https://auth.my-domain.net/auth>)

* Create a realm called "myrealm" (or something else), go to **Realm settings**
  1. On the tab General
     1. *User Profile Enabled*: **On**
  2. On the tab **login**
     1. *User registration*: **On**
     2. *Forgot password*: **On**
     3. *Remember me*: **On**
  3. On the tab **email,** we give an example with [AWS SES](https://aws.amazon.com/ses/), if you don't have a SMTP server at hand you can skip this by going to **Authentication** (on the left panel) -> Tab **Required Actions** -> Uncheck "set as default action" **Verify Email**. Be aware that with email verification disable, anyone will be able to sign up to your service.
     1. *From*: **<noreply@my-domain.net>**
     2. *Host*: **email-smtp.us-east-2.amazonaws.com**
     3. *Port*: **465**
     4. *Authentication*: **enabled**
     5. *Username*: **\*\*\*\*\*\*\*\*\*\*\*\*\*\***
     6. *Password*: **\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\***
     7. When clicking "save" you'll be asked for a test email, you have to provide one that correspond **to a pre-existing user** or you will get a silent error and the credentials won't be saved.
  4. On the tab Themes
     1. *Login theme*: keycloak (see next section to see how to create a theme for your app)
     2. *Email theme*: keycloak
  5. On the tab **Localization**
     1. *Internationalization*: **Enabled**
     2. *Supported locales*: \<Select the languages you wish to support>
  6. On the tab **Sessions**
     1. SSO Session Idle: 14 days - This setting and the following two are so that when the user click "remember me" when he logs in, he doesn't have to login again for the next two weeks.
     2. SSO Session Idle Remember Me: 14 days
     3. SSO Session Max Remember Me: 14 days
* Create a new OpenID Connect client called "myclient" (or something else) by accessing Clients -> Create Client

  1. *Root URL*: **<https://your-domain.net>** (or something else, your app does not need to be on the&#x20;

  the same domain as your Keycloak).

  1. *Valid redirect URIs*: **<https://onyxia.my-domain.net/\\>*, <http://localhost\\>* (for testing in local)**
  2. *Web origins*: **\***
  3. Login theme: keycloak (or your theme if you have one)
* (OPTIONAL) In **Authentication** (on the left panel) -> Tab **Required Actions** enable and set as default action **Therms and Conditions.** (You can use Keycloakify to specify your therme and condition, see next section)
* (OPTIONAL) On the left pannel you can go to identity provider to enable login via Google, GitHub, Instagram, ect...&#x20;

{% hint style="success" %}
Now the parameter that you will have to provide to oidc-spa are:&#x20;

```
    issuerUri: "https://auth.your-domain.net/auth/realms/myrealm",
    clientId: "myclient"
```

Replace `your-domain.net`, `myrealm` and `myclient` by what you actually used in the configuration process.
{% endhint %}

### Customizing the login and register page&#x20;

By default, Keycloak comes with very generic login and register pages, you might want to customize them to match the design system of your App.  \
We've createad a lib that let you create Keycloak theme using React!   &#x20;

{% embed url="<https://www.keycloakify.dev/>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.oidc-spa.dev/docs/v3/getting-started/usage-with-keycloak.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.