# Connecting with Frontend Applications

This guide explains how to establish a connection between a frontend single-page application (SPA) — such as those built with React, Vue, or Angular and a Keycloak identity provider using the official Keycloak JavaScript adapter. It walks through the necessary setup, configuration, and execution of a protected login flow.

## **Variables**

Certain parameters must be provided to integrate a frontend application with Keycloak. Below is a breakdown of each required variable, its purpose, and where to find it. Here’s what each variable represents:

<table border="1" id="bkmrk-variable-description" style="border-collapse: collapse; border-color: rgb(0, 0, 0); width: 100%;"><thead><tr><th style="border-color: rgb(0, 0, 0); width: 14.6561%;">**Variable**

</th><th style="border-color: rgb(0, 0, 0); width: 41.6014%;">**Description**

</th><th style="border-color: rgb(0, 0, 0); width: 43.7426%;">**Purpose**

</th></tr></thead><tbody><tr><td style="border-color: rgb(0, 0, 0); width: 14.6561%;">`URL`

</td><td style="border-color: rgb(0, 0, 0); width: 41.6014%;"><span class="s1">Full Keycloak realm URL (e.g., </span>https://your-domain/realms/your-realm<span class="s1">)</span>

</td><td style="border-color: rgb(0, 0, 0); width: 43.7426%;">The base endpoint for authentication, token requests, and user info

</td></tr><tr><td style="border-color: rgb(0, 0, 0); width: 14.6561%;">`CLIENT_ID`

</td><td style="border-color: rgb(0, 0, 0); width: 41.6014%;">Client ID from the Keycloak Admin Console

</td><td style="border-color: rgb(0, 0, 0); width: 43.7426%;">Identifies the SPA in Keycloak

</td></tr><tr><td style="border-color: rgb(0, 0, 0); width: 14.6561%;">`REALM`

</td><td style="border-color: rgb(0, 0, 0); width: 41.6014%;">The realm name where the client is defined

</td><td style="border-color: rgb(0, 0, 0); width: 43.7426%;">Defines the identity space

</td></tr><tr><td style="border-color: rgb(0, 0, 0); width: 14.6561%;">`REDIRECT_URI`

</td><td style="border-color: rgb(0, 0, 0); width: 41.6014%;">The URL where the frontend app should return after login

</td><td style="border-color: rgb(0, 0, 0); width: 43.7426%;">Must be registered in Keycloak as a Valid Redirect URI

</td></tr></tbody></table>

These values can be found under <span class="s1">**Clients &gt; \[Your Client\] &gt; Settings**</span> in the Keycloak Admin Console.

## **Prerequisites**

#### **Install Node.js and NPM**

Check if Node.js is installed:

```
node -v
```

If not, download and install from [https://nodejs.org](https://nodejs.org).

#### **Set Up Frontend Project**

Create a frontend project using your framework of choice. For example:

- **React:**

```
npx create-react-app keycloak-app
cd keycloak-app
```

- **Vue:**

```
npm init vue@latest
cd keycloak-app
```

- **Angular:**

```
ng new keycloak-app
cd keycloak-app
```

Then install the Keycloak JS adapter:

```
npm install keycloak-js
```

## **Code**

Create a file named <span class="s2">keycloak.js</span> inside your <span class="s2">src/</span> directory with the following content:

```javascript
import Keycloak from "keycloak-js";

const keycloak = new Keycloak({
  url: "https://your-keycloak-domain",
  realm: "your-realm",
  clientId: "your-client-id",
});

export default keycloak;
```

Then update your app’s entry point (<span class="s1">App.js</span>, <span class="s1">main.js</span>, or <span class="s1">main.ts</span>) to initialize Keycloak:

### **Example (React - App.js):**

```javascript
import React, { useEffect, useState } from "react";
import keycloak from "./keycloak";

function App() {
  const [authenticated, setAuthenticated] = useState(false);

  useEffect(() => {
    keycloak.init({ onLoad: "login-required" }).then((auth) => {
      setAuthenticated(auth);
    });
  }, []);

  if (!authenticated) return <div>Loading...</div>;

  return (
    <div>
      <h1>Welcome, {keycloak.tokenParsed?.preferred_username}</h1>
      <p>You have accessed a protected frontend app using Keycloak.</p>
    </div>
  );
}

export default App;
```

##### **Notes for Vue and Angular**

- In Vue, you can wrap <span class="s1">keycloak.init()</span> inside a plugin and gate your app rendering using the <span class="s1">onReady()</span> hook.
- In Angular, use route guards (<span class="s1">CanActivate</span>) to protect routes based on Keycloak session state.

## **Execution**

1. Replace all placeholders in the config with actual values from your Keycloak setup.
2. Start your frontend application:

```
npm start
```

3. Open your browser and navigate to:

```
http://localhost:3000
```

4. The Keycloak login page will appear. After authentication:
    
    
    - You’ll be redirected back to your SPA
    - The user info will be displayed, indicating successful integration