fetch client id from server for oauth

client/app/components/Navbar/Navbar.tsx

@@ -1,18 +1,15 @@
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 import jwt_decode from 'jwt-decode';
-import { StorageService } from '../../services';
+import { OauthService, StorageService } from '../../services';
 import './Navbar.scss';
 
-const baseUrl = window.location.origin + '/oauth';
-
-const oauthUrl = `https://discordapp.com/api/oauth2/authorize?client_id=410818759746650140&redirect_uri=${baseUrl}&response_type=code&scope=identify%20guilds`;
-
 interface Props {}
 
 interface State {
   token: string | null;
   email?: string;
+  oauthUrl?: string;
 }
 
 export class Navbar extends React.Component<Props, State> {
@@ -24,20 +21,46 @@ export class Navbar extends React.Component<Props, State> {
   }
 
   componentDidMount() {
+    this.loadOauthUrl();
     const token = StorageService.getJWT();
 
     if (token) {
-      const claims: any = jwt_decode(token!);
+      const claims: any = jwt_decode(token);
       const email = claims['email'];
       this.setState({ token, email });
     }
   }
 
+  async loadOauthUrl() {
+    try {
+      const oauthUrl = await OauthService.getOauthUrl();
+      this.setState({ oauthUrl });
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
   private logout = () => {
     StorageService.clear();
     window.location.href = '/';
   };
 
+  renderLoginButton() {
+    if (!this.state.oauthUrl) {
+      return null;
+    }
+
+    return !this.state.token ? (
+      <a href={this.state.oauthUrl} className="Navbar__item">
+        Login
+      </a>
+    ) : (
+      <a className="Navbar__item" onClick={this.logout}>
+        Logout
+      </a>
+    );
+  }
+
   render() {
     return (
       <div className="Navbar">
@@ -58,15 +81,7 @@ export class Navbar extends React.Component<Props, State> {
           Stats
         </NavLink>
 
-        {!this.state.token ? (
-          <a href={oauthUrl} className="Navbar__item">
-            Login
-          </a>
-        ) : (
-          <a className="Navbar__item" onClick={this.logout}>
-            Logout
-          </a>
-        )}
+        {this.renderLoginButton()}
 
         {this.state.email && <div className="Navbar__email">{this.state.email}</div>}
       </div>

client/app/services/index.ts

@@ -1,2 +1,3 @@
 export * from './axios.service';
+export * from './oauth.service';
 export * from './storage.service';

client/app/services/oauth.service.ts

@@ -0,0 +1,18 @@
+import { axios } from './axios.service';
+
+const redirectUrl = window.location.origin + '/oauth';
+
+const getClientID = async (): Promise<string> => {
+  const res = await axios.get('/api/config/client_id');
+  return res.data['id'];
+};
+
+const getOauthUrl = async (): Promise<string> => {
+  const clientID = await getClientID();
+  return `https://discordapp.com/api/oauth2/authorize?client_id=${clientID}&redirect_uri=${redirectUrl}&response_type=code&scope=email%20identify`;
+};
+
+export const OauthService = {
+  getClientID,
+  getOauthUrl,
+};