Code Monkey home page Code Monkey logo

appauth-js's Introduction

AppAuth for JS

AppAuth for JavaScript is a client SDK for public clients for communicating with OAuth 2.0 and OpenID Connect providers following the best practice RFC 8252 - OAuth 2.0 for Native Apps. The library is designed for use in Web Apps, Node.js CLI applications, Chrome Apps and applications that use Electron or similar frameworks.

It strives to directly map the requests and responses of those specifications, while following the idiomatic style of the implementation language.

The library also supports the PKCE extension to OAuth which was created to secure authorization codes in public clients when custom URI scheme redirects are used. The library is friendly to other extensions (standard or otherwise) with the ability to handle additional parameters in all protocol requests and responses.

Examples

An example application using the library is included in the src/node_app folder and at https://github.com/googlesamples/appauth-js-electron-sample.

Auth Flow

AppAuth supports manual interaction with the Authorization Server where you need to perform your own token exchanges. This example performs a manual exchange.

Fetch Service Configuration
AuthorizationServiceConfiguration.fetchFromIssuer(openIdConnectUrl)
  .then(response => {
    log('Fetched service configuration', response);
    this.configuration = response;
    this.showMessage('Completed fetching configuration');
  })
  .catch(error => {
    log('Something bad happened', error);
    this.showMessage(`Something bad happened ${error}`)
  });
Make Authorization Requests
this.notifier = new AuthorizationNotifier();
// uses a redirect flow
this.authorizationHandler = new RedirectRequestHandler();
// set notifier to deliver responses
this.authorizationHandler.setAuthorizationNotifier(this.notifier);
// set a listener to listen for authorization responses
this.notifier.setAuthorizationListener((request, response, error) => {
  log('Authorization request complete ', request, response, error);
  if (response) {
    this.code = response.code;
    this.showMessage(`Authorization Code ${response.code}`);
  }
});

// create a request
let request = new AuthorizationRequest({
    client_id: clientId,
    redirect_uri: redirectUri,
    scope: scope,
    response_type: AuthorizationRequest.RESPONSE_TYPE_CODE,
    state: undefined,
    extras: {'prompt': 'consent', 'access_type': 'offline'}
  });

// make the authorization request
this.authorizationHandler.performAuthorizationRequest(this.configuration, request);
Making Token Requests
this.tokenHandler = new BaseTokenRequestHandler();

let request: TokenRequest|null = null;

if (this.code) {
  let extras: StringMap|undefined = undefined;
  if (this.request && this.request.internal) {
    extras = {};
    extras['code_verifier'] = this.request.internal['code_verifier'];
  }
  // use the code to make the token request.
  request = new TokenRequest({
      client_id: clientId,
      redirect_uri: redirectUri,
      grant_type: GRANT_TYPE_AUTHORIZATION_CODE,
      code: this.code,
      refresh_token: undefined,
      extras: extras
    });
} else if (this.tokenResponse) {
  // use the token response to make a request for an access token
  request = new TokenRequest({
      client_id: clientId,
      redirect_uri: redirectUri,
      grant_type: GRANT_TYPE_REFRESH_TOKEN,
      code: undefined,
      refresh_token: this.tokenResponse.refreshToken,
      extras: undefined
    });
}

this.tokenHandler.performTokenRequest(this.configuration, request)
  .then(response => {
    // ... do something with token response
  });

Development

Preamble

This client has been written with TypeScript.

Setup

  • Install the latest version of Node. NVM (Node Version Manager is highly recommended).

  • Use nvm install to install the recommended Node.js version.

  • Download the latest version of Visual Studio Code from here.

Provision Dependencies

This app uses npm to provision it dependencies.

  • git clone the AppAuthJS library and go to the root folder of the project containing package.json file.
  • npm install to install all the dev and project dependencies.

Thats it! You are now ready to start working on AppAuthJS.

Development Workflow

The project uses npm scripts to automate development workflows. These scripts are made available via the package.json file.

The following scripts are included:

  • npm run-script compile or tsc will compile all your TypeScript files. All compiled files go into the built/ folder.

  • npm run-script watch or tsc --watch will compile your TypeScript files in watch mode. Recommended if you want to get continuous feedback.

  • npm run-script build-app generates the output bundle.js file in the built/ directory. This includes the full AppAuthJS library including all its dependencies.

  • npm test provisions the Karma test runner to run all unit tests. All tests are written using Jasmine. To DEBUG your tests, click on the Debug button in the Karma test runner to look at the actual source of the tests. You can attach break points here.

  • npm run-script app builds the test app on a local web server. This is an end-to-end app which uses AppAuthJS and is a demonstration on how to use the library.

  • npm run-script node-app builds a Node.js CLI sample app. This is an end-to-end app which uses AppAuthJS in a Node.js context.

appauth-js's People

Contributors

aberasarte avatar jakefeasel avatar josephperrott avatar meligy avatar raffis avatar someone1 avatar tikurahul avatar williamdenniss avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

appauth-js's Issues

Couldn't connect to Discord

Hello ! It may be a noobish question, but I couldn't find any other sample than https://github.com/googlesamples/appauth-js-electron-sample. How would I connect to Discord ?

Expected Behavior

Some Discord endpoint should return a json

Describe the problem

Using the sample, I replaced openIdConnectUrl :

How can I get the json ?

  • AppAuth-JS version: 1.2.2
  • AppAuth-JS Environment (Node, Browser (UserAgent), ...): Node v11.9.0, Electron 4.0.0, Angular 7.2.7

Benefits of this library

I've got a mobile app which I've currently used oidc-client to implement auth for.

How does this library compare to oidc-client?

The owner pointed me to your project.

Need support for openid endpoints

Expected Behavior

Fetching .well-known/openid-configuration from the authority should return both userinfo_endpoint and end_session_endpoint URLs if available so that the consumer can inquire information about the user identity and also revoke the identity at the authority. This would allow support for user sign-out at the authority.

Describe the problem

[REQUIRED] Actual Behavior

The URLs for userinfo_endpoint and end_session_endpoint authority endpoints are not available in the type AuthorizationServiceConfiguration as optional properties.

[REQUIRED] Steps to reproduce the behavior

N/A

[REQUIRED] Environment

  • AppAuth-JS version: ________________
  • AppAuth-JS Environment (Node, Browser (UserAgent), ...): _______________________
  • Source code snippts (inline or JSBin)

AppAuth-JS in combination with WebExtensions

Hi,
I'm developing a web browser extension (using WebExtensions standard) in which a user needs to authenticate using openid-connect. I'm facing all sorts of issues with redirects as part of the authentication flow. The main reason is that I have to open an addition browser (popup) window where the authentication flow is executed. This is because redirects are not supported in the main popup of a browser extension. Now, several browsers will simply close the main popup window if it looses focus, which happens when the authentication window is opened :-(
I tried hard to get oidc-client to do the job, but it is not satisfactory.

My question is, will AppAuth-JS help me by supporting (e.g.) the resource-owner flow, such that I can simply pass username/password to my identity provider? Or is there another preferred approach to get openid-connect authentication work in a browser extension? Are there any examples? Is someone willing to help?

Thanks in advance.

Improve NPM experience

Hello,
There are a few things that can make NPM usage (and TypeScript experience especially) a lot better.

  1. Adding a barrel. An src/index.ts file that exports all other files in that folder.
  2. Adding a main property in package.json that points to the compiled result of the barrel, ex: built/index.js
  3. Adding a types property in package.json that points to the TypeScript declaration of the barrel, ex: built/index.d.ts

That'll allow people to import * as appAuth from '@openid/appauth';, or have more specific imports, as they wish.

Documentation: TypeScript Docs: Publishing

P.S.

Thanks heaps for the great work on the library.

P.P.S.

If you agree with the concept, I can also create a PR for this.

Notifier server should only bind to loopback interface

Expected Behavior

Describe expected behavior

The notifier server should only listen on the loopback interface (127.0.0.1)

Describe the problem

Actual Behavior

The notifier server binds to 0.0.0.0 or - if ipv6 is available - ::, hence every client in the same network can access the notifier server. Another client in the same network might shut down the notifier server or inject auth tokens with a malicious request.

Steps to reproduce the behavior

1.) Connect two clients to the same network
2.) Client A: Start the example electron app (googlesamples/appauth-js-electron-sample)
3.) Client A: Click "Sign in" -> Browser window opens consent screen
4.) Client B: open http://192.168.0.101:8000/code=xxx (assuming client A has IP: 192.168.0.101)
5.) Electron app on client A logs the below output to the developer console of the BrowserWindow

Checking to see if there is an authorization response to be delivered. logger.ts:23 
Authorization request complete  AuthorizationRequest {โ€ฆ} 
AuthorizationResponse {code: "xxx", state: undefined} null logger.ts:21 
Request ended with an error  400 {error: "invalid_grant", error_description: "Malformed auth code."}
internal/process/next_tick.js:188 
Uncaught (in promise) AppAuthError {message: "Bad Request", extras: undefined}

Environment

  • AppAuth-JS version: Tested on 0.3.5 and 1.1.1
  • AppAuth-JS Environment: node

Possible Solutions

server.listen(this.httpServerPort);

The above should be changed to:

server.listen(this.httpServerPort, '127.0.0.1');

Alternatively allow to configure the host(s):

this.httpServerHosts = [
  '127.0.0.1',
  '::1'
]

this.httpServerHosts.forEach(host => {
  server.listen(this.httpServerPort, host);
})

See: https://nodejs.org/docs/latest-v10.x/api/net.html#net_server_listen_port_host_backlog_callback

Token request is blocked by client_secret requirement

I tested an example browser app from this repo and it works fine. But if I test it with my clientId I get an error "client_secret is missing" on last POST https://oauth2.googleapis.com/token request (fetching refresh token)

Am I missing something in oauth client configuration in google console? I suppose some notes should be added to readme

  • AppAuth-JS version: 1.1.1
  • AppAuth-JS Environment: browser

configurable "usehash" while parsing queryParams in RedirectRequestHandler

Expected Behavior

Currently in RedirectRequestHandler.completeAuthorizationRequest, it is assumed that useHash is true for parsing the queryParams. In my case, the response has no hash value. So parsing query params always fails.

Line# 100: let queryParams = this.utils.parse(this.locationLike, true /* use hash */);

[REQUIRED] Describe expected behavior

useHash should be configurable.

Describe the problem

Unable to complete auth request using RedirectRequestHandler.completeAuthorizationRequest

[REQUIRED] Actual Behavior

useHash should be configurable.

[REQUIRED] Steps to reproduce the behavior

Do an auth where redirect response does not have a hash.

[REQUIRED] Environment

Any open id configuration should do, I am not sure what case hash is null.

  • AppAuth-JS version: 1.1.1
  • AppAuth-JS Environment (Node, Browser (UserAgent), ...): Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36
  • Source code snippts (inline or JSBin)

Register my own Google Client

The example apps use a public client id already registered with google. When I attempt to create my own client against the browserify app and substitute in its client id, I get a client_secret required error.

Are there instructions for how to set up a client through Google to work with this library?

Expected Behavior

[REQUIRED] Describe expected behavior

I would expect my client to behave similarly to the included client id, based on my guess for correct client creation parameters/

Describe the problem

[REQUIRED] Actual Behavior

I get the following response

{
 "error": "invalid_request",
 "error_description": "client_secret is missing."
}

(page just says 'something bad happened')

[REQUIRED] Steps to reproduce the behavior

I create a new client at https://console.developers.google.com:

None of the other client types seem appropriate, as they either require a iOS bundle ID, android public key, chrome store address, and/or do not allow configuring redirect URLs at all.

[REQUIRED] Environment

  • AppAuth-JS version: master
  • AppAuth-JS Environment (Node, Browser (UserAgent), ...): node 9.5.0, chrome, safari tech preview * Source code snippts (inline or JSBin)

npm install broken

I'm on a Windows 10 machine with node 8.1.4 and npm 5.0.3.

After cloning the repository, opening it in Visual Studio Code, and using the bash shell to "npm install", I get the following output with errors:

$ npm install

[email protected] install D:\BR\AppAuth-JS\node_modules\fsevents
node install

npm WARN prepublish-on-install As of npm@5, prepublish scripts are deprecated.
npm WARN prepublish-on-install Use prepare for build steps and prepublishOnly for upload-only.
npm WARN prepublish-on-install See the deprecation note in npm help scripts for more information.

@openid/[email protected] prepublish D:\BR\AppAuth-JS
npm run-script build-app

@openid/[email protected] prebuild-app D:\BR\AppAuth-JS
npm run-script compile

@openid/[email protected] precompile D:\BR\AppAuth-JS
npm run-script clean && npm run-script format

@openid/[email protected] clean D:\BR\AppAuth-JS
rm -rf built

@openid/[email protected] format D:\BR\AppAuth-JS
clang-format -i -style=file src/**.ts

invalid argument
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @openid/[email protected] format: clang-format -i -style=file src/**.ts
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @openid/[email protected] format script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\SH\AppData\Roaming\npm-cache_logs\2017-07-14T19_21_02_021Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @openid/[email protected] precompile: npm run-script clean && npm run-script format
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @openid/[email protected] precompile script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\SH\AppData\Roaming\npm-cache_logs\2017-07-14T19_21_02_048Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @openid/[email protected] prebuild-app: npm run-script compile
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @openid/[email protected] prebuild-app script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\SH\AppData\Roaming\npm-cache_logs\2017-07-14T19_21_02_071Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @openid/[email protected] prepublish: npm run-script build-app
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @openid/[email protected] prepublish script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

PKCE support

The readme specifies:

https://github.com/openid/AppAuth-JS/blob/master/README.md

The library also supports the PKCE extension to OAuth

However I cannot find any specification of code_challenge within the source code, therefore I would like some guidance of how to enable this?

For example if I look at the similarly named project AppAuth-Android I do find references to this expected PKCE parameter:

https://github.com/openid/AppAuth-Android/blob/de0ed1ad9b2362c1b27dfb3c1d2e6c8f13d699b4/library/java/net/openid/appauth/AuthorizationRequest.java#L959

Thanks.

Compile errors when using within another TypeScript project

I use this lib within a TS project. When I import the NodeRequestor like in the node_app example and run tsc (version 2.5.2), I get the following compiler errors:

node_modules/@openid/appauth/built/node_support/node_requestor.d.ts(1,23): error TS2688: Cannot find type definition file for 'jquery'.
node_modules/@openid/appauth/built/node_support/node_requestor.d.ts(7,22): error TS2304: Cannot find name 'JQueryAjaxSettings'.
node_modules/@openid/appauth/built/xhr.d.ts(1,23): error TS2688: Cannot find type definition file for 'jquery'.
node_modules/@openid/appauth/built/xhr.d.ts(6,31): error TS2304: Cannot find name 'JQueryAjaxSettings'.
node_modules/@openid/appauth/built/xhr.d.ts(12,22): error TS2304: Cannot find name 'JQueryAjaxSettings'.
node_modules/@openid/appauth/built/xhr.d.ts(21,22): error TS2304: Cannot find name 'JQueryAjaxSettings'.

I can workaround this by adding the @types/jquery module to my project and "dom" to compilerOptions.lib in my tsconfig.json.

I think a solution for this problem would be to move @types/jquery from devDependencies to dependencies.

Allow modification of the message after successful authorization

Expected Behavior

The message that is shown to the user after they succesfully log in should be modifiable.

Describe the problem

When the user successfully logs in, they are presented with a tab that says "Close your browser to continue". This is most of the times not the right call to action as the AppAuth does not open a tab in a new window if a browser is already open.

Especially when being used with an electron app, it would be useful from a UX point of view if we could use a custom message once the user logs in (or at least be able to change it to "Close the tab to continue").

Steps to reproduce the behavior

Succesfully log in in the browser.

Environment

  • AppAuth-JS version: 0.3.5
  • AppAuth-JS Environment (Node, Browser (UserAgent), ...): Node
  • Source code snippts (inline or JSBin)

Please move @types/jasmine to devDependencies

Please move @types/jasmine to devDependencies, as it is needed for testing only.

It clashes with the @types/mocha in my project, as both of them use the same global identifier:

../../node_modules/@types/jasmine/index.d.ts(14,18): error TS2300: Duplicate identifier 'describe'.
../../node_modules/@types/jasmine/index.d.ts(16,18): error TS2300: Duplicate identifier 'xdescribe'.
../../node_modules/@types/jasmine/index.d.ts(25,18): error TS2300: Duplicate identifier 'it'.
../../node_modules/@types/jasmine/index.d.ts(35,18): error TS2300: Duplicate identifier 'xit'.
../../node_modules/@types/mocha/index.d.ts(36,13): error TS2300: Duplicate identifier 'describe'.
../../node_modules/@types/mocha/index.d.ts(37,13): error TS2300: Duplicate identifier 'xdescribe'.
../../node_modules/@types/mocha/index.d.ts(42,13): error TS2300: Duplicate identifier 'it'.
../../node_modules/@types/mocha/index.d.ts(43,13): error TS2300: Duplicate identifier 'xit'.

Token revocation request: Conflicting content-type value and data format

Expected Behavior

The data format of the token revocation request should match the content-type header value used.

I have the code fixed, and tested it against an instance of IdentityServer. I can PR this at any time.

Describe the problem

The request is being sent with a content-type value of "application/x-www-form-urlencoded", but the data is being sent as json.

Code:

...
      headers: {'Content-Type': 'application/x-www-form-urlencoded'},
      data: request.toJson()
...

Steps to reproduce the behavior

  • Execute a "revokeTokenRequest" through the BaseTokenRequesthandler
  • IdentityServer4 rejects the request because it tries to read the request body as "x-www-form-urlencoded" data but can't

Example:

private async revokeAccessToken() {
        this.tokenHandler = new BaseTokenRequestHandler(this.requestor);
       
        let request = new RevokeTokenRequest(this.tokenResponse.refreshToken, "refresh_token", ClientId);
        let response = await this.tokenHandler.performRevokeTokenRequest(this.configuration, request)
        this.AuthorizationCallback(EndSessionRedirectUri);
    }

Environment

  • AppAuth-JS version: latest
  • AppAuth-JS Environment (Node, Browser (UserAgent), ...): N/A
  • Source code snippts (inline or JSBin)

implicit flow and auth (PKCE) flow logout behavior

Expected Behavior

I doubt that currently, does this support for end session route with id_token_hint&client_id? I want it for both implicit and authorization flow with PKCE.

[REQUIRED] Describe expected behavior

This should have end session route with id_token_hint&client_id support with a logout function.

Describe the problem

This library does not have logout functions which interact with end session route.

[REQUIRED] Actual Behavior

This library does not have logout functions which interact with end session route.

[REQUIRED] Steps to reproduce the behavior

[REQUIRED] Environment

  • AppAuth-JS version: 0.3.5

Sample Compile TS errors

I have tried to download the sample of implementation of AppAuth-JS with electron and after trying compiling I get this error:

How fix it?
Thx.

node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3421,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'a' must be of type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>', but here has type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3422,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'abbr' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3423,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'address' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3424,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'area' must be of type 'DetailedHTMLProps<AreaHTMLAttributes<HTMLAreaElement>, HTMLAreaElement>', but here has type 'DetailedHTMLProps<AreaHTMLAttributes<HTMLAreaElement>, HTMLAreaElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3425,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'article' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3426,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'aside' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3427,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'audio' must be of type 'DetailedHTMLProps<AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>', but here has type 'DetailedHTMLProps<AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3428,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'b' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3429,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'base' must be of type 'DetailedHTMLProps<BaseHTMLAttributes<HTMLBaseElement>, HTMLBaseElement>', but here has type 'DetailedHTMLProps<BaseHTMLAttributes<HTMLBaseElement>, HTMLBaseElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3430,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'bdi' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3431,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'bdo' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3432,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'big' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3433,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'blockquote' must be of type 'DetailedHTMLProps<BlockquoteHTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<BlockquoteHTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3434,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'body' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLBodyElement>, HTMLBodyElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLBodyElement>, HTMLBodyElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3435,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'br' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLBRElement>, HTMLBRElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLBRElement>, HTMLBRElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3436,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'button' must be of type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>', but here has type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3437,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'canvas' must be of type 'DetailedHTMLProps<CanvasHTMLAttributes<HTMLCanvasElement>, HTMLCanvasElement>', but here has type 'DetailedHTMLProps<CanvasHTMLAttributes<HTMLCanvasElement>, HTMLCanvasElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3438,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'caption' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3439,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'cite' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3440,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'code' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3441,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'col' must be of type 'DetailedHTMLProps<ColHTMLAttributes<HTMLTableColElement>, HTMLTableColElement>', but here has type 'DetailedHTMLProps<ColHTMLAttributes<HTMLTableColElement>, HTMLTableColElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3442,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'colgroup' must be of type 'DetailedHTMLProps<ColgroupHTMLAttributes<HTMLTableColElement>, HTMLTableColElement>', but here has type 'DetailedHTMLProps<ColgroupHTMLAttributes<HTMLTableColElement>, HTMLTableColElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3443,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'data' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3444,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'datalist' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLDataListElement>, HTMLDataListElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLDataListElement>, HTMLDataListElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3445,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'dd' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3446,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'del' must be of type 'DetailedHTMLProps<DelHTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<DelHTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3447,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'details' must be of type 'DetailedHTMLProps<DetailsHTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<DetailsHTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3448,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'dfn' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3449,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'dialog' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3450,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'div' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3451,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'dl' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLDListElement>, HTMLDListElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLDListElement>, HTMLDListElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3452,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'dt' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3453,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'em' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3454,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'embed' must be of type 'DetailedHTMLProps<EmbedHTMLAttributes<HTMLEmbedElement>, HTMLEmbedElement>', but here has type 'DetailedHTMLProps<EmbedHTMLAttributes<HTMLEmbedElement>, HTMLEmbedElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3455,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'fieldset' must be of type 'DetailedHTMLProps<FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>', but here has type 'DetailedHTMLProps<FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3456,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'figcaption' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3457,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'figure' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3458,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'footer' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3459,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'form' must be of type 'DetailedHTMLProps<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>', but here has type 'DetailedHTMLProps<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3460,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'h1' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3461,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'h2' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3462,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'h3' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3463,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'h4' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3464,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'h5' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3465,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'h6' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3466,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'head' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLHeadElement>, HTMLHeadElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLHeadElement>, HTMLHeadElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3467,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'header' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3468,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'hgroup' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3469,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'hr' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLHRElement>, HTMLHRElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLHRElement>, HTMLHRElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3470,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'html' must be of type 'DetailedHTMLProps<HtmlHTMLAttributes<HTMLHtmlElement>, HTMLHtmlElement>', but here has type 'DetailedHTMLProps<HtmlHTMLAttributes<HTMLHtmlElement>, HTMLHtmlElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3471,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'i' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3472,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'iframe' must be of type 'DetailedHTMLProps<IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement>', but here has type 'DetailedHTMLProps<IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3473,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'img' must be of type 'DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>', but here has type 'DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3474,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'input' must be of type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>', but here has type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3475,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'ins' must be of type 'DetailedHTMLProps<InsHTMLAttributes<HTMLModElement>, HTMLModElement>', but here has type 'DetailedHTMLProps<InsHTMLAttributes<HTMLModElement>, HTMLModElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3476,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'kbd' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3477,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'keygen' must be of type 'DetailedHTMLProps<KeygenHTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<KeygenHTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3478,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'label' must be of type 'DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>', but here has type 'DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3479,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'legend' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3480,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'li' must be of type 'DetailedHTMLProps<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>', but here has type 'DetailedHTMLProps<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3481,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'link' must be of type 'DetailedHTMLProps<LinkHTMLAttributes<HTMLLinkElement>, HTMLLinkElement>', but here has type 'DetailedHTMLProps<LinkHTMLAttributes<HTMLLinkElement>, HTMLLinkElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3482,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'main' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3483,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'map' must be of type 'DetailedHTMLProps<MapHTMLAttributes<HTMLMapElement>, HTMLMapElement>', but here has type 'DetailedHTMLProps<MapHTMLAttributes<HTMLMapElement>, HTMLMapElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3484,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'mark' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3485,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'menu' must be of type 'DetailedHTMLProps<MenuHTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<MenuHTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3486,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'menuitem' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3487,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'meta' must be of type 'DetailedHTMLProps<MetaHTMLAttributes<HTMLMetaElement>, HTMLMetaElement>', but here has type 'DetailedHTMLProps<MetaHTMLAttributes<HTMLMetaElement>, HTMLMetaElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3488,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'meter' must be of type 'DetailedHTMLProps<MeterHTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<MeterHTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3489,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'nav' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3490,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'noindex' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3491,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'noscript' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3492,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'object' must be of type 'DetailedHTMLProps<ObjectHTMLAttributes<HTMLObjectElement>, HTMLObjectElement>', but here has type 'DetailedHTMLProps<ObjectHTMLAttributes<HTMLObjectElement>, HTMLObjectElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3493,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'ol' must be of type 'DetailedHTMLProps<OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>', but here has type 'DetailedHTMLProps<OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3494,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'optgroup' must be of type 'DetailedHTMLProps<OptgroupHTMLAttributes<HTMLOptGroupElement>, HTMLOptGroupElement>', but here has type 'DetailedHTMLProps<OptgroupHTMLAttributes<HTMLOptGroupElement>, HTMLOptGroupElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3495,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'option' must be of type 'DetailedHTMLProps<OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>', but here has type 'DetailedHTMLProps<OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3496,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'output' must be of type 'DetailedHTMLProps<OutputHTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<OutputHTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3497,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'p' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3498,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'param' must be of type 'DetailedHTMLProps<ParamHTMLAttributes<HTMLParamElement>, HTMLParamElement>', but here has type 'DetailedHTMLProps<ParamHTMLAttributes<HTMLParamElement>, HTMLParamElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3499,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'picture' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3500,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'pre' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLPreElement>, HTMLPreElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLPreElement>, HTMLPreElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3501,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'progress' must be of type 'DetailedHTMLProps<ProgressHTMLAttributes<HTMLProgressElement>, HTMLProgressElement>', but here has type 'DetailedHTMLProps<ProgressHTMLAttributes<HTMLProgressElement>, HTMLProgressElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3502,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'q' must be of type 'DetailedHTMLProps<QuoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement>', but here has type 'DetailedHTMLProps<QuoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3503,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'rp' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3504,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'rt' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3505,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'ruby' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3506,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 's' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3507,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'samp' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3508,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'script' must be of type 'DetailedHTMLProps<ScriptHTMLAttributes<HTMLScriptElement>, HTMLScriptElement>', but here has type 'DetailedHTMLProps<ScriptHTMLAttributes<HTMLScriptElement>, HTMLScriptElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3509,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'section' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3510,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'select' must be of type 'DetailedHTMLProps<SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>', but here has type 'DetailedHTMLProps<SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3511,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'small' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3512,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'source' must be of type 'DetailedHTMLProps<SourceHTMLAttributes<HTMLSourceElement>, HTMLSourceElement>', but here has type 'DetailedHTMLProps<SourceHTMLAttributes<HTMLSourceElement>, HTMLSourceElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3513,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'span' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3514,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'strong' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3515,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'style' must be of type 'DetailedHTMLProps<StyleHTMLAttributes<HTMLStyleElement>, HTMLStyleElement>', but here has type 'DetailedHTMLProps<StyleHTMLAttributes<HTMLStyleElement>, HTMLStyleElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3516,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'sub' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3517,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'summary' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3518,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'sup' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3519,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'table' must be of type 'DetailedHTMLProps<TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>', but here has type 'DetailedHTMLProps<TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3520,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'tbody' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3521,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'td' must be of type 'DetailedHTMLProps<TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>', but here has type 'DetailedHTMLProps<TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3522,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'textarea' must be of type 'DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>', but here has type 'DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3523,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'tfoot' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3524,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'th' must be of type 'DetailedHTMLProps<ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>', but here has type 'DetailedHTMLProps<ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3525,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'thead' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3526,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'time' must be of type 'DetailedHTMLProps<TimeHTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<TimeHTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3527,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'title' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLTitleElement>, HTMLTitleElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLTitleElement>, HTMLTitleElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3528,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'tr' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3529,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'track' must be of type 'DetailedHTMLProps<TrackHTMLAttributes<HTMLTrackElement>, HTMLTrackElement>', but here has type 'DetailedHTMLProps<TrackHTMLAttributes<HTMLTrackElement>, HTMLTrackElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3530,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'u' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3531,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'ul' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3532,13): error TS2403: Subsequent variable declarations must have the same type.  Variable '"var"' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3533,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'video' must be of type 'DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>', but here has type 'DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3534,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'wbr' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3537,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'svg' must be of type 'SVGProps<SVGSVGElement>', but here has type 'SVGProps<SVGSVGElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3539,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'animate' must be of type 'SVGProps<SVGElement>', but here has type 'SVGProps<SVGElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3540,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'animateTransform' must be of type 'SVGProps<SVGElement>', but here has type 'SVGProps<SVGElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3541,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'circle' must be of type 'SVGProps<SVGCircleElement>', but here has type 'SVGProps<SVGCircleElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3542,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'clipPath' must be of type 'SVGProps<SVGClipPathElement>', but here has type 'SVGProps<SVGClipPathElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3543,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'defs' must be of type 'SVGProps<SVGDefsElement>', but here has type 'SVGProps<SVGDefsElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3544,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'desc' must be of type 'SVGProps<SVGDescElement>', but here has type 'SVGProps<SVGDescElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3545,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'ellipse' must be of type 'SVGProps<SVGEllipseElement>', but here has type 'SVGProps<SVGEllipseElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3546,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'feBlend' must be of type 'SVGProps<SVGFEBlendElement>', but here has type 'SVGProps<SVGFEBlendElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3547,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'feColorMatrix' must be of type 'SVGProps<SVGFEColorMatrixElement>', but here has type 'SVGProps<SVGFEColorMatrixElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3548,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'feComponentTransfer' must be of type 'SVGProps<SVGFEComponentTransferElement>', but here has type 'SVGProps<SVGFEComponentTransferElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3549,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'feComposite' must be of type 'SVGProps<SVGFECompositeElement>', but here has type 'SVGProps<SVGFECompositeElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3550,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'feConvolveMatrix' must be of type 'SVGProps<SVGFEConvolveMatrixElement>', but here has type 'SVGProps<SVGFEConvolveMatrixElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3551,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'feDiffuseLighting' must be of type 'SVGProps<SVGFEDiffuseLightingElement>', but here has type 'SVGProps<SVGFEDiffuseLightingElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3552,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'feDisplacementMap' must be of type 'SVGProps<SVGFEDisplacementMapElement>', but here has type 'SVGProps<SVGFEDisplacementMapElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3553,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'feDistantLight' must be of type 'SVGProps<SVGFEDistantLightElement>', but here has type 'SVGProps<SVGFEDistantLightElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3554,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'feFlood' must be of type 'SVGProps<SVGFEFloodElement>', but here has type 'SVGProps<SVGFEFloodElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3555,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'feFuncA' must be of type 'SVGProps<SVGFEFuncAElement>', but here has type 'SVGProps<SVGFEFuncAElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3556,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'feFuncB' must be of type 'SVGProps<SVGFEFuncBElement>', but here has type 'SVGProps<SVGFEFuncBElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3557,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'feFuncG' must be of type 'SVGProps<SVGFEFuncGElement>', but here has type 'SVGProps<SVGFEFuncGElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3558,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'feFuncR' must be of type 'SVGProps<SVGFEFuncRElement>', but here has type 'SVGProps<SVGFEFuncRElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3559,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'feGaussianBlur' must be of type 'SVGProps<SVGFEGaussianBlurElement>', but here has type 'SVGProps<SVGFEGaussianBlurElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3560,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'feImage' must be of type 'SVGProps<SVGFEImageElement>', but here has type 'SVGProps<SVGFEImageElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3561,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'feMerge' must be of type 'SVGProps<SVGFEMergeElement>', but here has type 'SVGProps<SVGFEMergeElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3562,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'feMergeNode' must be of type 'SVGProps<SVGFEMergeNodeElement>', but here has type 'SVGProps<SVGFEMergeNodeElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3563,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'feMorphology' must be of type 'SVGProps<SVGFEMorphologyElement>', but here has type 'SVGProps<SVGFEMorphologyElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3564,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'feOffset' must be of type 'SVGProps<SVGFEOffsetElement>', but here has type 'SVGProps<SVGFEOffsetElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3565,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'fePointLight' must be of type 'SVGProps<SVGFEPointLightElement>', but here has type 'SVGProps<SVGFEPointLightElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3566,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'feSpecularLighting' must be of type 'SVGProps<SVGFESpecularLightingElement>', but here has type 'SVGProps<SVGFESpecularLightingElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3567,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'feSpotLight' must be of type 'SVGProps<SVGFESpotLightElement>', but here has type 'SVGProps<SVGFESpotLightElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3568,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'feTile' must be of type 'SVGProps<SVGFETileElement>', but here has type 'SVGProps<SVGFETileElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3569,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'feTurbulence' must be of type 'SVGProps<SVGFETurbulenceElement>', but here has type 'SVGProps<SVGFETurbulenceElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3570,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'filter' must be of type 'SVGProps<SVGFilterElement>', but here has type 'SVGProps<SVGFilterElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3571,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'foreignObject' must be of type 'SVGProps<SVGForeignObjectElement>', but here has type 'SVGProps<SVGForeignObjectElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3572,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'g' must be of type 'SVGProps<SVGGElement>', but here has type 'SVGProps<SVGGElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3573,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'image' must be of type 'SVGProps<SVGImageElement>', but here has type 'SVGProps<SVGImageElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3574,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'line' must be of type 'SVGProps<SVGLineElement>', but here has type 'SVGProps<SVGLineElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3575,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'linearGradient' must be of type 'SVGProps<SVGLinearGradientElement>', but here has type 'SVGProps<SVGLinearGradientElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3576,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'marker' must be of type 'SVGProps<SVGMarkerElement>', but here has type 'SVGProps<SVGMarkerElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3577,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'mask' must be of type 'SVGProps<SVGMaskElement>', but here has type 'SVGProps<SVGMaskElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3578,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'metadata' must be of type 'SVGProps<SVGMetadataElement>', but here has type 'SVGProps<SVGMetadataElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3579,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'path' must be of type 'SVGProps<SVGPathElement>', but here has type 'SVGProps<SVGPathElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3580,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'pattern' must be of type 'SVGProps<SVGPatternElement>', but here has type 'SVGProps<SVGPatternElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3581,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'polygon' must be of type 'SVGProps<SVGPolygonElement>', but here has type 'SVGProps<SVGPolygonElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3582,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'polyline' must be of type 'SVGProps<SVGPolylineElement>', but here has type 'SVGProps<SVGPolylineElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3583,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'radialGradient' must be of type 'SVGProps<SVGRadialGradientElement>', but here has type 'SVGProps<SVGRadialGradientElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3584,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'rect' must be of type 'SVGProps<SVGRectElement>', but here has type 'SVGProps<SVGRectElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3585,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'stop' must be of type 'SVGProps<SVGStopElement>', but here has type 'SVGProps<SVGStopElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3586,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'switch' must be of type 'SVGProps<SVGSwitchElement>', but here has type 'SVGProps<SVGSwitchElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3587,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'symbol' must be of type 'SVGProps<SVGSymbolElement>', but here has type 'SVGProps<SVGSymbolElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3588,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'text' must be of type 'SVGProps<SVGTextElement>', but here has type 'SVGProps<SVGTextElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3589,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'textPath' must be of type 'SVGProps<SVGTextPathElement>', but here has type 'SVGProps<SVGTextPathElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3590,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'tspan' must be of type 'SVGProps<SVGTSpanElement>', but here has type 'SVGProps<SVGTSpanElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3591,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'use' must be of type 'SVGProps<SVGUseElement>', but here has type 'SVGProps<SVGUseElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3592,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'view' must be of type 'SVGProps<SVGViewElement>', but here has type 'SVGProps<SVGViewElement>'.
node_modules/@types/react/index.d.ts(3520,19): error TS2320: Interface 'Element' cannot simultaneously extend types 'ReactElement<any>' and 'ReactElement<any>'.
  Named property 'type' of types 'ReactElement<any>' and 'ReactElement<any>' are not identical.
node_modules/@types/react/index.d.ts(3521,19): error TS2320: Interface 'ElementClass' cannot simultaneously extend types 'Component<any, {}>' and 'Component<any, {}>'.
  Named property 'props' of types 'Component<any, {}>' and 'Component<any, {}>' are not identical.
node_modules/@types/react/index.d.ts(3521,19): error TS2320: Interface 'ElementClass' cannot simultaneously extend types 'Component<any, {}>' and 'Component<any, {}>'.
  Named property 'refs' of types 'Component<any, {}>' and 'Component<any, {}>' are not identical.
node_modules/electron/electron.d.ts(5390,13): error TS2430: Interface 'WebviewTag' incorrectly extends interface 'HTMLElement'.
  Types of property 'addEventListener' are incompatible.
    Type '{ (event: "load-commit", listener: (event: LoadCommitEvent) => void, useCapture?: boolean | undef...' is not assignable to type '{ <K extends "error" | "waiting" | "progress" | "ended" | "change" | "input" | "select" | "abort"...'.
      Types of parameters 'listener' and 'listener' are incompatible.
        Type 'EventListenerOrEventListenerObject' is not assignable to type '(event: LoadCommitEvent) => void'.
          Type 'EventListenerObject' is not assignable to type '(event: LoadCommitEvent) => void'.
            Type 'EventListenerObject' provides no match for the signature '(event: LoadCommitEvent): void'.

Can logging be disabled?

Expected Behavior

Ideally it would not log steps to the console by default, or logging could be disabled. I see the IS_LOG value in the "flags" module, but it's defined as a const and I'm not sure how I can affect that value at run time in a way to prevent logging. Thanks!

Describe the problem

Actual Behavior

Currently the library prints messages to the console as it's executing, such as:
Checking to see if there is an authorization response to be delivered. (here)

Steps to reproduce the behavior

Invoking the library functions as demonstrated in the Electron sample application

Environment

  • AppAuth-JS version: 0.3.5
  • AppAuth-JS Environment (Node, Browser (UserAgent), ...): node 10.9

async/await vs event emitter

I wasn't sure if I should open another issue for this, but I have been experimenting with replacing the event emitter with promises..

https://github.com/stupiduglyfool/AppAuth-JS/tree/feature/asyncawait

I have temporarily removed extraneous code from the repo whilst I demo the idea..

When I build my application based on this it feels a lot more intuitive and easier to wire up.. async request/reply methods, rather than subscribing to events, then making a request..

example usage:

https://gist.github.com/stupiduglyfool/cfdadb7005ef548f79d91227ee00c89a#file-async-await-consumer-example

updated electron async/await handler:
https://gist.github.com/stupiduglyfool/42197f96f93584b5fdccdca7fc90f785#file-electron_request_handler-ts

What do you think?

What is the contact email for a responsible disclosure of a security issue?

I found a (low severity probably) small security issue, what is the best contact to do a responsible disclosure? (low or not, it's still an issue, so I rather not just issue a pull request / describe it here in public)

I tried contacting the official OpenID contact details, but didn't hear back yet.

Again, it's probably a low impact issue, affecting only old browsers, easy to reproduce and easy to fix, but still it's security related so I rather follow the protocol.

[Feature Request] React Native Compatibility

Hello, this is a new feature request!

I'm trying to get this library to work with React Native, and having a few issues.
I'd love to work with the team on improving this if allowed so they can keep focusing on other priorities.

After implementing barrels, I discovered a couple of issues caused by a (IMHO very silly) React Native behaviour: if it sees any require('...') call, it tries to load the module in this require. It doesn't matter whether this code is even inside if(false) or try { ... } catch { ...}.
Since most of these require()s call built in Node stuff, and React Native runtime is not Node, it fails.
See facebook/react-native#5079 for reference.

So, it sees stuff from node_support/ and crypto_utils.ts, and shows an error for loading them, even if I'm not using these.

Each of these 2 can have different ways to handle.

crypto_utils.ts

In crypto_utils.ts, the line that breaks it is let crypto = require('crypto');.
We can workaround the issue by doing something like:

const nodeRequire = require;
...
let crypto = nodeRequire('crypto');

This is sweet and easy, and if you approve, I'll create a quick PR for it.

node_support

The contents of node_support is meant to be for Node. We can use the same workaround as above, but it's not clean and quite silly actually.

If you approve, again, it might be a temporary solution.

Another temporary solution is to remove node_support from the main barrel. This way Node users will have to import from @openid/appauth/built/node_support (which has its own barrel), but having to import from built is quite silly.

The reason we have this issue is that TypeScript cannot have a base folder for looking for submodules except the package root - see microsoft/TypeScript#8305 (comment) as mentioned in #34 (comment)

we can solve the built issue by compiling in-place instead of having src and built folders. Or, when publishing the package, implement a workflow where we copy the package.json file to built folder and publishing from inside that folder.

I can have a spin at this workflow (publishing from built but I cannot test it as I don't have publish permissions. So, we either:

  • Move ts files to package root and compile in place
  • Change require calls in nnode_support for now
  • Remove nnode_support from the root barrel for now
  • If the team has capacity, implement the workflow that publishes from inside built

Happy to do pull request for any option you choose, or provide better clarification if this issue is a bit overwhelming.

What format of redirect_uri is possible to use

I have tried to use the sample electron app. In this sample is used for the redirect_uri following link: http://127.0.0.1:8000 - and after some workflow is showed the message: Close your browser to continue. I think - it isn't very good UX. :-)

Is it possible to use another type of processing of response then this approach with localhost - some approch with automatic closing of browser?

I have seen some redirect_uri which looks like this: com.mycompany.nativeapp://cb - where broswer is probable open inside of native app - is it possible to achieve this behaviour in this library?

Thanks for clarification!

Drop TextEncoder requirement

The need for TextEncoder is limited and it is not supported (without expensive polyfills) on IE or Edge.

It is easily replaced as follows:

// modified from source: http://stackoverflow.com/a/11058858
export function str2ab(str: string) {
  const buf = new ArrayBuffer(str.length);
  const bufView = new Uint8Array(buf);
  for (let i = 0; i < str.length; i++) {
    bufView[i] = str.charCodeAt(i);
  }
  return buf;
}

crypto.subtle.digest('SHA-256', str2ab(code))

Package Managers

Any plans to release this to the various package managers (npm, etc)? I'm building a mobile (Android/iOS) Cordova app using Angular2, and would love to use this as the oid-client-js library doesn't play nicely with Cordova/Angular2 on a mobile device due to its reliance on a redirect URL, which obviously doesn't play nicely with single page applications. However the thought of manually having to update this package whenever you guys make an update is daunting.

Is it possible to use this app for Web Application?

I am using react SPA. Will it possible to use auth code flow in the web application?

All the documentation mentioned like this library is for Native applications.

Will it possible to use this app in Web App (Browser based application).

Drop JQuery requirement for Web Apps

I'm using this library in an SPA for connecting with an OIDC provider using the Authorization code flow with PKCE. It works flawlessly but it assumes that jQuery has being loaded in the browser failing otherwise.

Looking at the code, I think that JQuery is being used just for sending AJAX requests. I really want to avoid JQuery as it's a huge library and we are not using it for anything else. Probably, the JQuery AJAX calls could be replaced by just XMLHttpRequest calls.

WDYT? I could start a PR.

Electron sample

Hi,

Do you have an example on how to use this with Electron?
I'm willing to contribute this sample if you give me some pointers.

I need to know how to set the redirect uri, so that the oauth provider correctly redirects back to electron.

Uncaught error is thrown when port for notifier server is already in use

Uncaught error is thrown when port for notifier server is already in use

Expected Behavior

The error EADDRINUSE should be caught and handled. Idealy the error would be bubbled up to the app if it can't be handled (see #94).

There are two cases this error might occur:

1.) appauth by itself already started a server on the given port (see #89)
Eventually an already created server could be closed and a new one created (this might interrupt a previously startet auth flow).
Another solution could be to change the server so it could handle mutliple auth flows.
Alternatively bubble up the error to the app, so the app can handle it.

2.) another process is already listening on the given port
Bubble up the error to the app, so it can react accordingly.

Describe the problem

Actual Behavior

The error is not caught, and may only be caught with process.on('UncaughtException', (err) => {})

Steps to reproduce the behavior

1.) Start the example electron app (see googlesamples/appauth-js-electron-sample/pull/3 with update to appauth v1.1.1)
2.) Click "Sign in"
3.) Go back to the app without completing consent screen
4.) Click "Sign in" again

Results in

Uncaught Error: listen EADDRINUSE :::8000

Environment

  • AppAuth-JS version: 1.1.1 (similar issue already in previous versions)
  • AppAuth-JS Environment: Node/Electron

Feature Request: Support OpenID Connect Token Validation

AppAuth for iOS recently added support for OpenID Connect ID Token validation (but not signature verification, electing to use the option allowed in the specification for not verifying signatures of ID Tokens received over TLS from the token endpoint).

This feature was added in two stages:
1/ Add support for 'nonce' on the authorization request
2/ Parse the ID Token (if any) and validate the fields according to OpenID Connect Core Section 3.1.3.7 (excluding rules #1, #4, #5, #7, #8, #12, and #13 which did not apply).

With this feature in place, we were also then able to implement the OpenID Connect RP Certification test suite, which is now part of our test suite that runs on CI.

Reference error: $ is not defined when running npm start without compiling from TypeScript

Expected Behavior

On a project not using TypeScript to compile dependencies, the following line should successfully import into AuthorizationServiceConfiguration:
const { AuthorizationServiceConfiguration } = require("@openid/appauth/built/authorization_service_configuration");

Actual behavior

Running npm start throws an error if the mentioned line is present.

Uncaught Exception:
ReferenceError: $ is not defined
    at JQueryRequestor.xhr (.../node_modules/@openid/appauth/built/xhr.js:47:19)

Note that I required the npm package by doing: npm install --save @openid/AppAuth-JS, not by cloning the repo, as I wanted to add the package to an existing application.

My knowledge of TypeScript is practically null, but I would expect that on a JS only electron project, the JS dependency could be imported by using require.
It seems that the libraries under the built/ folder still reference the $ symbol on @types/jquery which are expected to be available globally, but only become so after compiling via tsc first.

Improved error handling for NodeBasedHandler

Expected Behavior

It would be usefull, if ON_UNABLE_TO_START errors would be bubbled up to the app, so it can react accordingly.
Ideally, NodeBasedHandler.performAuthorizationRequest would return a promise, which is resolved as soon as the server is started and the consent screen has been opened.

Also it would be usefull if the errors would be of class AppAuthError, with a unique code.

Describe the problem

Actual Behavior

Errors during notifier server startup are only logged and can't be caught in a clean way.

Steps to reproduce the behavior

.then(() => {
server = Http.createServer(requestHandler);
server.listen(this.httpServerPort);
const url = this.buildRequestUrl(configuration, request);
log('Making a request to ', request, url);
opener(url);
})
.catch((error) => {
log('Something bad happened ', error);
emitter.emit(ServerEventsEmitter.ON_UNABLE_TO_START);
});

1.) Add a line throw new Error('Some error occured'); above server = Http.createServer(requestHandler);
2.) Start the example electron app (see googlesamples/appauth-js-electron-sample/pull/3 with update to appauth v1.1.1)
3.) Click "Sign in"

Results in:

Uncaught (in promise) Unable to create HTTP server at port 8000

Environment

  • AppAuth-JS version: 1.1.1
  • AppAuth-JS Environment : Node/Electron

NodeBasedHandler alternatives

I see that NodeBasedHandler starts a local server, in order to monitor redirects and retrieve the access token.

I've noticed alternative strategies for Electron which do not require a local http server:
http://manos.im/blog/electron-oauth-with-github/

This captures the navigation events to retreive the token instead. Does it sound like a sensible idea for a ElectronBasedHandler? I wonder if there are any pitfalls I am not considering?

Tests fail with TypeError on Chrome 62 / Mac OS High Sierra

I've installed Running npm test on the current unmodifed master branch commit fails on my system with this message:

> @openid/[email protected] pretest /Users/juri.wiens/code/forks/AppAuth-JS
> npm run-script compile


> @openid/[email protected] precompile /Users/juri.wiens/code/forks/AppAuth-JS
> npm run-script clean && npm run-script format


> @openid/[email protected] clean /Users/juri.wiens/code/forks/AppAuth-JS
> rm -rf built


> @openid/[email protected] format /Users/juri.wiens/code/forks/AppAuth-JS
> clang-format -i -style=file --glob=src/**.ts



ran clang-format on 28 files

> @openid/[email protected] compile /Users/juri.wiens/code/forks/AppAuth-JS
> tsc


> @openid/[email protected] test /Users/juri.wiens/code/forks/AppAuth-JS
> karma start karma.conf --browsers=Chrome --single-run=false --debug

14 11 2017 09:05:51.896:INFO [framework.browserify]: registering rebuild (autoWatch=true)
14 11 2017 09:05:56.268:INFO [framework.browserify]: 8251981 bytes written (3.61 seconds)
14 11 2017 09:05:56.380:INFO [framework.browserify]: bundle built
14 11 2017 09:05:56.418:WARN [karma]: No captured browser, open http://localhost:9876/
14 11 2017 09:05:56.422:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
14 11 2017 09:05:56.423:INFO [launcher]: Launching browser Chrome with unlimited concurrency
14 11 2017 09:05:56.428:INFO [launcher]: Starting browser Chrome
14 11 2017 09:05:57.449:INFO [Chrome 62.0.3202 (Mac OS X 10.13.1)]: Connected on socket KdzoyPcgH4y0Gx6lAAAA with id 9692561
Chrome 62.0.3202 (Mac OS X 10.13.1) ERROR
  Uncaught TypeError: Class extends value undefined is not a constructor or null
  at /var/folders/bt/l6qbmy414p911hf26bz1jxb00000gp/T/node_modules/shot/lib/response.js:14:0 <- /var/folders/bt/l6qbmy414p911hf26bz1jxb00000gp/T/312a06091e8b2b36a6b0d7b7b2625648.browserify:85524

My system:

  • node v9.1.0
  • npm 5.5.1
  • Mac OS X 10.13.1

Angular Compatibility

Expected Behavior

[REQUIRED] Describe expected behavior

I would like to be able to use this app in and Angular 7 app wrapped in Electron.

Describe the problem

[REQUIRED] Actual Behavior

This will work in an angular app if i skipLibCheck and bring in jquery from a cdn... I try this same approach in an Electron app that has an Angular 7 app in it and it seems to not be able to pick up the jquery that is brought in.

First... as per #22 (comment) I should not have to do a skipLibCheck because there was supposed to be a merge that moved @types/jQuery too dependencies which should have fixed the issue.. but that doesn't seem to be the case for me.

Once I build the app and run it there is no more errors until I try to I try to use any classes I start getting errors like: JQueryRequestor.push../node_modules/@openid/appauth/built/xhr.js.JQueryRequestor.xhr

[REQUIRED] Steps to reproduce the behavior

1.npm install @openid/appauth-js
2. Use a cdn to bring in jquery
3. set skipLibCheck true
4.Build run app.
5. Try setting up requestor.
6. $ not defined.

[REQUIRED] Environment

  • AppAuth-JS version: 1.2.0
  • AppAuth-JS Environment (Node, Browser (UserAgent), ...): Electron/Angular 7
  • Source code snippts (inline or JSBin)

Question to confirm I'm using the preferred desktop login option

Nice library guys - my company provides some desktop apps for investment banks. I was hoping you could confirm that I am following the recommended direction below.

LOGINS SHOULD NOT USE WEB VIEWS
This seemed to be the standard technique a few years ago, using callback URLs such as urn:ietf:wg:oauth:2.0:oob, but this is no longer considered to be good security. Also, Single Sign On and Password Autofill won't work on a web view.

LOGINS SHOULD USE THE SYSTEM BROWSER
This Auth0 Link summarizes the issue - logins must use the desktop browser to be considered good security.

OPTIONS
The OAuth Standards for Native Apps mentions 3 redirect options:

  • Private URI Scheme
  • Claimed HTTPS Scheme
  • Loopback Interface

OPTION 1 - Private URI Scheme (com.mycompany.com:/mydesktopapp)

  • Works for Mobile apps
  • Works for desktop apps with special OS support, such as Windows Universal apps

I could not use this scheme for my Electron app - the System browser will refuse to redirect to a URL of this form.

OPTION 2 - Claimed HTTPS Scheme (https:/mycompany.com/myapp)

I think this also requires special operating system support - I cannot use it for my Electron app.

OPTION 3 - Loopback Interface (http://127.0.0.1:8000)
The AppAuth Electron sample uses this option:

  • The end user PC needs to run a simple (low privilege) web server
  • It works for a Desktop App, without special OS support

It looks like the only good option for desktop logins.

PLANNING DEPLOYMENT
We need to tell IT staff at investment banks to not block the local web server.
If we ever ran into an IT department who refused to allow it, the only backup option we could offer would be to login on a web view.

full implicit flow support?

@tikurahul I know you have mentioned this in #8 (comment) but implicit auth would still be cool feature. For SPA implicit auth is required and support for it is basically already there, we only need make sure that the correct data is returned here: https://github.com/openid/AppAuth-JS/blob/master/src/redirect_based_handler.ts#L102 if 'token' (instead code) was requested.

what I do now in my spa as a workaround:

const {AuthorizationServiceConfiguration} = require('@openid/appauth/built/authorization_service_configuration.js');
const {AuthorizationRequest} = require('@openid/appauth/built/authorization_request.js');
const {AuthorizationNotifier} = require('@openid/appauth/built/authorization_request_handler.js');
const {RedirectRequestHandler} = require('@openid/appauth/built/redirect_based_handler.js');

var login = {
  init: function() {
    this.notifier = new AuthorizationNotifier();
    this.handler = new RedirectRequestHandler();

    this.notifier.setAuthorizationListener(function (request, response, error) {
      var hash = login.parseAuthorizationResponse();
      if (response && hash.access_token) {
        //do something usefull here with hash.access_token...
      } else {
        //error
      }
       
      //destroy hash
      window.location.hash = '';
    });
    
    this.handler.setAuthorizationNotifier(this.notifier);
    this.handler.completeAuthorizationRequestIfPossible();
  },

  initOidcAuth: function(idp) {  
    AuthorizationServiceConfiguration.fetchFromIssuer(idp.providerUrl).then(configuration => {
      var request = new AuthorizationRequest(
        idp.clientId, idp.redirectUri, idp.scope, 'id_token token', undefined, {'nonce': Math.random().toString(36).slice(2)});
  
      login.handler.performAuthorizationRequest(configuration, request);
    });
  },

  parseAuthorizationResponse: function() {
    var hash = window.location.hash.substr(1);
    var obj = {};
    var pairs = hash.split('&');
    
    for(let i in pairs){
      let split = pairs[i].split('=');
      obj[decodeURIComponent(split[0])] = decodeURIComponent(split[1]);
    }

    return obj;
  }
}

Allow request handler to stop listening for a response

Expected Behavior

It would be useful if there was a method on the NodeBasedHandler to stop waiting for a response / close the server if the auth redirect flow is interrupted or cancellation request is issued

Describe the problem

If a user interrupts the auth redirect flow (closing the browser or navigating away, for example) then the authorization request never completes and the server remains waiting for a response.

Actual Behavior

There is no way to close the server

Steps to reproduce the behavior

Initiate the auth redirect, then close the browser without completing the process.

Environment

  • AppAuth-JS version: 0.3.5
  • AppAuth-JS Environment (Node, Browser (UserAgent), ...): Node

[QUESTION] Can we remove the dependencies on hapi, jquery, etc?

I've noticed the package.json pulls in libraries that support the nodejs sample app but these dependencies leak into the npm package whether someone is using the library in a situation requiring them or not.

In addition, the xhr.ts file's Requestor class creates a dependency on some JQuery types; JQueryAjaxSettings and $.ajax. I intend to eventually use the library in Angular 5/Ionic 3 so was hoping to not require a JQuery dependency.

Is it possible the JQueryRequestor is not used as a fallback Requestor, at least not in the core code? I'd prefer an error that a Requestor has not been specified rather than couple to a default if possible.

URL format support for auth code response

Expected Behavior

When extending the library for PKCE flow, it should extract auth code from the URL.

[REQUIRED] Describe expected behavior

Implicit flow: localhost:8080/app#id_token=.....
PKCE flow: localhost:8080/app?code=.....

In both flows based on the PKCE or implicit, it should extract URL param fields.

Describe the problem

This library works with implicit flow. But when I extend this library for PKCE, auth code from the URL was not extracted because of the limitation in URL param extraction by # marker only but not by ? query param.

I created PR #69 fixing the issue. And this is open for discussion and I will fix any code review changes.

[REQUIRED] Actual Behavior

Implicit flow works but not auth code PKCE.

[REQUIRED] Steps to reproduce the behavior

Either change the authorizationRequest to response type to "id_token"

let request = new AuthorizationRequest(
clientId,
redirectUri,
scope,
"id_token",
undefined, /* state */
{'prompt': 'consent', 'access_type': 'offline', 'nonce': '1234'});

Or change
let request = new AuthorizationRequest(
clientId,
redirectUri,
scope,
"code",
undefined, /* state */
{'prompt': 'consent', 'access_type': 'offline'});

in RedirectRequestHandler
queryParams = this.utils.parse(this.locationLike, false /* use ? */);

[REQUIRED] Environment

  • AppAuth-JS version: N/A
  • AppAuth-JS Environment (Node, Browser (UserAgent), ...): N/A
  • Source code snippts (inline or JSBin)

Angular ionic sample

Hi,
Do you have an example of how i can use this in a mobile android app for Ionic

VueJS SPA. Question about the authorization listener.

Expected Behaviour

The authorization_code should be intercepted by the AuthorizationNotifier.

Describe the problem

I am trying to implement an authorization_code flow within a web SPA, with vue.

When I load the app, I start the whole process of login and consent, I am then redirected back to the app.
However, the authorization_code is in the URL, like this:

http://localhost:8080/dashboard?code=u4XrDgPK8ANvn...PJYqC7v0&scope=admin&state=GAomHd00kF

From the examples, I understand that the response should be intercepted by AppAuth, but I am actually leaving the app to a external login page, I cannot expect that behaviour to work, as far as I know, I am actually starting the whole auth process again when I'm redirected back to the app.

My question is, how Is the notifier supposed to work, when I'm reloading the page?

I cannot wrap my head around this, I'm sure I'm missing something obvious.

Environment

  • AppAuth-JS version: 1.2.0
  • AppAuth-JS Environment (Node, Browser (UserAgent), ...): Browser
  • Source code snippts (inline or JSBin)
    The code I used is almost the same as in the examples.
constructor() {
        this.notifier = new AuthorizationNotifier();
        this.authorizationHandler = new RedirectRequestHandler();

        this.notifier.setAuthorizationListener((request, response, error) => {
        // I am never reaching this step
            if (response) {
                this.code = response.code;
            }
        });

        this.authorizationHandler.setAuthorizationNotifier(this.notifier);
    }

    startAuthorizationFlow(authConfig) {
        this._fetchServiceConfiguration(authConfig.openIdProvider).then(() => {
            this._makeAuthorizationRequest(authConfig.clientConfig);
        });
    }

    _fetchServiceConfiguration(openIdProvider)
    {
      return AuthorizationServiceConfiguration.fetchFromIssuer(openIdProvider)
        .then(response => {
            this.configuration = response;
        })
    }

    _makeAuthorizationRequest(clientConfig)
    {
        let request = new AuthorizationRequest({
            client_id: clientConfig.clientId,
            redirect_uri: clientConfig.redirectUri,
            response_type: AuthorizationRequest.RESPONSE_TYPE_CODE,
            state: undefined,
            scope: '',
            extras: {
                'prompt': 'consent',
                'access_type': 'offline'
            }
        });

        this.authorizationHandler.performAuthorizationRequest(this.configuration, request);
    }

Require a redirect flow for end_session endpoint handling

I've forked here and added support for the end_session endpoint similar to the existing authorize endpoint. It's working for my purposes.

Rather than submit a pull request, and in the spirit of the contributing guidelines, I thought I'd best ask if this is the direction you want to go?

Module parse failed: Unexpected character '#' (1:0) with Create React App

I was able to successfully modify the appauth-js-electron-sample app to log in with my identity provider. Now I'm trying to integrate it into a React + Electron app I created with Create React App. After adding this library and code, I get a strange error when I run npm run build, which runs react-scripts build.

> [email protected] build /Users/mraible/foo
> react-scripts build

Creating an optimized production build...
Failed to compile.

./node_modules/opener/opener.js
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| #!/usr/bin/env node
|
| "use strict";


error Command failed with exit code 1.

Expected Behavior

My React project still builds just like the example app does.

Describe the problem

Once I add the following AuthService.js to src directory and reference it in another class, the error starts happening. This class is very similar to the sample's flow.ts, except that it's written in JavaScript and supports PKCE.

/*
 * Copyright 2017 Google Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */

import { AuthorizationRequest } from '@openid/appauth/built/authorization_request';
import { AuthorizationNotifier } from '@openid/appauth/built/authorization_request_handler';
import { AuthorizationServiceConfiguration } from '@openid/appauth/built/authorization_service_configuration';
import { NodeBasedHandler } from '@openid/appauth/built/node_support/node_request_handler';
import { NodeRequestor } from '@openid/appauth/built/node_support/node_requestor';
import {
  GRANT_TYPE_AUTHORIZATION_CODE,
  GRANT_TYPE_REFRESH_TOKEN,
  TokenRequest
} from '@openid/appauth/built/token_request';
import { BaseTokenRequestHandler } from '@openid/appauth/built/token_request_handler';

import { EventEmitter } from 'events';

export class AuthStateEmitter extends EventEmitter {
  static ON_TOKEN_RESPONSE = 'on_token_response';
}

/* the Node.js based HTTP client. */
const requestor = new NodeRequestor();

/* an example open id connect provider */
const openIdConnectUrl = 'https://dev-669532.oktapreview.com/oauth2/default';

/* example client configuration */
const clientId = '0oafavni96j2yJNvQ0h7';
const redirectUri = 'http://127.0.0.1:8000';
const scope = 'openid profile offline_access';

export default class AuthService {
  notifier;
  authorizationHandler;
  tokenHandler;
  authStateEmitter;
  challengePair;

  // state
  configuration;
  refreshToken;
  accessTokenResponse;

  constructor() {
    this.notifier = new AuthorizationNotifier();
    this.authStateEmitter = new AuthStateEmitter();
    this.authorizationHandler = new NodeBasedHandler();
    this.tokenHandler = new BaseTokenRequestHandler(requestor);
    // set notifier to deliver responses
    this.authorizationHandler.setAuthorizationNotifier(this.notifier);
    // set a listener to listen for authorization responses
    // make refresh and access token requests.
    this.notifier.setAuthorizationListener((request, response, error) => {
      console.log('Authorization request complete ', request, response, error);
      if (response) {
        this.makeRefreshTokenRequest(response.code)
            .then(result => this.performWithFreshTokens())
            .then(() => {
              this.authStateEmitter.emit(AuthStateEmitter.ON_TOKEN_RESPONSE);
              console.log('All Done.');
            })
      }
    });
  }

  fetchServiceConfiguration() {
    return AuthorizationServiceConfiguration
        .fetchFromIssuer(openIdConnectUrl, requestor)
        .then(response => {
          console.log('Fetched service configuration', response);
          this.configuration = response;
        });
  }

  makeAuthorizationRequest(username) {
    if (!this.configuration) {
      console.log('Unknown service configuration');
      return;
    }

    const extras = {'prompt': 'consent', 'access_type': 'offline'};
    if (username) {
      extras['login_hint'] = username;
    }

    this.challengePair = AuthService.getPKCEChallengePair();

    // PKCE
    extras['code_challenge'] = this.challengePair.challenge;
    extras['code_challenge_method'] = 'S256';

    // create a request
    const request = new AuthorizationRequest(
        clientId, redirectUri, scope, AuthorizationRequest.RESPONSE_TYPE_CODE,
        undefined /* state */, extras);

    console.log('Making authorization request ', this.configuration, request);

    this.authorizationHandler.performAuthorizationRequest(
        this.configuration, request);
  }

  makeRefreshTokenRequest(code) {
    if (!this.configuration) {
      console.log('Unknown service configuration');
      return Promise.resolve();
    }

    let tokenRequestExtras = { code_verifier: this.challengePair.verifier };

    // use the code to make the token request.
    let request = new TokenRequest(
        clientId, redirectUri, GRANT_TYPE_AUTHORIZATION_CODE, code, undefined, tokenRequestExtras);

    return this.tokenHandler.performTokenRequest(this.configuration, request)
        .then(response => {
          console.log(`Refresh Token is ${response.refreshToken}`);
          this.refreshToken = response.refreshToken;
          this.accessTokenResponse = response;
          return response;
        })
        .then(() => {});
  }

  loggedIn() {
    return !!this.accessTokenResponse && this.accessTokenResponse.isValid();
  }

  signOut() {
    // forget all cached token state
    this.accessTokenResponse = null;
  }

  performWithFreshTokens() {
    if (!this.configuration) {
      console.log('Unknown service configuration');
      return Promise.reject('Unknown service configuration');
    }
    if (!this.refreshToken) {
      console.log('Missing refreshToken.');
      return Promise.resolve('Missing refreshToken.');
    }
    if (this.accessTokenResponse && this.accessTokenResponse.isValid()) {
      // do nothing
      return Promise.resolve(this.accessTokenResponse.accessToken);
    }
    let request = new TokenRequest(
        clientId, redirectUri, GRANT_TYPE_REFRESH_TOKEN, undefined,
        this.refreshToken);
    return this.tokenHandler.performTokenRequest(this.configuration, request)
        .then(response => {
          this.accessTokenResponse = response;
          return response.accessToken;
        });
  }

  static getPKCEChallengePair() {
    let verifier = AuthService.base64URLEncode(crypto.randomBytes(32));
    let challenge = AuthService.base64URLEncode(AuthService.sha256(verifier));
    return {verifier, challenge};
  }

  static base64URLEncode(str) {
    return str.toString('base64')
      .replace(/\+/g, '-')
      .replace(/\//g, '_')
      .replace(/=/g, '');
  }

  static sha256(buffer) {
    return crypto.createHash('sha256').update(buffer).digest();
  }
}

[REQUIRED] Actual Behavior

Compile error.

[REQUIRED] Steps to reproduce the behavior

I created a GitHub repo to show this issue: https://github.com/mraible/appauth-react-electron.

Steps to reproduce:

  1. git clone https://github.com/mraible/appauth-react-electron.git
  2. npm i && npm run build
  3. See the error in your console
  4. Modify src/Login.js to remove all references to AuthService
  5. Run npm run build and everything will compile OK

[REQUIRED] Environment

  • AppAuth-JS version: 0.3.4
  • AppAuth-JS Environment (Node, Browser (UserAgent), ...): Electron

Support for http basic authentication

https://tools.ietf.org/html/rfc6749#section-2.3

Including the client credentials in the request-body using the two
parameters is NOT RECOMMENDED and SHOULD be limited to clients unable
to directly utilize the HTTP Basic authentication scheme (or other
password-based HTTP authentication schemes).

How the credentials are submitted to the authorization server must be configurable, probably according to the specs from openid (http://openid.net/specs/openid-connect-core-1_0.html#ClientAuthentication) whereas basic authentication should be the default if client credentials given.

This is related to both the token endpoint and the revocation endpoint proposed in #19.

Feature Request: Add session renewal or an iFrame AuthorizationRequestHandler implementation.

Right now, if my token provider only gives out short lived tokens (e.g. 5 minutes), I'd have to initiate a new redirect flow every time I want to renew the token to keep the user session alive. This forces me to break the user's experience and redirect/reload my app every 5 minutes! Ideally, there'd be a mechanism I could use to renew the token without initiating a redirect flow, which is all that seems to be provided from this library. I should note that I'm coming at this from the context of a SPA for which I know RFC 8252 doesn't directly apply (a SPA is not a native app, but both are public clients!) but know this library is designed to work with SPAs and even has a React example.

I guess I'd like clarification on how I can keep the user session alive without having to perform a redirect flow every time I need to refresh the session. I have coded my own implementation of an iFrame provider that implements the AuthorizationRequestHandler class to shoehorn this functionality into this library, but think it belong here to allow the use of prompt=none background/hidden refreshes for tokens where my OpenID Provider/iDP are aware of a user's session and consent status. Alternatively, could you provide an example of how we could keep a session alive with the current features provided by this library? Does implementing the OpenID Connect Session Management Draft make sense for this library?

Side note:
Google still recommends using the implicit flow for SPAs, and in fact, you cannot use a PKCE exchange with Google on a SPA (though your comments for other issues seem to show that Google knows better!) Is this something you can clarify or maybe have addressed internally at Google?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.