diff --git a/package.json b/package.json
index edef0c8f50..9fa7d9ede8 100644
--- a/package.json
+++ b/package.json
@@ -111,9 +111,9 @@
     "@testing-library/user-event": "^14.4.3",
     "@types/acorn": "^6.0.0",
     "@types/gapi": "^0.0.44",
-    "@types/gapi.auth2": "^0.0.57",
     "@types/gapi.client": "^1.0.5",
     "@types/gapi.client.drive": "^3.0.14",
+    "@types/google.accounts": "^0.0.14",
     "@types/google.picker": "^0.0.39",
     "@types/jest": "^29.0.0",
     "@types/js-yaml": "^4.0.5",
diff --git a/public/index.html b/public/index.html
index bf37250c90..7d5db11c1c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -9,6 +9,7 @@
   <script src="%PUBLIC_URL%/externalLibs/index.js"></script>
   <script type="text/javascript" src="https://apis.google.com/js/api.js"></script>
   <script type="text/javascript" src="https://apis.google.com/js/client.js"></script>
+  <script type="text/javascript" src="https://accounts.google.com/gsi/client"></script>
   <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
diff --git a/src/commons/application/ApplicationTypes.ts b/src/commons/application/ApplicationTypes.ts
index 40fe994fd8..c13b387e15 100644
--- a/src/commons/application/ApplicationTypes.ts
+++ b/src/commons/application/ApplicationTypes.ts
@@ -537,6 +537,7 @@ export const defaultSession: SessionState = {
   assessmentOverviews: undefined,
   agreedToResearch: undefined,
   sessionId: Date.now(),
+  googleAccessToken: undefined,
   githubOctokitObject: { octokit: undefined },
   gradingOverviews: undefined,
   students: undefined,
diff --git a/src/commons/application/actions/SessionActions.ts b/src/commons/application/actions/SessionActions.ts
index 85b6098adc..036279868f 100644
--- a/src/commons/application/actions/SessionActions.ts
+++ b/src/commons/application/actions/SessionActions.ts
@@ -50,6 +50,7 @@ import {
   FETCH_USER_AND_COURSE,
   LOGIN,
   LOGIN_GITHUB,
+  LOGIN_GOOGLE,
   LOGOUT_GITHUB,
   LOGOUT_GOOGLE,
   NotificationConfiguration,
@@ -58,6 +59,7 @@ import {
   REAUTOGRADE_ANSWER,
   REAUTOGRADE_SUBMISSION,
   REMOVE_GITHUB_OCTOKIT_OBJECT_AND_ACCESS_TOKEN,
+  REMOVE_GOOGLE_USER_AND_ACCESS_TOKEN,
   SET_ADMIN_PANEL_COURSE_REGISTRATIONS,
   SET_ASSESSMENT_CONFIGURATIONS,
   SET_CONFIGURABLE_NOTIFICATION_CONFIGS,
@@ -65,6 +67,7 @@ import {
   SET_COURSE_REGISTRATION,
   SET_GITHUB_ACCESS_TOKEN,
   SET_GITHUB_OCTOKIT_OBJECT,
+  SET_GOOGLE_ACCESS_TOKEN,
   SET_GOOGLE_USER,
   SET_NOTIFICATION_CONFIGS,
   SET_TOKENS,
@@ -161,6 +164,8 @@ export const fetchStudents = createAction(FETCH_STUDENTS, () => ({ payload: {} }
 
 export const login = createAction(LOGIN, (providerId: string) => ({ payload: providerId }));
 
+export const loginGoogle = createAction(LOGIN_GOOGLE, () => ({ payload: {} }));
+
 export const logoutGoogle = createAction(LOGOUT_GOOGLE, () => ({ payload: {} }));
 
 export const loginGitHub = createAction(LOGIN_GITHUB, () => ({ payload: {} }));
@@ -205,6 +210,11 @@ export const setAdminPanelCourseRegistrations = createAction(
 
 export const setGoogleUser = createAction(SET_GOOGLE_USER, (user?: string) => ({ payload: user }));
 
+export const setGoogleAccessToken = createAction(
+  SET_GOOGLE_ACCESS_TOKEN,
+  (accessToken?: string) => ({ payload: accessToken })
+);
+
 export const setGitHubOctokitObject = createAction(
   SET_GITHUB_OCTOKIT_OBJECT,
   (authToken?: string) => ({ payload: generateOctokitInstance(authToken || '') })
@@ -219,6 +229,11 @@ export const removeGitHubOctokitObjectAndAccessToken = createAction(
   () => ({ payload: {} })
 );
 
+export const removeGoogleUserAndAccessToken = createAction(
+  REMOVE_GOOGLE_USER_AND_ACCESS_TOKEN,
+  () => ({ payload: {} })
+);
+
 export const submitAnswer = createAction(
   SUBMIT_ANSWER,
   (id: number, answer: string | number | ContestEntry[]) => ({ payload: { id, answer } })
diff --git a/src/commons/application/reducers/SessionsReducer.ts b/src/commons/application/reducers/SessionsReducer.ts
index 6d4442a4be..ebfb085569 100644
--- a/src/commons/application/reducers/SessionsReducer.ts
+++ b/src/commons/application/reducers/SessionsReducer.ts
@@ -9,6 +9,7 @@ import { SourceActionType } from '../../utils/ActionsHelper';
 import { logOut } from '../actions/CommonsActions';
 import {
   removeGitHubOctokitObjectAndAccessToken,
+  removeGoogleUserAndAccessToken,
   setAdminPanelCourseRegistrations,
   setAssessmentConfigurations,
   setConfigurableNotificationConfigs,
@@ -16,6 +17,7 @@ import {
   setCourseRegistration,
   setGitHubAccessToken,
   setGitHubOctokitObject,
+  setGoogleAccessToken,
   setGoogleUser,
   setNotificationConfigs,
   setTokens,
@@ -112,6 +114,13 @@ const newSessionsReducer = createReducer(defaultSession, builder => {
     .addCase(remoteExecUpdateSession, (state, action) => {
       state.remoteExecutionSession = action.payload;
     })
+    .addCase(setGoogleAccessToken, (state, action) => {
+      state.googleAccessToken = action.payload;
+    })
+    .addCase(removeGoogleUserAndAccessToken, (state, action) => {
+      state.googleUser = undefined;
+      state.googleAccessToken = undefined;
+    })
     .addCase(removeGitHubOctokitObjectAndAccessToken, (state, action) => {
       state.githubOctokitObject = { octokit: undefined };
       state.githubAccessToken = undefined;
diff --git a/src/commons/application/types/SessionTypes.ts b/src/commons/application/types/SessionTypes.ts
index f59d8ddade..1049b4b03e 100644
--- a/src/commons/application/types/SessionTypes.ts
+++ b/src/commons/application/types/SessionTypes.ts
@@ -31,6 +31,7 @@ export const FETCH_STUDENTS = 'FETCH_STUDENTS';
 export const FETCH_TEAM_FORMATION_OVERVIEW = 'FETCH_TEAM_FORMATION_OVERVIEW';
 export const FETCH_TEAM_FORMATION_OVERVIEWS = 'FETCH_TEAM_FORMATION_OVERVIEWS';
 export const LOGIN = 'LOGIN';
+export const LOGIN_GOOGLE = 'LOGIN_GOOGLE';
 export const LOGOUT_GOOGLE = 'LOGOUT_GOOGLE';
 export const LOGIN_GITHUB = 'LOGIN_GITHUB';
 export const LOGOUT_GITHUB = 'LOGOUT_GITHUB';
@@ -42,6 +43,7 @@ export const SET_COURSE_REGISTRATION = 'SET_COURSE_REGISTRATION';
 export const SET_ASSESSMENT_CONFIGURATIONS = 'SET_ASSESSMENT_CONFIGURATIONS';
 export const SET_ADMIN_PANEL_COURSE_REGISTRATIONS = 'SET_ADMIN_PANEL_COURSE_REGISTRATIONS';
 export const SET_GOOGLE_USER = 'SET_GOOGLE_USER';
+export const SET_GOOGLE_ACCESS_TOKEN = 'SET_GOOGLE_ACCESS_TOKEN';
 export const SET_GITHUB_OCTOKIT_OBJECT = 'SET_GITHUB_OCTOKIT_OBJECT';
 export const SET_GITHUB_ACCESS_TOKEN = 'SET_GITHUB_ACCESS_TOKEN';
 export const SUBMIT_ANSWER = 'SUBMIT_ANSWER';
@@ -52,6 +54,7 @@ export const REAUTOGRADE_SUBMISSION = 'REAUTOGRADE_SUBMISSION';
 export const REAUTOGRADE_ANSWER = 'REAUTOGRADE_ANSWER';
 export const REMOVE_GITHUB_OCTOKIT_OBJECT_AND_ACCESS_TOKEN =
   'REMOVE_GITHUB_OCTOKIT_OBJECT_AND_ACCESS_TOKEN';
+export const REMOVE_GOOGLE_USER_AND_ACCESS_TOKEN = 'REMOVE_GOOGLE_USER_AND_ACCESS_TOKEN';
 export const UNPUBLISH_GRADING = 'UNPUBLISH_GRADING';
 export const UNSUBMIT_SUBMISSION = 'UNSUBMIT_SUBMISSION';
 export const UPDATE_ASSESSMENT_OVERVIEWS = 'UPDATE_ASSESSMENT_OVERVIEWS';
@@ -134,6 +137,7 @@ export type SessionState = {
   readonly gradings: { [id: number]: GradingQuery };
   readonly notifications: Notification[];
   readonly googleUser?: string;
+  readonly googleAccessToken?: string;
   readonly githubOctokitObject: { octokit: Octokit | undefined };
   readonly githubAccessToken?: string;
   readonly remoteExecutionDevices?: Device[];
diff --git a/src/commons/controlBar/ControlBarGoogleDriveButtons.tsx b/src/commons/controlBar/ControlBarGoogleDriveButtons.tsx
index ff6246eeca..360858ee07 100644
--- a/src/commons/controlBar/ControlBarGoogleDriveButtons.tsx
+++ b/src/commons/controlBar/ControlBarGoogleDriveButtons.tsx
@@ -15,12 +15,14 @@ const stateToIntent: { [state in PersistenceState]: Intent } = {
 type Props = {
   isFolderModeEnabled: boolean;
   loggedInAs?: string;
+  accessToken?: string;
   currentFile?: PersistenceFile;
   isDirty?: boolean;
   onClickOpen?: () => any;
   onClickSave?: () => any;
   onClickSaveAs?: () => any;
   onClickLogOut?: () => any;
+  onClickLogIn?: () => any;
   onPopoverOpening?: () => any;
 };
 
@@ -40,7 +42,12 @@ export const ControlBarGoogleDriveButtons: React.FC<Props> = props => {
     />
   );
   const openButton = (
-    <ControlButton label="Open" icon={IconNames.DOCUMENT_OPEN} onClick={props.onClickOpen} />
+    <ControlButton
+      label="Open"
+      icon={IconNames.DOCUMENT_OPEN}
+      onClick={props.onClickOpen}
+      isDisabled={props.accessToken ? false : true}
+    />
   );
   const saveButton = (
     <ControlButton
@@ -52,13 +59,22 @@ export const ControlBarGoogleDriveButtons: React.FC<Props> = props => {
     />
   );
   const saveAsButton = (
-    <ControlButton label="Save as" icon={IconNames.SEND_TO} onClick={props.onClickSaveAs} />
+    <ControlButton
+      label="Save as"
+      icon={IconNames.SEND_TO}
+      onClick={props.onClickSaveAs}
+      isDisabled={props.accessToken ? false : true}
+    />
   );
-  const logoutButton = props.loggedInAs && (
-    <Tooltip content={`Logged in as ${props.loggedInAs}`}>
-      <ControlButton label="Log out" icon={IconNames.LOG_OUT} onClick={props.onClickLogOut} />
+
+  const loginButton = props.accessToken ? (
+    <Tooltip content={`Logged in as ${props.loggedInAs}`} disabled={!props.loggedInAs}>
+      <ControlButton label="Log Out" icon={IconNames.LOG_OUT} onClick={props.onClickLogOut} />
     </Tooltip>
+  ) : (
+    <ControlButton label="Log In" icon={IconNames.LOG_IN} onClick={props.onClickLogIn} />
   );
+
   const tooltipContent = props.isFolderModeEnabled
     ? 'Currently unsupported in Folder mode'
     : undefined;
@@ -73,7 +89,7 @@ export const ControlBarGoogleDriveButtons: React.FC<Props> = props => {
               {openButton}
               {saveButton}
               {saveAsButton}
-              {logoutButton}
+              {loginButton}
             </ButtonGroup>
           </div>
         }
diff --git a/src/commons/sagas/PersistenceSaga.tsx b/src/commons/sagas/PersistenceSaga.tsx
index e87e2f923d..0ae36173a2 100644
--- a/src/commons/sagas/PersistenceSaga.tsx
+++ b/src/commons/sagas/PersistenceSaga.tsx
@@ -13,7 +13,7 @@ import {
 import { store } from '../../pages/createStore';
 import { OverallState } from '../application/ApplicationTypes';
 import { ExternalLibraryName } from '../application/types/ExternalTypes';
-import { LOGOUT_GOOGLE } from '../application/types/SessionTypes';
+import { LOGIN_GOOGLE, LOGOUT_GOOGLE } from '../application/types/SessionTypes';
 import { actions } from '../utils/ActionsHelper';
 import Constants from '../utils/Constants';
 import { showSimpleConfirmDialog, showSimplePromptDialog } from '../utils/DialogHelper';
@@ -27,8 +27,10 @@ import { AsyncReturnType } from '../utils/TypeHelper';
 import { safeTakeEvery as takeEvery, safeTakeLatest as takeLatest } from './SafeEffects';
 
 const DISCOVERY_DOCS = ['https://www.googleapis.com/discovery/v1/apis/drive/v3/rest'];
-const SCOPES = 'profile https://www.googleapis.com/auth/drive.file';
+const SCOPES =
+  'profile https://www.googleapis.com/auth/drive.file https://www.googleapis.com/auth/userinfo.email';
 const UPLOAD_PATH = 'https://www.googleapis.com/upload/drive/v3/files';
+const USER_INFO_PATH = 'https://www.googleapis.com/oauth2/v3/userinfo';
 
 // Special ID value for the Google Drive API.
 const ROOT_ID = 'root';
@@ -36,18 +38,36 @@ const ROOT_ID = 'root';
 const MIME_SOURCE = 'text/plain';
 // const MIME_FOLDER = 'application/vnd.google-apps.folder';
 
+// GIS Token Client
+let tokenClient: google.accounts.oauth2.TokenClient;
+
 export function* persistenceSaga(): SagaIterator {
-  yield takeLatest(LOGOUT_GOOGLE, function* () {
+  yield takeLatest(LOGOUT_GOOGLE, function* (): any {
     yield put(actions.playgroundUpdatePersistenceFile(undefined));
     yield call(ensureInitialised);
-    yield call([gapi.auth2.getAuthInstance(), 'signOut']);
+    yield call(gapi.client.setToken, null);
+    yield put(actions.removeGoogleUserAndAccessToken());
+  });
+
+  yield takeLatest(LOGIN_GOOGLE, function* (): any {
+    yield call(ensureInitialised);
+    yield call(getToken);
+  });
+
+  yield takeEvery(PERSISTENCE_INITIALISE, function* (): any {
+    yield call(ensureInitialised);
+    // check for stored token
+    const accessToken = yield select((state: OverallState) => state.session.googleAccessToken);
+    if (accessToken) {
+      yield call(gapi.client.setToken, { access_token: accessToken });
+      yield call(handleUserChanged, accessToken);
+    }
   });
 
   yield takeLatest(PERSISTENCE_OPEN_PICKER, function* (): any {
     let toastKey: string | undefined;
     try {
       yield call(ensureInitialisedAndAuthorised);
-
       const { id, name, picked } = yield call(pickFile, 'Pick a file to open');
       if (!picked) {
         return;
@@ -282,8 +302,6 @@ export function* persistenceSaga(): SagaIterator {
       }
     }
   );
-
-  yield takeEvery(PERSISTENCE_INITIALISE, ensureInitialised);
 }
 
 interface IPlaygroundConfig {
@@ -307,24 +325,65 @@ const initialisationPromise: Promise<void> = new Promise(res => {
   startInitialisation = res;
 }).then(initialise);
 
-function handleUserChanged(user: gapi.auth2.GoogleUser) {
-  store.dispatch(
-    actions.setGoogleUser(user.isSignedIn() ? user.getBasicProfile().getEmail() : undefined)
-  );
-}
-
+// only called once
 async function initialise() {
-  await new Promise((resolve, reject) =>
-    gapi.load('client:auth2', { callback: resolve, onerror: reject })
+  // load and initialize gapi.client
+  await new Promise<void>((resolve, reject) =>
+    gapi.load('client', {
+      callback: resolve,
+      onerror: reject
+    })
   );
   await gapi.client.init({
-    apiKey: Constants.googleApiKey,
-    clientId: Constants.googleClientId,
-    discoveryDocs: DISCOVERY_DOCS,
-    scope: SCOPES
+    discoveryDocs: DISCOVERY_DOCS
+  });
+
+  // initialize GIS client
+  await new Promise<google.accounts.oauth2.TokenClient>((resolve, reject) => {
+    resolve(
+      window.google.accounts.oauth2.initTokenClient({
+        client_id: Constants.googleClientId!,
+        scope: SCOPES,
+        callback: () => void 0 // will be updated in getToken()
+      })
+    );
+  }).then(c => {
+    tokenClient = c;
   });
-  gapi.auth2.getAuthInstance().currentUser.listen(handleUserChanged);
-  handleUserChanged(gapi.auth2.getAuthInstance().currentUser.get());
+}
+
+function* handleUserChanged(accessToken: string | null) {
+  if (accessToken === null) {
+    yield put(actions.removeGoogleUserAndAccessToken());
+  } else {
+    const email: string | undefined = yield call(getUserProfileDataEmail);
+    if (!email) {
+      yield put(actions.removeGoogleUserAndAccessToken());
+    } else {
+      yield put(store.dispatch(actions.setGoogleUser(email)));
+      yield put(store.dispatch(actions.setGoogleAccessToken(accessToken)));
+    }
+  }
+}
+
+function* getToken() {
+  yield new Promise((resolve, reject) => {
+    try {
+      // Settle this promise in the response callback for requestAccessToken()
+      (tokenClient as any).callback = (resp: google.accounts.oauth2.TokenResponse) => {
+        if (resp.error !== undefined) {
+          reject(resp);
+        }
+        // GIS has already automatically updated gapi.client
+        // with the newly issued access token by this point
+        resolve(resp);
+      };
+      tokenClient.requestAccessToken();
+    } catch (err) {
+      reject(err);
+    }
+  });
+  yield call(handleUserChanged, gapi.client.getToken().access_token);
 }
 
 function* ensureInitialised() {
@@ -332,13 +391,32 @@ function* ensureInitialised() {
   yield initialisationPromise;
 }
 
+// called multiple times
 function* ensureInitialisedAndAuthorised() {
   yield call(ensureInitialised);
-  if (!gapi.auth2.getAuthInstance().isSignedIn.get()) {
-    yield gapi.auth2.getAuthInstance().signIn();
+  const currToken: GoogleApiOAuth2TokenObject = yield call(gapi.client.getToken);
+
+  if (currToken === null) {
+    yield call(getToken);
+  } else {
+    // check if loaded token is still valid
+    const email: string | undefined = yield call(getUserProfileDataEmail);
+    const isValid = email ? true : false;
+    if (!isValid) {
+      yield call(getToken);
+    }
   }
 }
 
+function getUserProfileDataEmail(): Promise<string | undefined> {
+  return gapi.client
+    .request({
+      path: USER_INFO_PATH
+    })
+    .then(r => r.result.email)
+    .catch(() => undefined);
+}
+
 type PickFileResult =
   | { id: string; name: string; mimeType: string; parentId: string; picked: true }
   | { picked: false };
@@ -372,9 +450,7 @@ function pickFile(
         .setTitle(title)
         .enableFeature(google.picker.Feature.NAV_HIDDEN)
         .addView(view)
-        .setOAuthToken(
-          gapi.auth2.getAuthInstance().currentUser.get().getAuthResponse().access_token
-        )
+        .setOAuthToken(gapi.client.getToken().access_token)
         .setAppId(Constants.googleAppId!)
         .setDeveloperKey(Constants.googleApiKey!)
         .setCallback((data: any) => {
diff --git a/src/commons/sagas/__tests__/PersistenceSaga.ts b/src/commons/sagas/__tests__/PersistenceSaga.ts
index 5b90236f28..a9b6bb7da3 100644
--- a/src/commons/sagas/__tests__/PersistenceSaga.ts
+++ b/src/commons/sagas/__tests__/PersistenceSaga.ts
@@ -1,5 +1,7 @@
 import { Chapter, Variant } from 'js-slang/dist/types';
 import { expectSaga } from 'redux-saga-test-plan';
+import { removeGoogleUserAndAccessToken } from 'src/commons/application/actions/SessionActions';
+import { playgroundUpdatePersistenceFile } from 'src/features/playground/PlaygroundActions';
 
 import { PLAYGROUND_UPDATE_PERSISTENCE_FILE } from '../../../features/playground/PlaygroundTypes';
 import { ExternalLibraryName } from '../../application/types/ExternalTypes';
@@ -19,7 +21,6 @@ jest.mock('../../../pages/createStore');
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const PersistenceSaga = require('../PersistenceSaga').default;
 
-const USER_EMAIL = 'test@email.com';
 const FILE_ID = '123';
 const FILE_NAME = 'file';
 const FILE_DATA = '// Hello world';
@@ -28,27 +29,12 @@ const SOURCE_VARIANT = Variant.LAZY;
 const SOURCE_LIBRARY = ExternalLibraryName.SOUNDS;
 
 beforeAll(() => {
-  const authInstance: gapi.auth2.GoogleAuth = {
-    signOut: () => {},
-    isSignedIn: {
-      get: () => true,
-      listen: () => {}
-    },
-    currentUser: {
-      listen: () => {},
-      get: () => ({
-        isSignedIn: () => true,
-        getBasicProfile: () => ({
-          getEmail: () => USER_EMAIL
-        })
-      })
-    }
-  } as any;
-
   window.gapi = {
     client: {
       request: () => {},
       init: () => Promise.resolve(),
+      getToken: () => {},
+      setToken: () => {},
       drive: {
         files: {
           get: () => {}
@@ -56,18 +42,21 @@ beforeAll(() => {
       }
     },
     load: (apiName: string, callbackOrConfig: gapi.CallbackOrConfig) =>
-      typeof callbackOrConfig === 'function' ? callbackOrConfig() : callbackOrConfig.callback(),
-    auth2: {
-      getAuthInstance: () => authInstance
-    }
+      typeof callbackOrConfig === 'function' ? callbackOrConfig() : callbackOrConfig.callback()
   } as any;
 });
 
-test('LOGOUT_GOOGLE causes logout', async () => {
-  const signOut = jest.spyOn(window.gapi.auth2.getAuthInstance(), 'signOut');
-
-  await expectSaga(PersistenceSaga).dispatch(actions.logoutGoogle()).silentRun();
-  expect(signOut).toBeCalled();
+test('LOGOUT_GOOGLE results in REMOVE_GOOGLE_USER_AND_ACCESS_TOKEN being dispatched', async () => {
+  await expectSaga(PersistenceSaga)
+    .put(playgroundUpdatePersistenceFile(undefined))
+    .put(removeGoogleUserAndAccessToken())
+    .provide({
+      call(effect, next) {
+        return;
+      }
+    })
+    .dispatch(actions.logoutGoogle())
+    .silentRun();
 });
 
 describe('PERSISTENCE_OPEN_PICKER', () => {
diff --git a/src/pages/__tests__/createStore.test.ts b/src/pages/__tests__/createStore.test.ts
index 99407108cb..bc31df2e8e 100644
--- a/src/pages/__tests__/createStore.test.ts
+++ b/src/pages/__tests__/createStore.test.ts
@@ -20,7 +20,8 @@ const mockChangedStoredState: SavedState = {
     role: undefined,
     name: 'Jeff',
     userId: 1,
-    githubAccessToken: 'githubAccessToken'
+    githubAccessToken: 'githubAccessToken',
+    googleAccessToken: 'googleAccessToken'
   },
   playgroundIsFolderModeEnabled: true,
   playgroundActiveEditorTabIndex: {
@@ -57,7 +58,8 @@ const mockChangedState: OverallState = {
     role: undefined,
     name: 'Jeff',
     userId: 1,
-    githubAccessToken: 'githubAccessToken'
+    githubAccessToken: 'githubAccessToken',
+    googleAccessToken: 'googleAccessToken'
   },
   workspaces: {
     ...defaultState.workspaces,
diff --git a/src/pages/localStorage.ts b/src/pages/localStorage.ts
index 261f8b8c1d..3979eec3c4 100644
--- a/src/pages/localStorage.ts
+++ b/src/pages/localStorage.ts
@@ -74,7 +74,8 @@ export const saveState = (state: OverallState) => {
         assessmentConfigurations: state.session.assessmentConfigurations,
         notificationConfigs: state.session.notificationConfigs,
         configurableNotificationConfigs: state.session.configurableNotificationConfigs,
-        githubAccessToken: state.session.githubAccessToken
+        githubAccessToken: state.session.githubAccessToken,
+        googleAccessToken: state.session.googleAccessToken
       },
       achievements: state.achievement.achievements,
       playgroundIsFolderModeEnabled: state.workspaces.playground.isFolderModeEnabled,
diff --git a/src/pages/playground/Playground.tsx b/src/pages/playground/Playground.tsx
index 33eff6549b..733457a4f0 100644
--- a/src/pages/playground/Playground.tsx
+++ b/src/pages/playground/Playground.tsx
@@ -19,6 +19,7 @@ import {
 } from 'src/commons/application/actions/InterpreterActions';
 import {
   loginGitHub,
+  loginGoogle,
   logoutGitHub,
   logoutGoogle
 } from 'src/commons/application/actions/SessionActions';
@@ -267,6 +268,7 @@ const Playground: React.FC<PlaygroundProps> = props => {
     sourceChapter: courseSourceChapter,
     sourceVariant: courseSourceVariant,
     googleUser: persistenceUser,
+    googleAccessToken,
     githubOctokitObject
   } = useTypedSelector(state => state.session);
 
@@ -588,17 +590,26 @@ const Playground: React.FC<PlaygroundProps> = props => {
         currentFile={persistenceFile}
         loggedInAs={persistenceUser}
         isDirty={persistenceIsDirty}
+        accessToken={googleAccessToken}
         key="googledrive"
         onClickSaveAs={() => dispatch(persistenceSaveFileAs())}
         onClickOpen={() => dispatch(persistenceOpenPicker())}
         onClickSave={
           persistenceFile ? () => dispatch(persistenceSaveFile(persistenceFile)) : undefined
         }
+        onClickLogIn={() => dispatch(loginGoogle())}
         onClickLogOut={() => dispatch(logoutGoogle())}
         onPopoverOpening={() => dispatch(persistenceInitialise())}
       />
     );
-  }, [isFolderModeEnabled, persistenceFile, persistenceUser, persistenceIsDirty, dispatch]);
+  }, [
+    isFolderModeEnabled,
+    persistenceFile,
+    persistenceUser,
+    persistenceIsDirty,
+    dispatch,
+    googleAccessToken
+  ]);
 
   const githubPersistenceIsDirty =
     githubSaveInfo && (!githubSaveInfo.lastSaved || githubSaveInfo.lastSaved < lastEdit);
diff --git a/yarn.lock b/yarn.lock
index 12dfebf9a7..bc06f9ad2d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2909,13 +2909,6 @@
     "@types/qs" "*"
     "@types/serve-static" "*"
 
-"@types/gapi.auth2@^0.0.57":
-  version "0.0.57"
-  resolved "https://registry.yarnpkg.com/@types/gapi.auth2/-/gapi.auth2-0.0.57.tgz#5544a696d97fc979044d48a8bf7de5e2b35899b5"
-  integrity sha512-2nYF2OZlEqWvF5rLk0nrQlAkk51Abe9zLHvA85NZqpIauYT/TluDNsPWkncI969BR/Ts5mdKrXgiWE/f4N6mMQ==
-  dependencies:
-    "@types/gapi" "*"
-
 "@types/gapi.client.discovery@*":
   version "1.0.9"
   resolved "https://registry.yarnpkg.com/@types/gapi.client.discovery/-/gapi.client.discovery-1.0.9.tgz#e2472989baa01f2e32a2d5a80981da8513f875ae"
@@ -2935,11 +2928,16 @@
   resolved "https://registry.yarnpkg.com/@types/gapi.client/-/gapi.client-1.0.8.tgz#8e02c57493b014521f2fa3359166c01dc2861cd7"
   integrity sha512-qJQUmmumbYym3Amax0S8CVzuSngcXsC1fJdwRS2zeW5lM63zXkw4wJFP+bG0jzgi0R6EsJKoHnGNVTDbOyG1ng==
 
-"@types/gapi@*", "@types/gapi@^0.0.44":
+"@types/gapi@^0.0.44":
   version "0.0.44"
   resolved "https://registry.yarnpkg.com/@types/gapi/-/gapi-0.0.44.tgz#f097f7a0f59d63a59098a08a62a560ca168426fb"
   integrity sha512-hsgJMfZ/pMwI15UlAYHMNwj8DRoigo1odhbPwEXdp19ZQwQAXbcRrpzaDsfc+9XM6RtGpvl4Ja7uW8A+KPCa7w==
 
+"@types/google.accounts@^0.0.14":
+  version "0.0.14"
+  resolved "https://registry.yarnpkg.com/@types/google.accounts/-/google.accounts-0.0.14.tgz#ffc36c30c5107b9bdab115830c85f7e377bc0dea"
+  integrity sha512-HqIVkVzpiLWhlajhQQd4rIV7czanFvXblJI2J1fSrL+VKQuQwwZ63m35D/mI0flsqKE6p/hNrAG0Yn4FD6JvNA==
+
 "@types/google.picker@^0.0.39":
   version "0.0.39"
   resolved "https://registry.yarnpkg.com/@types/google.picker/-/google.picker-0.0.39.tgz#bb205ffb9736e8ec4a1af7cc87811d0fc5dc30fa"