code_verifier can be written in 'local storage' in localhost but can not in a hosted domain

[jonathan-fan-versent]

Expected Behavior

[REQUIRED] Describe expected behavior

During 'performAuthorizationRequest', internal.code_verifier should be written into local storage for both localhost and hosted domain. Need to retrieve code_verifier from local storage to get tokens. Or if there is a better way to get internal.code_verifier, please let me know. Thanks a lot.

Describe the problem

[REQUIRED] Actual Behavior

When deployed code to a hosted domain, the whole internal property is missing in Chrome and IE 11. Please refer to the following screenshot, the left-hand side is hosted domain which doesn't have internal.code_verifier, and the right-hand side is localhost which has internal.code_verifier

[REQUIRED] Steps to reproduce the behavior

[REQUIRED] Environment

• AppAuth-JS version: @openid/appauth@1.2.4
• AppAuth-JS Environment (Node, Browser (UserAgent), ...):
  • Node: v10.15.1
  • Browsers:
    • Chrome Version 76.0.3809.100 (Official Build) (64-bit)
    • IE 11 win7
• Source code snippts (inline or JSBin)

  
  async function getConfig() {
  const requestor = new NodeRequestor();
  return await AuthorizationServiceConfiguration.fetchFromIssuer(
  OPENID_CONFIG_URL,
  requestor
  );
  }

export async function authenticate() { const config = await getConfig();

const request = new AuthorizationRequest({ client_id: CLIENT_ID, redirect_uri: redirectUri, scope: 'offline_access', response_type: AuthorizationRequest.RESPONSE_TYPE_CODE }); const authorizationHandler = new RedirectRequestHandler(); authorizationHandler.performAuthorizationRequest(config, request); } // ... export async function getTokensByCode({ code }) { const config = await getConfig(); const currentAuthRequestValue = localStorage.getItem('appauth_current_authorization_request'); const { internal: { code_verifier}} = JSON.parse(localStorage.getItem(currentAuthRequestValue + '_appauth_authorization_request')); const request = new TokenRequest({ client_id: CLIENT_ID, redirect_uri: redirectUri, grant_type: GRANT_TYPE_AUTHORIZATION_CODE, code, extras: { code_verifier } }); const tokenHandler = new BaseTokenRequestHandler(requestor); return await tokenHandler.performTokenRequest(config, request); }

[tikurahul]

You cannot write to local storage on behalf of another domain. Also, if you want to, you can shim LocalStorageBackend and implement it to do whatever you want.

I am also unsure about exactly what the problem seems to be ? Why do you want the verifier on both domains ?

[jonathan-fan-versent]

Hi @tikurahul, thanks for your reply.

I am not trying to write to local storage on behalf of another domain. After deploying to prod env I need internal.code_verifier to be written in local storage under prod domain.

The problem is:

• in local env, the internal.code_verifier can be written in local storage under 'localhost:8000'.
• but in prod env, the internal.code_verifier can NOT be written in local storage under prod domain.

The left-hand side screenshot is taken on prod domain, which doesn't have internal.code_verifier.

As you can see from the code, the TokenRequest needs code_verifier to pass in.

[tikurahul]

Why can't you write it in the prod domain though ?

If you are relying on localstorage it should work (unless the user is in incognito mode).

[jonathan-fan-versent]

The user is not in incognito mode, and I don't have control of writing it. I am using RedirectRequestHandler, and here is the code from AppAuth. https://github.com/openid/AppAuth-JS/blob/master/src/redirect_based_handler.ts#L63-L71

[tikurahul]

You have full control on the LocalStorageBackend. Also what is the error you are seeing ? I am still unclear why everything but the verifier is getting saved ?

[jonathan-fan-versent]

That's the same question I am asking here: 'why everything but the internal is getting saved'.

The error message is 'code_verifier' is undefined as I am trying to get it from local storage which should have internal.code_verifier.

and even I have full control of LocalStorageBackend, the code_verifier and challenge are generated within https://github.com/openid/AppAuth-JS/blob/master/src/authorization_request.ts#L79-L101 and doesn't expose to the outside app.

[tikurahul]

I have no idea why. This is your code and your deployment. It works well in the sample app and from what I can tell in your local environment. You have to debug and figure things out.

You have access to the internal data via the internal property. You are creating the request to begin with. This is a low level OAuth2 API and you have to understand what's going on.

If you have a better bug report, please feel free to reopen the bug. Otherwise Stackoverflow might be a better place to ask.

[fungiboletus]

Hei all, I have the same problem and perhaps some clues to identify the cause :

• The storage is window.sessionStorage
• I run my app in a VM
• If I have a port redirection to my VM and browse http://localhost:8080 it works
• If I use my VM IP directly (using HTTP and not HTTPS), it doesn't : http://192.168.128.128:8080
• It used to work before my summer holidays
• It's not working anymore (internal is undefined) on Chromium based browsers
• It's actually still working in Firefox
• I haven't changed my code nor my dependencies : I have exactly the same docker image since June.

I don't know if you want to reopen this issue, but I feel like this is a better place than Stackoverflow to discuss about this weird behaviour.

My guess is that Chromium browsers don't like localStorage and sessionStorage anymore on non HTTPS or localhost.

[BR0kEN-]

To make it work in IE11 you'll need almost everything from the list:

import 'core-js/features/promise';
import 'core-js/features/object';
import 'core-js/features/array';
import 'core-js/features/array-buffer';
import 'core-js/web';
import 'whatwg-fetch';
import 'webcrypto-shim';

The problem with code_verifier in particular caused by the missing window.crypto and even having window.crypto = window.crypto || window.msCrypto is not a cure because msCrypto does not return promises but CryptoOperation.

https://developer.mozilla.org/ru/docs/Web/API/SubtleCrypto/digest