gardner / react-oauth2-pkce

React auth provider that works with AWS cognito PKCE🛡️🔒
49 stars 57 forks source link

[Enhancement] Add support for additional query string parameters to be added to the authorizeEndpoint & logoutEndpoint props #38

Open sidm1983 opened 2 years ago

sidm1983 commented 2 years ago

Hello,

I have recently used react-oauth2-pkce to integrate with an OAuth 2.0 provide called ForgeRock. Everything worked and integrated well. However, in this particular instance of ForgeRock, they had set up multiple login flows and the way to select which flow we wanted to use is to pass in an additional query string parameter to the authorize endpoint (e.g. flow=login2). Looking at the code, there is no way for me the add additional query string parameters to the authorize endpoint as the code adds the query string part and won't account for any query string parameters that may already exist in the authorizeEndpoint prop.

https://github.com/gardner/react-oauth2-pkce/blob/b0d9fea1e9e405037fdb094b2d3a59581f9a8f74/src/AuthService.ts#L159

https://github.com/gardner/react-oauth2-pkce/blob/b0d9fea1e9e405037fdb094b2d3a59581f9a8f74/src/AuthService.ts#L192

It would be great if the above lines of code in AuthService.ts didn't hardcode the ? character and instead first tried to detect whether the authorizationEndpoint already has a query string at the end of it. If it has a query string, then the parameters like clientId, scopes, code_challenge can simply be appended to the end. Otherwise, if the authorizationEndpoint (or logoutEndpoint) URL doesn't have a query string, then it adds the ? character first before appending the necessary query string parameters.

Would love to hear your thoughts on this or if there is currently already a way for me to add an additional query string parameter.

Thank you.

sidm1983 commented 2 years ago

I just looked at the list of active pull requests, and it looks like someone has already added this enhancement. Pull request #28 is what I need to be able to pass in a custom querystring parameter into the authorizationEndpoint prop.