diff --git a/examples/user-authentication/frontend/src/client.ts b/examples/user-authentication/frontend/src/client.ts
new file mode 100644
index 0000000..e361637
--- /dev/null
+++ b/examples/user-authentication/frontend/src/client.ts
@@ -0,0 +1,34 @@
+import { HttpClient } from "tsrpc-browser";
+import { setStatus } from "./index";
+import { BaseResponse } from "./shared/protocols/base";
+import { serviceProto } from "./shared/protocols/serviceProto";
+
+// Create Client
+export const client = new HttpClient(serviceProto, {
+    server: 'http://127.0.0.1:3000',
+    logger: console
+});
+
+// When server return a SSOToken, store it to localStorage
+client.flows.postApiReturnFlow.push(v => {
+    if (v.return.isSucc) {
+        let res = v.return.res as BaseResponse;
+        if (res.__ssoToken !== undefined) {
+            localStorage.setItem('SSO_TOKEN', res.__ssoToken);
+        }
+    }
+    else if (v.return.err.code === 'NEED_LOGIN') {
+        localStorage.removeItem('SSO_TOKEN');
+        setStatus(false);
+    }
+    return v;
+});
+
+// Append "__ssoToken" to request automatically
+client.flows.preCallApiFlow.push(v => {
+    let ssoToken = localStorage.getItem('SSO_TOKEN');
+    if (ssoToken) {
+        v.req.__ssoToken = ssoToken;
+    }
+    return v;
+})
\ No newline at end of file
diff --git a/examples/user-authentication/frontend/src/index.ts b/examples/user-authentication/frontend/src/index.ts
index cc0f260..ea1f3fe 100644
--- a/examples/user-authentication/frontend/src/index.ts
+++ b/examples/user-authentication/frontend/src/index.ts
@@ -1,38 +1,7 @@
-import { HttpClient } from 'tsrpc-browser';
-import { BaseResponse } from './shared/protocols/base';
-import { serviceProto } from './shared/protocols/serviceProto';
+import { client } from "./client";
 
 const $ = document.querySelector.bind(document) as (v: string) => HTMLElement;
 
-// Create Client
-let client = new HttpClient(serviceProto, {
-    server: 'http://127.0.0.1:3000',
-    logger: console
-});
-
-// When server return a SSOToken, store it to localStorage
-client.flows.postApiReturnFlow.push(v => {
-    if (v.return.isSucc) {
-        let res = v.return.res as BaseResponse;
-        if (res.__ssoToken !== undefined) {
-            localStorage.setItem('SSO_TOKEN', res.__ssoToken);
-        }
-    }
-    else if (v.return.err.code === 'NEED_LOGIN') {
-        localStorage.removeItem('SSO_TOKEN');
-        setStatus(false);
-    }
-    return v;
-});
-// Append "__ssoToken" to request automatically
-client.flows.preCallApiFlow.push(v => {
-    let ssoToken = localStorage.getItem('SSO_TOKEN');
-    if (ssoToken) {
-        v.req.__ssoToken = ssoToken;
-    }
-    return v;
-})
-
 // Login & Logout
 $('.login-normal button').onclick = async () => {
     let ret = await client.callApi('user/Login', {
@@ -96,7 +65,7 @@ $('.action .admin button').onclick = async () => {
     $('.action .admin .return').style.display = 'block';
 }
 
-function setStatus(logined: boolean) {
+export function setStatus(logined: boolean) {
     if (logined) {
         $('.status').className = 'status logined';
         $('.status').innerText = `Logined as ${localStorage.getItem('LoginedRole')} Role`;
@@ -107,4 +76,4 @@ function setStatus(logined: boolean) {
     }
 }
 // Init logined status
-setStatus(!!localStorage.getItem('SSO_TOKEN'));
\ No newline at end of file
+setStatus(!!localStorage.getItem('SSO_TOKEN'));