feat: add callback to accept auth tokens as part of VSC login (#3117)

* add callback to accept auth tokens as part of vsc login

* copy spinner

* Fix minor issues

Author: heyzec

src/pages/login/LoginVscodeCallback.tsx

@@ -0,0 +1,52 @@
+import { Card, Classes, Elevation, NonIdealState, Spinner, SpinnerSize } from '@blueprintjs/core';
+import classNames from 'classnames';
+import React, { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch } from 'react-redux';
+import { useLocation, useNavigate } from 'react-router';
+import SessionActions from 'src/commons/application/actions/SessionActions';
+import { parseQuery } from 'src/commons/utils/QueryHelper';
+import classes from 'src/styles/Login.module.scss';
+
+const LoginVscodeCallback: React.FC = () => {
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+  const location = useLocation();
+  const { t } = useTranslation('login');
+
+  const { access_token: accessToken, refresh_token: refreshToken } = parseQuery(location.search);
+
+  useEffect(() => {
+    if (accessToken && refreshToken) {
+      dispatch(
+        SessionActions.setTokens({
+          accessToken: accessToken,
+          refreshToken: refreshToken
+        })
+      );
+      dispatch(SessionActions.fetchUserAndCourse());
+      navigate('/welcome');
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div className={classNames(classes['Login'], Classes.DARK)}>
+      <Card elevation={Elevation.FOUR}>
+        <div>
+          <NonIdealState
+            description={t('Logging In')}
+            icon={<Spinner size={SpinnerSize.LARGE} />}
+          />
+        </div>
+      </Card>
+    </div>
+  );
+};
+
+// react-router lazy loading
+// https://reactrouter.com/en/main/route/lazy
+export const Component = LoginVscodeCallback;
+Component.displayName = 'LoginVscodeCallback';
+
+export default LoginVscodeCallback;

src/routes/routerConfig.tsx

@@ -25,6 +25,7 @@ import { GuardedRoute } from './routeGuard';
 const Login = () => import('../pages/login/Login');
 const LoginPage = () => import('../pages/login/LoginPage');
 const LoginCallback = () => import('../pages/login/LoginCallback');
+const LoginVscodeCallback = () => import('../pages/login/LoginVscodeCallback');
 const NusLogin = () => import('../pages/login/NusLogin');
 const Contributors = () => import('../pages/contributors/Contributors');
 const GitHubCallback = () => import('../pages/githubCallback/GitHubCallback');
@@ -128,7 +129,10 @@ export const getFullAcademyRouterConfig = ({
         {
           path: 'login',
           lazy: Login,
-          children: [{ path: 'callback', lazy: LoginCallback }]
+          children: [
+            { path: 'callback', lazy: LoginCallback },
+            { path: 'vscode_callback', lazy: LoginVscodeCallback }
+          ]
         },
         { path: 'welcome', lazy: Welcome, loader: welcomeLoader },
         { path: 'courses', element: <Navigate to="/" /> },