Generate Token through Auth0

front/src/index.tsx

@@ -3,12 +3,48 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import { BrowserRouter } from 'react-router-dom';
+import { Auth0Provider } from '@auth0/auth0-react';
+import {
+  ApolloClient,
+  InMemoryCache,
+  ApolloProvider,
+  createHttpLink,
+} from '@apollo/client';
+import { setContext } from '@apollo/client/link/context';
+
+const httpLink = createHttpLink({ uri: process.env.REACT_APP_API_URL });
+
+const authLink = setContext((_, { headers }) => {
+  const token = localStorage.getItem('accessToken');
+  return {
+    headers: {
+      ...headers,
+      authorization: token ? `Bearer ${token}` : '',
+    },
+  };
+});
+
+const client = new ApolloClient({
+  link: authLink.concat(httpLink),
+  cache: new InMemoryCache(),
+});
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement,
 );
 root.render(
-  <BrowserRouter>
-    <App />
-  </BrowserRouter>,
+  <Auth0Provider
+    domain={process.env.REACT_APP_AUTH0_DOMAIN || ''}
+    clientId={process.env.REACT_APP_AUTH0_CLIENT_ID || ''}
+    authorizationParams={{
+      redirect_uri: process.env.REACT_APP_AUTH0_CALLBACK_URL || '',
+      audience: process.env.REACT_APP_AUTH0_AUDIENCE || '',
+    }}
+  >
+    <ApolloProvider client={client}>
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    </ApolloProvider>
+  </Auth0Provider>,
 );