diff --git a/.gitignore b/.gitignore
index e144f8d..2c66fb8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
 summerizer.py
+.env
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index b772c44..005815d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,6 +5,7 @@ import SideNavigation from "./components/SideNavigation";
 import MarkdownContent from "./components/MarkdownContent";
 import "./App.css";
 import Callback from "./Callback";
+import {config} from "./confs/appConfig";
 
 const App = () => {
     return (
diff --git a/src/AuthProvider.js b/src/AuthProvider.js
index 7bc1402..dce3ca0 100644
--- a/src/AuthProvider.js
+++ b/src/AuthProvider.js
@@ -1,6 +1,6 @@
 import React, { createContext, useEffect, useState } from "react";
 import { UserManager } from "oidc-client-ts";
-import {oidcConfig} from "./oicdConfig";
+import {appConfig} from "./confs/appConfig";
 
 
 export const AuthContext = createContext({
@@ -11,19 +11,32 @@ export const AuthContext = createContext({
 
 const AuthProvider = ({ children }) => {
     const [user, setUser] = useState(null);
-    const userManager = new UserManager(oidcConfig);
+    const userManager = new UserManager(appConfig.oidcConfig);
 
     useEffect(() => {
-        userManager.getUser().then((user) => {
+        userManager.getUser()
+            .then((user) => {
             if (user && !user.expired) {
                 setUser(user);
+                localStorage.setItem("accessToken", user.access_token);
+            } else if (user && user.expired) {
+                userManager.signinSilent()
+                    .then((newUser) => {
+                        setUser(newUser);
+                        localStorage.setItem("accessToken", newUser.access_token);
+                    })
+                    .catch((err) => {
+                        console.error(err);
+                    })
             }
         });
     }, [userManager]);
 
     const login = () => {
-        console.log('triggered');
-        userManager.signinRedirect().catch((err) => {console.log(err)});
+        userManager.signinRedirect().catch((err) => {
+            console.log(appConfig);
+            console.log(err);
+        });
     }
     const logout = () => userManager.signoutRedirect();
 
diff --git a/src/Callback.js b/src/Callback.js
index 7e8a466..573e735 100644
--- a/src/Callback.js
+++ b/src/Callback.js
@@ -1,11 +1,11 @@
 import React, { useEffect } from "react";
 import { UserManager } from "oidc-client-ts";
-import {oidcConfig} from "./oicdConfig";
+import {appConfig} from "./confs/appConfig";
 
 
 const Callback = () => {
     useEffect(() => {
-        const userManager = new UserManager(oidcConfig);
+        const userManager = new UserManager(appConfig.oidcConfig);
         userManager.signinRedirectCallback().then(() => {
             window.location.href = "/";
         });
diff --git a/src/components/MainNavigation.js b/src/components/MainNavigation.js
index 5626d88..13d6dd4 100644
--- a/src/components/MainNavigation.js
+++ b/src/components/MainNavigation.js
@@ -16,7 +16,7 @@ const MainNavigation = () => {
                 { user && user.profile ? (
                     <div>
                         <h1>{user.profile.name}</h1>
-                        <Link to="/logout">Logout</Link>
+                        <button onClick={logout}>logout</button>
                     </div>
                 ) : (
                     <li>
diff --git a/src/confs/appConfig.js b/src/confs/appConfig.js
new file mode 100644
index 0000000..3059a49
--- /dev/null
+++ b/src/confs/appConfig.js
@@ -0,0 +1,30 @@
+
+const appConfig = {
+    serverHost : null,
+    kc_client_id: null,
+    oidcConfig : null
+};
+
+const config = async () => {
+    await fetch("http://127.0.0.1:5000/api/config/server_host")
+        .then((res) => res.json())
+        .then((data) => appConfig.serverHost  = data['value'])
+        .catch((err) => console.error(err));
+    await fetch("http://127.0.0.1:5000/api/config/kc_client_id")
+        .then((res) => res.json())
+        .then((data) => appConfig["kc_client_id"] = data["value"])
+        .catch((err) => console.error(err));
+    appConfig.oidcConfig = {
+        authority: "https://login.hangman-lab.top/realms/Hangman-Lab",
+        client_id: appConfig.kc_client_id,
+        redirect_uri: `${appConfig.serverHost}/callback`,
+        post_logout_redirect_uri: appConfig.serverHost,
+        response_type: "code",
+        scope: "openid profile email",
+
+    };
+    console.log(appConfig);
+};
+
+
+export {appConfig, config};
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 1d563bb..f9a8dfd 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,12 +2,18 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
 import AuthProvider from "./AuthProvider";
+import {config} from "./confs/appConfig";
 
 //ReactDOM.render(<App />, document.getElementById("root"));
 
-const root =  ReactDOM.createRoot(document.getElementById("root"));
-root.render(
-    <AuthProvider>
-        <App />
-    </AuthProvider>
-);
\ No newline at end of file
+const initializeApp = async () => {
+    await config();
+    const root =  ReactDOM.createRoot(document.getElementById("root"));
+    root.render(
+        <AuthProvider>
+            <App />
+        </AuthProvider>
+    );
+}
+
+initializeApp();
\ No newline at end of file
diff --git a/src/oicdConfig.js b/src/oicdConfig.js
deleted file mode 100644
index be4c018..0000000
--- a/src/oicdConfig.js
+++ /dev/null
@@ -1,8 +0,0 @@
-export const oidcConfig = {
-    authority: "https://login.hangman-lab.top/realms/Hangman-Lab",
-    client_id: "labdev",
-    redirect_uri: "http://localhost:3000/callback",
-    post_logout_redirect_uri: "http://localhost:3000",
-    response_type: "code",
-    scope: "openid profile email",
-};
\ No newline at end of file
diff --git a/src/utils/fetchWithCache.js b/src/utils/fetchWithCache.js
index 7a2defb..ca1bb0d 100644
--- a/src/utils/fetchWithCache.js
+++ b/src/utils/fetchWithCache.js
@@ -19,7 +19,11 @@ export async function fetchWithCache(url, cacheKey = url, cacheExpiry = 60) {
     }
 
     try {
-        const fetchPromise = fetch(url)
+        const token = localStorage.getItem("accessToken");
+        const headers = {
+            ...(token? {Authorization: `Bearer ${token}`} : {}),
+        }
+        const fetchPromise = fetch(url, {headers})
             .then((response) => {
                 if (!response.ok) {
                     throw new Error(`HTTP error! Status: ${response.status}`);
diff --git a/webpack.config.js b/webpack.config.js
index 2e65d4b..14c56a7 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,6 +1,7 @@
 //webpack.config.js
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const webpack = require('webpack')
 
 module.exports = {
     entry: './src/index.js',
@@ -27,7 +28,11 @@ module.exports = {
     plugins: [
         new HtmlWebpackPlugin({
             template: "./public/index.html",
-        })
+        }),
+        new webpack.DefinePlugin({
+            FRONT_END_CLIENT_ID: process.env.FRONT_END_CLIENT_ID,
+            SERVER_HOST: process.env.SERVER_HOST,
+        }),
     ],
     devServer: {
         static: path.join(__dirname, 'public'),