# ReactJs

**Software Name:** Galaxy ID

**Software Version:** 0.1

### Acronyms and Terms

<table data-header-hidden><thead><tr><th width="150"></th><th width="150"></th><th></th></tr></thead><tbody><tr><td><strong>No.</strong></td><td><strong>Words</strong></td><td><strong>Descriptions</strong></td></tr><tr><td>1</td><td>GID</td><td>Galaxy ID</td></tr><tr><td>2</td><td>SSO</td><td>Single Sign-On</td></tr><tr><td>4</td><td>Client</td><td>An application that integrates for GID</td></tr></tbody></table>

### Summary

Galaxy ID is an SSO system. It provides endpoints that enable clients to authenticate and authorize in many places.

### Integrate

#### Setting up our React frontend

First, create a new React app.

Install `keycloak-js`, `@react-keycloack/web`, and `react-router-dom`

```
npm install --save keycloak-js @react-keycloak/web react-router-dom
```

Keycloak and `@react-keycloak/web` will be used for the React-Keycloak implementation, while React Router DOM will be used for creating our pages. Please note that this tutorial was created using [React Router v6](https://blog.logrocket.com/react-router-v6/).

Next, add two folders named `components` and `pages` to your `src` folder. Add a `Homepage.js` file and a `Securedpage.js` file to the `pages` folder, and add a `Nav.js` file to the `components` folder.

Add the following code to the `components/Nav.js` file:

```
import React from "react";

const Nav = () => {
 return (
   <div>
     <div className="top-0 w-full flex flex-wrap">
       <section className="x-auto">
         <nav className="flex justify-between bg-gray-200 text-blue-800 w-screen">
           <div className="px-5 xl:px-12 py-6 flex w-full items-center">
             <h1 className="text-3xl font-bold font-heading">
               Keycloak React AUTH.
             </h1>
             <ul className="hidden md:flex px-4 mx-auto font-semibold font-heading space-x-12">
               <li>
                 <a className="hover:text-blue-800" href="/">
                   Home
                 </a>
               </li>
               <li>
                 <a className="hover:text-blue-800" href="/secured">
                   Secured Page
                 </a>
               </li>
             </ul>
             <div className="hidden xl:flex items-center space-x-5">
               <div className="hover:text-gray-200">
                 <h1>Login</h1>
               </div>
             </div>
           </div>
         </nav>
       </section>
     </div>
   </div>
 );
};

export default Nav;
```

And add the following to the `pages/Homepage.js` file.

```
import React from 'react';


const Home = () => {

 return (
   <div>
     <h1 className="text-green-800 text-4xl">Welcome to the Homepage</h1>
   </div>
 );
};

export default Home;
```

Add the following to the `pages/Securedpage.js` file.

```
import React from 'react';


const Secured = () => {

 return (
   <div>
     <h1 className="text-black text-4xl">Welcome to the Protected Page.</h1>
   </div>
 );
};

export default Secured;
```

Update your `App.js` code with the following code.

```
import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Nav from "./components/Nav";
import WelcomePage from "./pages/Homepage";
import SecuredPage from "./pages/Securedpage";

function App() {
 return (
   <div>
     <Nav />
     <BrowserRouter>
       <Routes>
         <Route exact path="/" element={<WelcomePage />} />
         <Route path="/secured" element={<SecuredPage />} />
       </Routes>
     </BrowserRouter>
   </div>
 );
}

export default App;
```

The frontend file structure should look similar to this:

![](/files/SUwDAyAufssV2SU2T7bO)

#### Setting up Keycloak in React

After the React frontend is completely implemented, the next step is to configure Keycloak in the React project.

Create a file named `Keycloak.js` in your `src` folder and add the following code to it.

```
import Keycloak from "keycloak-js";
const keycloak = new Keycloak('<path to keycloak.json>');

export default keycloak;
```

`keycloak.json` (will be provided by admin):

```
{
  "realm": "demo",
  "auth-server-url": "https://gid-stg.demoapp.info/",
  "ssl-required": "external",
  "resource": "gid-client",
  "public-client": true,
  "confidential-port": 0
}
```

Update your `App.js` code to this:

```
import React from "react";
import { ReactKeycloakProvider } from "@react-keycloak/web";
import keycloak from "./Keycloak"
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Nav from "./components/Nav";
import WelcomePage from "./pages/Homepage";
import SecuredPage from "./pages/Securedpage";

function App() {
 return (
   <div>
     <ReactKeycloakProvider authClient={keycloak}>
       <Nav />
       <BrowserRouter>
         <Routes>
           <Route exact path="/" element={<WelcomePage />} />
           <Route path="/secured" element={<SecuredPage />} />
         </Routes>
       </BrowserRouter>
       </ReactKeycloakProvider>
   </div>
 );
}

export default App;
```

This code imports `<ReactKeycloakProvider />` and wraps the entire app with the provider. We also added our `keycloak.js` file as a prop.

#### Setting up React `ProtectedRoute`

In this step, we will create a protected route that can only be accessed by authenticated users. Create a `helpers` folder, and add a `PrivateRoute.js` file to it. Add the following code to the `helpers/PrivateRoute.js` file.

```
import { useKeycloak } from "@react-keycloak/web";

const PrivateRoute = ({ children }) => {
 const { keycloak } = useKeycloak();

 const isLoggedIn = keycloak.authenticated;

 return isLoggedIn ? children : null;
};

export default PrivateRoute;
```

This code checks if a user trying to access a protected route is authenticated, and either displays the protected route when a user is authenticated, or displays nothing if the user is unauthenticated.

Keycloak’s JavaScript adapter provides access to some additional properties for securing your application, such as the `authenticated` property, which we will be using to check if a user is authenticated. You can [view the other available properties](https://www.keycloak.org/docs/latest/securing_apps/index.html#properties) in the Keycloak docs.

Update the routes in your `App.js` file. We wrapped our `SecuredPage` route with the protected route we created; this will ensure that the contents of `SecuredPage` can only be accessed by authenticated individuals.

```
import React from "react";
import { ReactKeycloakProvider } from "@react-keycloak/web";
import keycloak from "./Keycloak";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Nav from "./components/Nav";
import WelcomePage from "./pages/Homepage";
import SecuredPage from "./pages/Securedpage";
import PrivateRoute from "./helpers/PrivateRoute";

function App() {
 return (
   <div>
     <ReactKeycloakProvider authClient={keycloak}>
       <Nav />
       <BrowserRouter>
         <Routes>
           <Route exact path="/" element={<WelcomePage />} />
           <Route
             path="/secured"
             element={
               <PrivateRoute>
                 <SecuredPage />
               </PrivateRoute>
             }
           />
         </Routes>
       </BrowserRouter>
     </ReactKeycloakProvider>
   </div>
 );
}

export default App;
```

We have now added a new login/logout button. The code checks if a user is authenticated and displays the **Login** button when the user has been authenticated, and a **Logout** button when the user has not been authenticated.

When the **Login** button is clicked, it calls Keycloak’s [`Login method`](https://www.keycloak.org/docs/latest/securing_apps/index.html#login-options) to authenticate the user. When the **Logout** button is clicked, it calls the [`Logout method`](https://www.keycloak.org/docs/latest/securing_apps/index.html#logout-options) to log the user out.

When you visit the demo React website we created, there should now be a **Login** button on the navbar. Also, the secured page should display nothing if you try to access it.

![](/files/JKVCk8JhCmkzecG92n0L)

When you click the **Login** button, you should be redirected to a Galaxy ID login page.

<figure><img src="/files/XiKpgkA98VOyYEOLKvv3" alt=""><figcaption></figcaption></figure>

#### Get user information

* With the access token, we can get user info with *tokenParsed* property: *keycloak.tokenParsed* (recommend).

![](/files/heZkdabA2h7sJm1ZOeiR)

* With RESTful API:

**URL**: \<host>/realms/\<realmName>/protocol/openid-connect/userinfo

**Method**: GET

**Header**: Authorization: Bearer \<access token>

Example request:

```
curl --location --request GET 'https://gid-stg.demoapp.info/realms/demo/protocol/openid-connect/userinfo' \
--header 'Authorization: Bearer <access token>'
```

Example response:

```
{
    "sub": "3d83889f-297f-4283-8602-73c6b60630be",
    "email_verified": false,
    "name": "Duy Doan",
    "preferred_username": "+84391234567",
    "given_name": "Duy",
    "family_name": "Doan",
    "email": "duydoan@gmail.com"
}
```

* [How to implement Keycloak authentication in React - LogRocket Blog](https://blog.logrocket.com/implement-keycloak-authentication-react/)
* <https://github.com/keycloak/keycloak-documentation/blob/main/securing_apps/topics/oidc/javascript-adapter.adoc>


---

# 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.galaxyjoy.vn/integration/reactjs.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.