bhubr / react-simple-oauth2-login Goto Github PK
View Code? Open in Web Editor NEWSimple React component for OAuth2 login - Supports Authorization Code and Implicit Grant flows.
License: MIT License
Simple React component for OAuth2 login - Supports Authorization Code and Implicit Grant flows.
License: MIT License
How do I include scopes in my configuration please.
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?
[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
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
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
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
Some things seem to be consistently confusing new users of the package:
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.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>;
}
}
[benoit@mbp] ~/Code/react-simple-oauth2-login (master) $ npm test
> [email protected] test
> jest
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
FAIL src/__tests__/OAuth2Login.test.js
โ Test suite failed to run
Cannot find module 'react/lib/ReactComponentTreeHook' from 'ReactDebugTool.js'
Require stack:
node_modules/react-test-renderer/lib/ReactDebugTool.js
node_modules/react-test-renderer/lib/ReactInstrumentation.js
node_modules/react-test-renderer/lib/ReactReconciler.js
node_modules/react-test-renderer/lib/ReactUpdates.js
node_modules/react-test-renderer/lib/ReactDefaultBatchingStrategy.js
node_modules/react-test-renderer/lib/ReactTestRenderer.js
node_modules/react-test-renderer/index.js
src/__tests__/OAuth2Login.test.js
at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:299:11)
at Object.<anonymous> (node_modules/react-test-renderer/lib/ReactDebugTool.js:14:30)
@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?
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.
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.
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.
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.
How can i use with typescript?
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!
Reference to #45 by @jshthornton
As mentioned in #20 (comment)
During testing I encountered some browsers which apparently lack all or some of the following:
window.opener
being set to the opening window (to communicate back)window.postMessage
(docs)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.
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
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.