Bug: state decoding in processAuthResult does not handle URL encoded base64 string

[jhassum]

Prerequisites

• I have searched the repository’s issues and Kinde community to ensure my issue isn’t a duplicate
• I have checked the latest version of the library to replicate my issue
• I have read the contributing guidelines
• I agree to the terms within the code of conduct

Describe the issue

The login state is set in the callback URL with a URL-encoded base64 string (1, 2), which replaces + with -, / with _ and removes padding (source).
The atob function used to decode the base64 string in processAuthCallback does not support these characters, and will fail if the state happens to contain one of them.

> atob('eyJraW5kZSI6eyJldmVudCI6ImxvZ2luIn0sInVzZXJfdHlwZSI6ImNsaWVudCIsInJlZGlyZWN0X3VyaSI6Imh0dHA6Ly9sb2NhbGhvc3Q6NzAwMS8_dXNlcl90eXBlPWNsaWVudCIsInV0bSI6Int9In0')
Uncaught:
DOMException [InvalidCharacterError]: Invalid character
    at atob (node:buffer:1302:13)
> atob('eyJraW5kZSI6eyJldmVudCI6ImxvZ2luIn0sInVzZXJfdHlwZSI6ImNsaWVudCIsInJlZGlyZWN0X3VyaSI6Imh0dHA6Ly9sb2NhbGhvc3Q6NzAwMS8/dXNlcl90eXBlPWNsaWVudCIsInV0bSI6Int9In0')
'{"kinde":{"event":"login"},"user_type":"client","redirect_uri":"http://localhost:7001/?user_type=client","utm":"{}"}'

I encountered this while encoding a state object containing a url path with query parameters "redirect_uri":"/?user_type=client". To reliably reproduce this, encode a string containing multiple ?:

> btoa('??????')
'Pz8/Pz8/'

Library URL

https://github.com/kinde-oss/kinde-auth-react%E2%80%9D

Library version

5.0.9

Operating system(s)

macOS

Operating system version(s)

macOS Tahoe 26.0.1

Further environment details

No response

Reproducible test case URL

No response

Additional information

No response

[DanielRivers]

Thanks for raising, will get this resolved

[dtoxvanilla1991]

Looking into this. Will get it sorted within a few days.

[pesickaa]

Hey @jhassum I have been taking a look into this and there are some complications we need to handle before we can release a full fix.

In the mean time, here's a slight workaround:

<KindeProvider
    ...
    callbacks={{
      onSuccess: (user, state, context) => {
   
      },
    }}
  >
    <App />
</KindeProvider>

If you make use of the onSuccess callback like the call above, you can handle your redirect manually there instead of passing your redirect uri into the state. This is just a workaround while we investigate further.