bhubr / react-simple-oauth2-login Goto Github PK

I'm having an issue getting this working on my app. I've followed the example and the popup opens and retrieves a code from the auth endpoint, then redirects to http://localhost:3001/auth/redirect

The app is on http://localhost:3001/

I can't seem to see any other errors stopping it from returning correctly. It occurs on Chrome, Firefox, and Edge.

Any assistance would be appreciated

How can i use with typescript?

Some things seem to be consistently confusing new users of the package:

• How to specify scope: it is mentioned in the doc, but someone asked here. It should maybe be emphasized in some way in the docs.
• How to use the examples: it's also mentioned in the readme, but there's this issue showing that it's not that clear. The settings-code.js and settings-implicit.js files are not included. Maybe we should go for a CRA-based version of the example, use env variables, and display warnings if some of the required ones are missing.

Running npm start in the example client folder returns

Server running at http://localhost:1234
×  react-simple-oauth2-login\example\client\src\AuthorizationCodeExample.js:11:7: Cannot resolve dependency './settings-code' at 'react-simple-oauth2-login\example\client\src\settings-code'
   9 |   oauthServerUrl,
  10 |   scope,
> 11 | } from './settings-code';
     |       ^
  12 |
  13 | export default function AuthorizationCodeExample() {
  14 |   const [accessToken, setAccessToken] = useState(null);

How can i fix this?

Google's authorization url let's you supply an additional query param of ?prompt=consent to force users to have to reauth every time.

If you supply that in the authorization url as such https://accounts.google.com/o/oauth2/v2/auth?prompt=consent then the client id is not appended and Google rejects with a malformed url error.

This can be bypassed by forcefully inserting the client id in the authorization url.

Hello , I added OAuth2Login to my project. I saw that problem. How to solve this problem

 ./node_modules/react-simple-oauth2-login/src/OAuth2Login.jsx 93:11
Module parse failed: Unexpected token (93:11)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process thi
s file. See https://webpack.js.org/concepts#loaders

    // eslint-disable-next-line react/jsx-props-no-spreading
>     return <button type="button" {...attrs}>{ children || buttonText }</button>;
   }
}

Hello everyone, thanks for the library first of all!

I'm working with a cross-origin request and I need to display the code from the response.

However, when I try it doesn't show up. If I set crossorigin to false I get an error in console about not being able to read the href from because of the cross-origin request. Nevertheless the code in that case is logged.

Has anyone encountered this before?

This is what I'm doing:
<OAuth2Login authorizationUrl="authUrl" responseType="code" clientId={clientId} redirectUri={redirectUri} onSuccess={(e) => console.log(e)} onFailure={(e) => console.log(e)} isCrossOrigin={true} //if false, the console.log works buttonText={"Login"} />

In addition to this, the behaviour that I have with isCrossOrigin=false is ideal, i don't have in reality any error in the behaviour, so I was wondeering why is the error message appearing in console

Reference to #45 by @jshthornton

How do I include scopes in my configuration please.

npm i react-simple-oauth2-login
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"^17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.0.0" from [email protected]
npm ERR! node_modules/react-simple-oauth2-login
npm ERR! react-simple-oauth2-login@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!

@bhubr what are your thoughts on automating releases for this package using https://www.npmjs.com/package/semantic-release

I'm happy to get it implemented. Might also be a good tie to move over to github actions?

PS. is it worth turning on the discussions feature of github for this repo?

Add a prop to the Component to allow different methods when clicking the button. I.E: Popout (default now), new tab(_blank) & current window.

I might look into this myself in the near future if I have time

It seems that the package has a dependency for react 16-17. Is this a matter of testing or are there breaking changes in react 18?

The existing tests, inherited from the original module, are too basic to be meaningful.

End-to-end testing would make future developments (OAuth2 + PKCE) safer.

As mentioned in #20 (comment)

During testing I encountered some browsers which apparently lack all or some of the following:

• popup URL tracking (like you use)
• window.opener being set to the opening window (to communicate back)
• window.postMessage (docs)

Examples of this:

Firefox Focus/Klar does not allow communication between tabs (at least I didn't get it to work)

MetaMask android (and many apps with in-app browser) (opens popup in separate browser app and thus allows no communication)

So I'm trying to figure out how to support those cases / provide a fallback.

Possible strategies:

Call server function in popup

Popup calls server & closes itself -> original window checks server for completion
This would work in any situation, even when the popup is opening a separate

Disadvantage: added complexity in backend is needed

Fallback to redirect flow

A redirect flow would work in all browsers as it stays in same window and just redirects back to the app.

Disadvantage: Needs app to know how to restore app state.
Problem: I don't see a way to detect whether to use this fallback reliably, and defaulting to it degrades UX for all other users.

Note: I'm currently looking into this.

If you choose the "code" responseType (aka server-side) and your server is on a different domain to your React app, the popup window throws a DOMException "Blocked a frame with origin from access a cross-origin frame". This exception is then silenced in the popup window's poll() method.

There needs to be a better way to handle cross-origin requests. This is usually done through posting messages between the parent and child windows.

When passing a redirectUri http://localhost:3000/#/oauth-callback/discord
The pop-up link generated by this lib is:
https://discord.com/oauth2/authorize?client_id=X&redirect_uri=http://localhost:3000/#/oauth-callback/discord&response_type=token

Discord will reject the request with the message: "Invalid redirect URI"

If I manually encode the URI and pass it to the React component, it works fine.

[x] Basic support
[ ] Check state
[ ] Clear PKCE transient values in localStorage/sessionStorage
[x] Add example
[ ] Add example's sample config file
[ ] Document (new prop tokenUrl)
[ ] End-to-end testing
[ ] Ask for reviewers & testers