fix: [PDI-3249] - Use sessionStorage for codeVerifier and nonce: update OAuth and storage (#13570)

* Use sessionStorage for codeVerifier: update OAuth and storage

* update

* Added changeset: Login issue: Use sessionStorage for codeVerifier and nonce

* Remove alert and fix ts errors

* Remove alert and fix ts errors

* Update AuthenticationError message

* Update the test references to use session storage instead of local storage for the code verifier and nonce

---------

Co-authored-by: pmakode-akamai <pmakode@akamai.com>

Author: mkaminsk-akamai

packages/manager/.changeset/pr-13570-fixed-1776157063540.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Login issue: Use sessionStorage for codeVerifier and nonce ([#13570](https://github.com/linode/manager/pull/13570))

packages/manager/src/OAuth/oauth.test.tsx

@@ -78,10 +78,10 @@ describe('generateOAuthAuthorizeEndpoint', () => {
     expect(url).toContain('code_challenge=');
   });
 
-  it('generates a "state" (aka nonce), stores it in local storage, and includes it in the url', async () => {
+  it('generates a "state" (aka nonce), stores it in session storage, and includes it in the url', async () => {
     storage.authentication.nonce.clear();
 
-    expect(storage.authentication.nonce.get()).toBeNull();
+    expect(storage.authentication.nonce.get()).toBeUndefined();
 
     const url = await generateOAuthAuthorizeEndpoint('/linodes');
 
@@ -91,10 +91,10 @@ describe('generateOAuthAuthorizeEndpoint', () => {
     expect(url).toContain(`state=${nonceInStorage}`);
   });
 
-  it('generates a code verifier and stores it in local storage', async () => {
+  it('generates a code verifier and stores it in session storage', async () => {
     storage.authentication.codeVerifier.clear();
 
-    expect(storage.authentication.codeVerifier.get()).toBeNull();
+    expect(storage.authentication.codeVerifier.get()).toBeUndefined();
 
     await generateOAuthAuthorizeEndpoint('/linodes');
 
@@ -126,19 +126,19 @@ describe('handleOAuthCallback', () => {
     ).rejects.toThrowError('Error parsing search params on OAuth callback.');
   });
 
-  it('should throw if there is no code verifier found in local storage', async () => {
+  it('should throw if there is no code verifier found in session storage', async () => {
     storage.authentication.codeVerifier.clear();
 
     await expect(
       handleOAuthCallback({
         params: 'state=fehgefhgkefghk&code=gyuwyutfetyfew',
       })
     ).rejects.toThrowError(
-      'No code codeVerifier found in local storage when running OAuth callback.'
+      'No code codeVerifier found in session storage when running OAuth callback.'
     );
   });
 
-  it('should throw if there is no nonce found in local storage', async () => {
+  it('should throw if there is no nonce found in session storage', async () => {
     storage.authentication.codeVerifier.set('fakecodeverifier');
     storage.authentication.nonce.clear();
 
@@ -147,11 +147,11 @@ describe('handleOAuthCallback', () => {
         params: 'state=fehgefhgkefghk&code=gyuwyutfetyfew',
       })
     ).rejects.toThrowError(
-      'No nonce found in local storage when running OAuth callback.'
+      'No nonce found in session storage when running OAuth callback.'
     );
   });
 
-  it('should throw if the nonce in local storage does not match the "state" sent back by login', async () => {
+  it('should throw if the nonce in session storage does not match the "state" sent back by login', async () => {
     storage.authentication.codeVerifier.set('fakecodeverifier');
     storage.authentication.nonce.set('fakenonce');
 

packages/manager/src/OAuth/oauth.ts

@@ -207,7 +207,7 @@ export async function handleOAuthCallback(options: AuthCallbackOptions) {
 
   if (!codeVerifier) {
     throw new AuthenticationError(
-      'No code codeVerifier found in local storage when running OAuth callback.'
+      'No code codeVerifier found in session storage when running OAuth callback.'
     );
   }
 
@@ -217,7 +217,7 @@ export async function handleOAuthCallback(options: AuthCallbackOptions) {
 
   if (!storedNonce) {
     throw new AuthenticationError(
-      'No nonce found in local storage when running OAuth callback.'
+      'No nonce found in session storage when running OAuth callback.'
     );
   }
 

packages/manager/src/utilities/storage.ts

@@ -5,6 +5,7 @@ import type { StackScriptPayload } from '@linode/api-v4/lib/stackscripts/types';
 import type { SupportTicketFormFields } from 'src/features/Support/SupportTickets/SupportTicketDialog';
 
 const localStorageCache: Record<string, any> = {};
+const sessionStorageCache: Record<string, any> = {};
 
 export const getStorage = (key: string, fallback?: any) => {
   if (localStorageCache[key]) {
@@ -48,6 +49,25 @@ export const clearStorage = (key: string) => {
   window.localStorage.removeItem(key);
 };
 
+export const getSessionStorage = (key: string): string | undefined => {
+  if (key in sessionStorageCache) {
+    return sessionStorageCache[key];
+  }
+  const item = window.sessionStorage.getItem(key);
+  sessionStorageCache[key] = item ?? undefined;
+  return item ?? undefined;
+};
+
+export const setSessionStorage = (key: string, value: string) => {
+  sessionStorageCache[key] = value;
+  window.sessionStorage.setItem(key, value);
+};
+
+export const clearSessionStorage = (key: string) => {
+  delete sessionStorageCache[key];
+  window.sessionStorage.removeItem(key);
+};
+
 const PAGE_SIZE = 'PAGE_SIZE';
 const INFINITE_PAGE_SIZE = 'INFINITE_PAGE_SIZE';
 const TOKEN = 'authentication/token';
@@ -150,19 +170,19 @@ export interface Storage {
 export const storage: Storage = {
   authentication: {
     codeVerifier: {
-      get: () => getStorage(CODE_VERIFIER),
-      set: (v) => setStorage(CODE_VERIFIER, v),
-      clear: () => clearStorage(CODE_VERIFIER),
+      get: () => getSessionStorage(CODE_VERIFIER),
+      set: (v) => setSessionStorage(CODE_VERIFIER, v),
+      clear: () => clearSessionStorage(CODE_VERIFIER),
     },
     expire: {
       get: () => getStorage(EXPIRE),
       set: (v) => setStorage(EXPIRE, v),
       clear: () => clearStorage(EXPIRE),
     },
     nonce: {
-      get: () => getStorage(NONCE),
-      set: (v) => setStorage(NONCE, v),
-      clear: () => clearStorage(NONCE),
+      get: () => getSessionStorage(NONCE),
+      set: (v) => setSessionStorage(NONCE, v),
+      clear: () => clearSessionStorage(NONCE),
     },
     scopes: {
       get: () => getStorage(SCOPES),